I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap as shown in the below images. Or should I use both of them as per requirement in the same project?
I would like to use ready made UI components like Collapse-able Side Menu, Tables with pagination, Auto complete Select etc.
react-bootstrap is more popular than reactstrap. I will speak about react-bootstrap and Material UI.
I have more experience with Material UI. I don't even know how Material UI became that popular while it was very bad when it was released. It used inline styling and it was a nightmare to customize anything. Its performance was very poor. Still, it became very popular and it improved a lot. I used it in my latest project and the performance was great and I used its new CSS in JS solution combined with styled-components. I think it will be a bit harder to use than react-bootstrap but it has more components out of the box.
For most people, react-bootstrap would be an easier choice.
I can't tell you which one to use but I can give you some things to think about and decide yourself:
Which design do you prefer?
If you have more experience with bootstrap, go with react-bootstrap.
If you prefer sass go with react-bootstrap. If you prefer CSS in JS go with Material UI.
If react-bootstrap is missing some components you would need that exists in Material UI go with Material UI but remember that you can add other external components to your project anyway so I think this may not be a limitation.
It depends on your choices, yes, it's a little bit of complicated to customized material, but the looks and feels is outstanding, for tables and all, better to use Material-UI it has inbuilt pagination if you are not comfortable in that you can try this one it also comes inbuilt pagination and much more https://github.com/react-bootstrap-table/react-bootstrap-table2
I agree with comments about the cons referred in your question seems to be more opinions than facts; probably the only fact we can say after compare the two packages is that Material UI has some more built in components.
Once said that it's hard to take a decision without knowing the specification of your project.
Probably the best suggestion we can give you is simply use the one you are more comfortable with.
Hope this helps.
Refer to my experience, if it is an commerial/external project that needs minimal branding, and you are looking for basic reuse-able component to create Admin Portal or CMS, I prefer reactstrap/CoreUI. My main concern is Theme Overriding.
Not enough documentation about overriding material ui style, had quite a hard time to edit and test the theme setting again and again, while reactstrap/CoreUI allow you to import your own .css file, or overriding its class css. So you can simply change the textfield padding at once in css while your designer request to.
Neither material ui and reactstrap/CoreUI can fulfil your need. You may install other useful npm like react-select, multiple datetime picker, autosize textarea, or color picker. Then you try to make its style to be consistent as other Textfield. Styling a component like material ui is quite hard because of its behavior, e.g. label zoom out while focus. But Styling like reactstrap/CoreUI is much easier, you can even reuse the bootstrap classname.
If you are trying to deliver something fast & small without designer, material ui is a good choice, cover most of your use cases. If it is a long-term project and designer is watching you, I am afraid material ui is not a good choice.
Anyway, case by case.
I would say it is your Choice. But if you are good at bootstrap-4, best to go with Reactstrap which is component based library for react.
In my Company we are using Reactstrap and things go quite well. But this doesn't mean we are not using our own media queries and flexbox,styled-jsx which we obviously do.
Even though you will be using ready made Components available in Reactstrap, as you progress in the project you will have to use other libraries 'React-Final-Forms' to handle forms and form data efficiently having high performance when compared with normal forms available in ReactStrap.
Similarly you will need a library known as 'React-select' to handle drop downs, which will give me more options than normal ReactStrap select form Component.
As for now, I am doing project on Next.js and Material-UI. I was also looking for such comparison between Bootstrap(reactstrap)/Material/Ant. And I am agreed with Daniel Ricci with choosing Material-UI.
Why's that?
First of all, I have spoken with my better experienced friend (he has contributed to his own (DEVExpress) React Component Library, so he was know what he has talking about)
Project Management Side pros:
Material itself has a very useful style guidelines from Google. So it is also not about library components, but about styles / colors / design. So you could always customize yourself and create your own theme. But as for you, it will be easier to understand why you are using Roboto:400 at H3 title, and «what color I should pick as secondary?», if you decide to choose primary color.
As a result, it's much easier to find a UI/UX designer for your project. And you always know how your project should looks like.
Default react Material-UI component library is quite rich and very good described with examples. (As you may already noticed). And also there are a lot of plugin libraries components, which is ready-to-use out of the box. In my own case I was needed for a editable material react tables, and have found them in via google in 5 seconds or so. In my project tables are everything and they present the product (price comparison) so that's why I choose material myself.
You could compare component libraries via google trends or github stars, but in your own case with: Collapse-able Side Menu, Tables with pagination, Auto complete Select I would choose MaterialUI.
As for cons, visually Material Style is very populated by devs (cause it's Android's app default theme) and some people thinks that it looks a bit ugly, but I thought it couldn't be a problem because you could always customize your own theme.
And as mentioned Kleo is his original answer:
If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy, even if you mix them. Totally yourself is remaking the wheel, but you can always pull in boostrap styles etc.
Hello I'm really new with React and webpack and after a few days already manage to set up a functional working environment. Now I'm stuck in design issues since I would like to create a 960 wide grid separated into 12 columns with 15 gutters. Then start by creating a 100% high section where you center an image on an 80% white background versus a red main color. In advance grateful for any help or tip that is offered
Many css frameworks would let you do that. you don't need to change your existing toolkit if all you need is grid positioning or basic styles.
Also, you can find a number of react libraries for reusable react components like React Toolbox
for example If you're already familiar with bootstrap, Take a look at https://react-bootstrap.github.io
I have designed and released a mobile app for Android and iOS which is often depicted by the users as poorly designed. Indeed the app only features buttons scattered around the main Form that each opens a different form to show pieces of information or do an action. The app uses CN1 flat blue theme along with material icons but it does not look enough to make it material designed.
Thus I am planning to redesign the app and make it a material design one. While reading the material design specifications the tasks appears huge because there are many parameters to take into account to stick to the specifications although there is no obligation to apply them all.
However according to Android developers site and this SO question it seems that Android (version 5.0 onwards) provides helpers (eg a material design theme) to help follow the material design specifications. Are there such helpers in Codename One, or do I have to do it manualy (ie creating shadows, animations linked to actions, component styles, typo, dialogs ...) ? Or put another way, is there a way to give CN1 some hints about the app (primary color is xyz, this piece of information is a subheading, ...) and let CN1 apply the material design rules (animations between forms, shadows, ...) ?
Hope my question makes sense and can receive some help different (if possible) from what is provided in this SO question about Codename One support of Material Design as my app is already using material icons and native typos.
Thanks in advance for the help provided,
Cheers,
If you check out apps such as JAT or buua you will notice they apply the material design principals very well.
The Toolbar class should already comply with most material design principals by default and the FontImage class includes the standard material design icons.
We have task specific classes such as BubbleTransition to implement effects such as the floating button turning into a dialog etc.
What I find most important in material design and design in general is:
Typography - use a proper native: font that matches the occasion and looks good on the device.
Spacing - use spacing intelligently and use millimeters to keep it consistent between devices.
Colors - pick a palette and stick to it consistently, material design has some great color palettes that really make the app shine.
Simplicity - don't try to much. Simple is gorgeous. Yes you can add more shadows, animations etc. but you don't really need those and very few users would really notice that work. Everyone will notice if the app is minimalistic (in a good way).
Screenshots of the app might not be good form on stackoverflow but if you post screenshots/link to your app in the discussion forum I'd be happy to give you specific tips. Notice that hiring a designer to do some work or using a design template would be very helpful too.
Does codenameone has support for Google material design,if yes help me with a sample code on how to use (both icon and font) it in my app.
Thanks
Not every element of Material design is supported but the fonts (roboto) etc. will be used when you pick the native: fonts in the Designer tool.
You can also use all the material design icons using the FontImage class see https://www.codenameone.com/blog/material-icons-background-music-geofencing-gradle.html
There are quite a few other things but the question is a bit vague.
I have been working on Foundation 4 framework.I just want to know whether off canvas layout system is required for this version or not. As per my knowledge its not required because they have added mobile support with 'Mobile First' theme.
Please correct if i am wrong.
Thanks,
Srinivas
Off Canvas Layouts is not required for Foundation 4 because it was written for version 3. But while it was written for V3 it can work with F4. I know, and not only by opinion, but as a matter of fact, as I have played with it already and have a proto using F4 with off canvas layout specifically with the sliding panel similar to this.
For better UI in small devices Off Canvas Layout is awesome. Like if You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). You should really use it. And Of course, if you have downloaded the latest release from github repo or via website it is already come with Zurb Foundation 4.