How to Choose Right CSS Frameworks

March 10, 2010 • By

CSS Frameworks allow you to rapidly improve and speed up your development time when used correctly, and provide a powerful way to style our websites and applications with flexibility and effectiveness.

So How Do We Choose the Right One?
The first step you need to take is to make sure you decide upon a framework that has an established and accurate representation of detailed documentation. This is vital to the steps you’ll take in implementing and utilizing your framework the way it was intended. Next, you should analyze what problems the specified frameworks of your choice will solve. As you come across frameworks that you believe might “fit the bill” for the project(s) at hand, then it would be wise to compare each of them and elaborate on which framework addresses which concerns and satisfies your needs.

Also, don’t hesitate to ask other developers and colleagues which framework has worked best for them and why? This will help you gain valuable insight based on the experience of others, something that can’t be bought. Another point I would like to make is the role your chosen framework’s community plays. How big is it? Are the members helpful? Does it provide invaluable resources? Every one of these questions help you determine if your framework’s community is going to be of use. The logical point of view is, the larger and more involved the community is, the better your chances are at finding the right type of help when you need it.

Below we will take a look at 8 of the best frameworks we found to be useful for both developers and designers.

Blueprint CSS

The Blueprint CSS framework uses a grid-system that has pre-built typography and includes various plugins, built-in form styles and more. With BP you’ll also find good stable documentation, a wiki, an active discussion group, and examples of sites built on the Blueprint system.

Elements CSS Framework

Overall, the Elements framework makes it much easier and efficient to write CSS code. It’s a way to keep your files organized, benefit from a collection of present classes that can make your development process much friendlier, and it’ll automatically add respective icons for external links so that users will be able to quickly find and access them as well.

Content with Style

Content with Style is a CSS framework that helps you style and structure your website with amazing design and typographical elements. With six different layouts to choose from that include vertical navigation, two content columns, horizontal navigation with two columns of content and useful one content columns. Content with Style is an efficient way to “prioritize” the content on your site and focus on areas such as the header, main content, sub content, and more.


This lightweight CSS framework uses PX, EM, or % widths for the process of signaling a page width, and it is also based on an elastic layout. Emastic comes with various pre-defined styles for your typography and much more. Predominantly, the grid is made up of blocks that are sized from 5 to 75em units. The default sizes can be changed at any time and the frameworks design options depend on the grid layout.

960 Grid System

The 960 grid system is a powerful CSS framework that lets us develop and prototype websites rapidly. The layouts are based on 12-16 columns and the layout templates are for Illustrator, Photoshop, Expression Design, Fireworks and more. You can also print a variety of templates for use with pen and paper if that’s what suits you best.

Yui Grids

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features included are support for fluid-width, easy customization, flexible template columns, and more.


“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. YAML is focussed on web standards and accessibility, slim framework core with numerous extensions, complete multilingual documentation, and robust, flexible layout concept (columns & grids).


SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. SenCSs isn’t a framework like other CSS frameworks, it doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSs do? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.