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.
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 :-)
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)
Reference this question:
What is the best CSS Framework and are they worth the effort?
Do I go back to the "old" way of manually creating a template or downloading free ones again. For a little bit I thought a grid was the new thing and the best, now it appears I am wrong after all and not sure of best practice.
And, yes, I can write my own CSS but didn't want to create the infrastructure if I didn't have to.
Perosnally I use the YUI stylesheets and sometimes the YUI grid builder. I don't use their whole framework, but just some of their stylesheets. It keeps everything really lightweight and it's still all just standard CSS.
http://developer.yahoo.com/yui/grids/
I don't see anything wrong with using a framework to rapid prototype your design, as long as when that design is approved by your client / boss you clean it up and remove the unnecessary parts.
You can make your own grid layout with the Variable Grid System (css grid framework). It works for fixed and fluid layouts.
I have to present a prototype of an web app in the following days to one of my clients, the thing is I'm not so good at CSS and worst of all I'm almost never happy with the results I get.
Coding the business logic poses no challenge to me, the UI design however takes more than 80% of my time. I don't need nothing breathtaking, just a clean, nice and presentable environment, an example:
This is a recurring problem I've been having, I wish web UI development could have a less naked default style, an approach similar to Visual Studio or iPhone SDK would be very useful to me.
The above mockup created with Balsamiq Mockups is a great example, all the most common "components" are available to use, and best of all: there is only one good-looking style to choose from.
Is there something like this for the web? A neutral yet nice CSS or Javascript UI framework?
Options so far:
Bootstrap
Qooxdoo
jQuery UI
jQuery Tools
MochaUI
Ext JS
Yahoo! User Interface Library
BlueTrip
BluePrint
Uki (Demo)
Napkee
YAML
Baseline
iPlotz
Sproutcore
ForeUI
I'm interested in knowing if there are any CSS-only UI frameworks.
I found this page with a very nice list of Web UI Libraries, but most of them (at least the good ones) seem to be specific to Java, are there any equally good alternatives in pure CSS or JS?
PS: I'm not interested in AJAX, effects, behaviors and so on... my main (only) concern is style.
Thanks for all the suggestions everyone!
After a very careful consideration of all the UI libraries suggested, I've come to the conclusion that ExtJS and Qooxdoo are the ones that most closely fit my needs. jQuery UI seems promising but only offers a reduced amount of elements.
As far as CSS-only libraries go I've found BlueTrip / BluePrint and the themes suggested by tambler to be the best. Aside from that, Flex and Napkee also seem to be worth exploring.
Time to learn ExtJS now! =)
A combination of 960gs for layout and jQuery-UI for styling is probably what you are after.
You could also consider the blueprint CSS framework instead of 960gs.
I can't believe nobody has mentioned:
http://www.extjs.com/
Its a commercial js frameworks, but pretty affordable, and makes putting together a nice UI a breeze. There's a much more complete set of elements then jqueryui, and its designed to make an entire app. I've only played with it a little, but I really love it so far. Free for personal use.
If you really want to get a feel for a complete UI developed with EXT, try this url:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
What about using dojo and dijit?
Dijit is a fast way to create widgets and elements. It also comes with 3 default themes which are easy to modify.
A good list of different widgets here
Pair up with someone who specializes in UI design.
If you are better at dealing with business logic, your time is better off spent exclusively coding business logic so you can master it. This will require you to learn how to interface with someone else who excels at presentation. (xml and json are common means)
Business logic and presentation are very different. Designing a system that not only looks good, but is intuitive and easy to use is quite difficult. Equally as difficult and time-consuming as establishing the inner workings of a complex application.
A good interface is not as simple as including a css framework.
I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.
If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction. While solo development projects can be rather fulfilling, I view it as inefficient. It is very rare that someone possess skills to develop top-level applications solo.
The challenge is finding someone who you work well with.
Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.
There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.
Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.
(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)
This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!
Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.
You might consider browsing the following site:
http://themeforest.net/category/site-templates/admin-skins
There are several "Administrative" themes available for purchase here that may suit your needs.
wireframe mockups like that are a brilliant way to start.
Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:
jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)
jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.
If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.
A relatively new PHP framework specifically designed for development of UI-focused software. Elements you have here including Tabs, Filters and Grids are included and will take you about 20 lines of code to implement.
http://agiletoolkit.org/
Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.
It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.
You can then upload this to a server or run it on your computer as a working example.
You can create forms, links, tabs, rollovers, Javascript effects.
If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."
I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.
Summarizing your problem, there is a wikipedia page.
There is yaml-css, which takes yaml and turns it into css
There is baseline, but it assumes some css knowledge.
I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.
I hope that helps.
A combination of 960gs for layout and jQuery-UI or Jquery tools is great
i use them almost in every project but i'd like to add to http://easyframework.com/
although its not a business friendly so
make sure to check out its license
but i like it
I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything.
It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.
I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.
Sass looks like it has potential as a way to mitigate some css headaches.
I like to add Bootstrap it's intuitive, and powerful front-end framework for faster and easier web development.
I like RocketCSS. Nice clean design, give it a go.