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.