Lately it seems the word framework is being used all over the place, usually it’s in reference to a web development framework like Rails, CakePHP, CodeIgniter, Django or even the javascript frameworks like JQuery and MooTools. So I can’t say that I was too surprised to hear that CSS Frameworks are becoming more mainstream. Hopefully this might even see CSS getting a bit more recognition from back-end developers.
Frameworks
When creating websites, development frameworks are an ideal way for back-end developers to rid themselves of the repetitive tasks that are required on each and every occasion – tasks like building a user management system, handling database access and even the structural organisation of the files and code so that it is easily maintainable and consistent across projects. Rather than having to make these kinds of decisions for each website that you build, a framework can take care of them and leave you to focus on the new websites indiviual features and requirements. Essentially, you’re starting your project with 25% already completed rather than starting from scratch. And that just makes good sense.
CSS Frameworks can provide similar benefits to front-end developers. So rather than tackling the same tiresome display issues every time you create a website, you can just let the CSS Framework handle it for you. I took a look at a few of the options out there – YAML, Yahoo UI, 960 and decided on using the Blueprint CSS framework. It seems to have the best press associated with it and once I looked through the source code I realised that it’s not too different from the styles I usually like to use.
Blueprint
Blueprint contains seperate source files for each section of the typical CSS file – reset, grid, typography and forms. It also contains a compressed CSS file containing all the styles to save the amount of http requests your website has to make. Some of the frameworks main features are:
A mass reset of browser default styles.
Excellent defaults for typography using relative sizes, ensuring it will scale well in all browsers.
Easily understandable grid layouts. It only takes 2 minutes to mock up a simple html page with as many columns as you want.
An actual print stylesheet.
Easily modified to use your indiviual syles.
The main aspect of blueprint and most of the other CSS frameworks is its grid-building capabilities. By default, the grids.css file sets up a 950px wide grid of 24 columns. This grid is suitable for any website trying to fit into the typical 1024px width dimensions. It is customisable though so if you do want a larger/smaller grid then that isn’t an issue.
At this point it’s important to remember that all the elements can be modified. Blueprint is a set of base styles that any developer can use or update to realise the goals of the website. It should not be treated as the complete CSS solution for your project.
Conclusion
Many developers/designers will tell you that CSS frameworks aren’t neccessary, that talented individuals can write their own code. This is a fair argument, it was my first impression too but having tried Blueprint for a while I’ve been impressed by its capabilities and I will be using it in future projects. Its class naming system goes against some of the “semantic” guidelines that you’ll see elsewhere but I dont really rate this as an issue. If you think the styles are named incorrectly, then just change the names. The actual CSS code is excellent and cross browser compatible so it’s worth a look for developers of any level. It’s also an excellent resource for web designers trying to branch out into the CSS world. And maybe the next step for CSS frameworks is to get included in a web development framework like Rails or Cake. Wouldn’t that be nice.
Check it out: Blueprint
UPDATE: There’s a cheat sheet available at digitalart.net – a reference page with all the important class names that you can print out and keep while you work.