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.

  • http://www.gregprogramming.com Greg

    I’ve looked at CSS frameworks for a while and really just started using 960.gs and now I think that they are awesome. It takes WAY less time to create a layout and ,at least with 960, i can design with a grid in firework or photoshop and then port it to HTML and keep the design in tact. It used to take me a while to figure out what size i wanted to make something but now it takes literally seconds.

  • Karl

    You could mess around with these and stick non-semantic markup all over your page or you could just use a preprocessor like SASS. 50 lines of SASS can do all the gridding these libraries do while working with the ids/classes you already have on your page.

  • Pingback: How to Choose Right CSS Frameworks | Lively Design Tuts()

  • http://www.harmonysteel.com Harmony

    I’ve tried a few of these in my search for a good framework. I liked YAML the best but found it a bit complicated to get started with, but it looks like one of those frameworks where once you put a bit of effort in at the start you’ll have an amazingly solid system to work with from then on.

    Am going to give 960 another look, and also SenCS.

  • GeniologySpark

    960.gs is my frameworks of choice. I design by it and live by it..jajaja

  • http://www.neatothemes.com Neato

    960.gs is definitely my fav, but recently I have been dabbling with others.

  • http://3circlestudio.com/ Justin Carroll

    Although I appreciate the repository I’m weary of frameworks. All clients are unique and so goes all design solutions. I think it’s dangerous to rely on these frameworks as a foundation. That said, I greatly respect Nathan Smith and look forward to learning more about what he’s done with the 960.gs.

  • Pingback: This Weeks Twitter Design News Roundup N.28 - Speckyboy Design Magazine()

  • Pingback: This Weeks Twitter Design News Roundup N.28 | Web Development News()

  • Pingback: This Weeks Twitter Design News Roundup N.28 | Yooxe()

  • Pingback: This Weeks Twitter Design News Roundup N.28 « Vieclamdn.com Blogs()

  • Pingback: This Weeks Twitter Design News Roundup N.28 | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!()

  • GeniologySpark

    Hey Justin Carroll

    All clients are different, and should be treated differently. I don’t anyones said that you HAVE to rely on these frameworks…they’re just a “guide” to what you CAN use to design a site..nothing set in stone my friend ;)

  • Pingback: How to Choose Right CSS Frameworks « Web Page Authority Blog()

  • http://tylerherman.com Tyler Herman

    Made one site with 960, can’t see using it or any other system again. Each design should be different, and it isn’t like frameworks save that much time.

    I did adapt a few things from 960 into my own code (making classes for no margin/padding left/right) aside from that they don’t save enough time and keep you designing the same size sites over and over.

    I suggest using one once, taking what you like from it and adapting it to your own work, that is as far as they are useful.

  • James

    I like this one because it lets you do pretty much whatever you want:


    I’m not sure about the name though ;)

  • Daniel B.

    Tyler Herman –

    I just checked out your portfolio and while I don’t know if its current, every single piece of work you list is textbook-suited for design-by-grid. I really don’t see where your design style benefits from anything “original” by way of css classes, unless you’re hell bent on reinventing the wheel.

  • http://www.bloginity.com Bloginity

    Thanks for the list, nice frameworks.

  • john

    As of this content I saw outstanding css framework design and you give best ideas how to select best css frameworks. This explanation of content with eye-catching picture is extraordinary gift who awareness to select right framework.
    web designing company