I have used quite a number of CSS Frameworks after discovering their existence. Using CSS framework makes front-end web development more efficient.
If you don’t already know, a CSS Framework is a collection of CSS files with predefined rules for grid-based site layout and typography, and handles cross browser compatibility issues.
There are many CSS frameworks. This post looks at some of some free CSS frameworks I’ve worked with, namely 960 Grid System, Blueprint, 1140 Grid and Foundation.
Designed for fixed content width 960 pixels. It is a pure grid system. It provides a few variants of column layouts: 12 columns (60 pixels), 16 columns (40 pixels) and 24 columns (30 pixels), with RTL versions.
The download package include codes for the different layouts, and comes with templates for use in design softwares (eg Photoshop, Illustrator, Gimp) and printable templates for sketching designs on paper.
The downside of this framework is fixed-width. It’s less flexible on devices and screens with different resolutions.
There’s also a Variable Grid System to define different content width, column widths and number of columns.
I’ve not used any of the variants.
Designed for content width 960 pixels with 24-column layout, with 30 pixels per column.
Coding and design-wise it’s very similar to 960 Grid System.
Blueprint comes with more than just a grid layout. It includes typography and predefined elements. It also has print styles which are printer friendly. Having print styles is quite important as for some reason some users prefer to read sites from prints.
The ‘extras’ is a bonus to cut down styling your website if you like the defaults.
Designed to fit into a 1280px monitor and becomes fluid and adapt to smaller monitors. It uses 12-column layout with column widths defined in percentages. Columns can be defined inside columns, ie nesting column support.
The download package comes with grid-based only layouts.
Foundation uses percentage to define page width, by default 980 pixels and this value can be redefined. It automatically adjusts to smaller devices. It uses 12-column layouts with column widths defined in percentage. It also supports nesting columns.
Foundation comes with additonal codes to style buttons and forms.
Download package also include scripts to enhance user experience – I’ve not used these yet.
because mobile devices are becoming more popular and more users browse sites via their mobile devices, I prefer responsive designs with 1140 CSS Grid and Foundation. Websites using these framework are well displayed on mobile devices.
1140 comes with grid-only layout. Foundations comes with more. I prefer the latter as there are more styles defined and it cut down coding times.
The currently skin used by this site uses foundation.
Please note that there are many CSS Frameworks out there. These 4 frameworks are mentioned because I’ve worked with them.
Do you use CSS Frameworks and what are your thoughts?