Web designers love tinkering with HTML/CSS. Give me a nice looking photoshop mockup of a navigation bar and I’ll happily spend all day getting it just right in HTML/CSS. It is ultimately satisfying to see a working version of an image arise after a day of adjusting the pixel widths and styles. Building out a great front end design for killer content is fun for us…But its not always practical to reinvent the wheel (or an entire UI for that matter) every time a website or web app needs to be built.
Whats the answer then, you ask? The pragmatic thing to do is use a CSS framework. This way, the fundamental platform of your site starts off strong and you can spend more time on higher value items (like that navigation bar!). You are also guaranteed a basic level of compatibility with browsers, screen sizes and some responsiveness in your design. So then, what is a CSS framework you ask? - Its a ‘package’ that allows you to define some baselines like a grid, typography, standard css layout for your site and general rules. Think of it as a well organized boilerplate that gets your site’s foundation off the ground quickly. You should pick one that aligns with the site’s design philosophy best (you can also make your own). There are many pro’s to using one, just like application code, you are normalizing on base code, reducing rework, mistakes and enhancing the overall quality of your website. Essentially, it will make your work better, faster and more accurate. There are cons though – the biggest danger is to become over reliant on one, as well as the fact that you are using someone else’ code and are tied to how efficient their code will be (But working off the shoulders of gentle giants is rarely risky I think). There are several well made CSS frameworks available today, the majority of which are open source and hence free to download. Three stand out:
1. Bootstrap (from the team at Twitter)
Bootstrap is a CSS framework from the good folks at Twitter. Its become increasingly popular since its release and just works. I personally use it the most and have had good results so far. Customization is well supported and the framework is actively discussed and used via a community and strong documentation. If you have never used a CSS framework before, this would be a good starting point. And yes, it plays well with jQuery (most all frameworks do) . It is actually very deeply integrated into jQuery UI projecs too.
2. Foundation (ZURB)
If Bootstrap was a car it would maybe be a Mercedes – in which case Foundation would be a BMW. Both frameworks are reliable and solid, and are arguably strong rivals. It has come out of the same fire as Bootstrap and the YUI (Yahoo user interface library). Like these, it is used all the time in creator ZURB’s projects and is regularly enhanced. Either framework is the kind of infrastructure DNA you want in your project – well tested, supported, current, enhanced and resilient. Foundation is now on version 5, has some nice fonts and is actually very easy and refreshing to read. Here is an example, and it has a slider too! As a side note – a fork of the project (that is another product in its own right now), Gumby, also looks interesting.
3. Unsemantic (the new 960 grid)
The Original 960 grid system was almost a defacto standard after being released in 2008. It proved the case for using a grid based system with CSS and allowed designers and coders to build better sites. One issue was though that 960.gs is not responsive – it does not alter page elements based on a changing viewport, so going from a desktop to an iphone you will see the same webapge. Unsemantic fixes this by adapting the 960 system to a responsive layout. It is a very powerful grid system, arguably more than other frameworks and can be used if you really want to have ultimate control and flexibility over your layout – this is very useful when your layout is a bit far out there.