My web app is built using Zurb Foundation for the UI layer. The more I read about Material Design (getmdl.io) the more I like it. I also understand that the Material Design toolkit is not comprehensive as Foundation or Bootstrap maybe. So my question is - is it possible for me to use both? For example - use Foundation for layout etc and use Material Design for stylesheet and components?
Or am I completely missing the point and would be creating an application that would be a nightmare to maintain? Advice welcome..
The short answer to your question is yes you could use both but the work required to get them both playing nice together would be a huge undertaking.
Personally, I think using both is more trouble then it's worth as they essentially are the same thing (Front-end frameworks) however, one admittedly is more aesthetically appealing. Since you're already using Foundation I would stick with it.
You can always take specific components from Material Design that you like and include them with Foundation although this would be much easier if you were using the scss version.
Hope that helps.
Maybe the project referred below will help, if that's the direction that you want go.
Material Design version of Foundation Framework by Zurb
http://eucalyptuss.github.io/material-foundation/
Related
I am trying to decide on a CSS framework for a basic portfolio website. I want to have some JS components that I can add with a separate library. It seems that people love Bulma but I am wondering what are the limitations give it is a "JS free" framework.
So far I have only used Bootstrap and I would like to try something new and preferably cleaner and easier to use.
Any insights and suggestions are welcomed.
Thank you!
Bulma has most of the important things that you will need. It does lack some things, however. For example, Bulma doesn't have alerts, carousel, list group, etc. Bulma addresses this on their website (https://bulma.io/alternative-to-bootstrap/). Personally, I would say stick to bootstrap. It has a larger community (which means more stack overflow questions, documentation, etc.), and its color scheme is more professional.
I'm starting a new website from scratch and I was wondering if React UI Framework are worth the try for building a website, or it's better to create my own components, grid etc...
I really like projects such as ElementalUI's Take on bootstrap3, MaterialUI forms components, Grommet, but they don't mix well together, some are using SASS, other LESS...
During previous projects, I've used some UI frameworks, but when I needed to do something that was not thinked by the creator of the framework, it was less complicated to create it myself than finding a workaround, and often more elegant.
I'm thinking that building my own React components using SASS and CSS3 could be the best solution.
Thanks!
This is an excellent and complicated to answer question at the same time.
I've been involved in few React projects, with different teams, and most of time, we were composing our components sets with customs style and when we needed a specific thing, the way to go was npm, for instance a custom range date picker.
Full disclosure; I wrote a great deal of ElementalUI.
I recommend researching each of the available UI frameworks and deciding whether they have the components and functionality required for your project. I also recommend looking into the components themselves to see how and why the authors solved a problem the way they did - that's probably the most valuable thing.
Elemental, and most other frameworks, are really helpful for applications where the UI must be consistent throughout. My own experience has been that for websites you're better off building your own components.
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
Semantic UI is awesome but it is not really helpful for setting up a responsive/mobile-ready site architecture. Is it possible to use Foundation UI along with Semantic UI in the same project? I love the breadth of widgets available in Semantic (not to mention the dead-simple syntax), but I think I'd need to use Foundation's mobile/desktop grid capabilities.
So Foundation for frame (and maybe typography), Semantic UI for elements/widgets? Possible? Highly unrecommended?
(preemptive note: there seems to be a lot of overlap in capabilities between Foundation and Twitter Bootstrap and though I like Bootstrap too, Foundation seems broader in functionality without losing anything so that's why the specific Foundation-Semantic comparo)
My question is answered in the Foundation FAQ (question #8, "Can I use just the grid?"): yes.
Is there a sort of css framework which i can add to a gwt project, and this will completely set a new UI to my gwt application. Sort of changing the look and feel.
I love GWT, but others like Vaadin are so good styled, if there were a complete set of css librarys that would make my app a lot nicer would we great.
I think we can be great developers but not so good designers.
Thanks!
I would recommend starting with http://gwtbootstrap.github.io/
As well as: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss
I would then dive deeper into the GWT docs to get a good handle on creating your custom themes. At some point any styling theme/framework will fail your needs and you will need to have some fundamentals for styling yourself.
Personally, I highly recommend using UiBinder and ClientBundle:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
http://granitode.wordpress.com/2012/04/19/gwt-uibinder-using-a-clientbundle-with-cssresources/
#fguespe, I'm not aware of something such for example twitter bootstrap that you 'just' plug.
Eventually the 'web designer' needs to know about specific gwt CSS classes that impact the look and feel. If importing the GWT 'non plain' themes, you'll need to write customizations.
Yes indeed Vaadin and GXT provide a default nicer look and feel... Let's just fire all Google devs for a lack of focus :-)