0 comments
Various 
When you have build a website before you know the drill of building HTML and creating CSS files to style the stuff you created using HTML. For some it’s a pain, for others a form of pure art. I think however that it can also be part of a not-invented-here syndrome that developers have grown.
If you’re a hybrid developer or a regular developer building a website you’re probably looking at this huge mountain of work called styling the website. It however can be made when you have a ready made grid in which you can position the elements that are on the page.
In this post I will be showing you five great CSS frameworks that make building a nice looking webpage a whole lot easier and take up less of your time.
The 960 Grid system
The first framework I like to show you is the 960 grid system. It’s a 960px wide virtual grid that divides the page in to 12 equally sized columns. In this grid you can place elements and determine how many columns they should take up. To give you an idea of how it works, here’s a small example:
<div class="container_12">
<div class="grid_4">
<h2>Where to next?</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/About">About</a></li>
</ul>
</div>
<div class="grid_8">
<h2>Home</h2>
<p>Lorem ipsum stuff</p>
</div>
</div>
I think this framework is great, because it makes position stuff on the page way easier than doing the same thing by hand. Also, because it’s a standardized grid you can’t go wrong when building for multiple browsers. Nathan Smith did all the testing for you, so you don’t have to.
Download: http://960.gs/
Blueprint CSS framework
Another cool CSS framework is the blueprint CSS framework. It is the most complete framework I have found so far and features a lot of stuff that might help. I explicitly say, might help, because it’s also one of the most difficult frameworks to get your head around.
There’s a grid system much like the one in the 960 grid system, but there’s a couple of more things:
- CSS classes for various typographical features on the page. It’s entirely based on expert knowledge of typography that dates back before the web. It helps make the text on your website more ledgible.
- CSS styles for forms so that your forms look good no matter where you put them on the page.
- Tools to support the workflow of creating CSS styling for your site up to compressing the finalized CSS to make it faster to download for mobile devices.
Download: http://www.blueprintcss.org/
Bluetrip
Since I’m talking CSS framework I’d like to add bluetrip in the list as well. It features most of the stuff that is in blueprint CSS framework, but adds some statusmessage styles as well.
I think these are a small gem that I would like the other frameworks to put in their framework as well. Other than that, it’s yet another CSS framework.
Download: http://bluetrip.org/
Baseline CSS
As far as CSS frameworks go, baseline is a bit different from the rest in this post. The makers of Baseline CSS focused on typography and nothing else. They payed a lot of attention to the way fonts are rendered in webpages and fixed a number of issues regarding typography in the various browsers that are available today.
If you’re a typography fan or freak I suggest you check this one out.
Download: http://baselinecss.com/
Formy CSS framework
The last framework I like to add to the list of my favorite CSS frameworks is formy. These guys did a great job standardizing the layout of forms on webpages. It’s all based on input elements and labels so you don’t need to add special CSS classes to your forms to make them render correctly with this framework.
Download: http://code.google.com/p/formy-css-framework/
Final thoughts
In this post I’ve only shown a couple of frameworks that help you get the most out of styling your website. All of them serve one goal: Move you away from the boring boilerplate CSS coding and onto designing your website.
I suggest you try a couple of these frameworks and pick the ones you find the most suitable for your line of work. There’s a lot of overlap between the frameworks, but there are also a lot of subtle differences between them that can make the difference for your site.
Have fun!