Definitive List of CSS Frameworks – Pick Your Style

CSS is backbone of modern web design; the amount of time a web designer spends working on CSS seems to be increasing with passage of time. This dependence on CSS will continue to increase with advancement in web browser technology. This is why we have seen emergence of several CSS frameworks in recent years.

A CSS Framework is meant to provide ready-made solutions for various tasks that we perform on regular basis. In simple terms an ideal CSS framework will provide you with a default style sheet which you should be able to use as a starting point for most of your web design projects.

Why Use CSS Framework?

Keep in mind that you don’t have to use a CSS framework just for the sake of using a CSS framework. Primary reason for using a framework should always be rapid development, but there are additional benefits such as normalization of code, standard compliance and cross-browser compatibility.

Disadvantages

Unfortunately CSS Frameworks also offer several disadvantages that you need to be aware of. It is important to note that these disadvantages vary with different frameworks and your individual skills & preferences. Here are some disadvantages of using a third party CSS framework:

  • Your design will be dependent on the framework
  • Significant amount of time & effort required to learn the framework
  • You may inherit bugs created by someone else
  • A framework may contain unnecessary code that you will never use

Types of CSS Frameworks

Due to the disadvantages mentioned above; use of third party CSS framework is a very controversial topic in the design community. This has also resulted in emergence of various types of CSS frameworks. Without trying to be too bold and creating too many definitions for each type of these various frameworks, we will divide them into two types: Complete Frameworks and Limited Frameworks.

  • Complete CSS Framework
    This type of framework attempts to cover most of the things a developer may need. In order to list frameworks in this category, we created a simple rule that they must include CSS for layout and reset(or some sort of base).
  • Limited CSS Framework
    As the name suggest this type of framework only covers limited needs or have specific purpose. Some of the frameworks we list under this category may be work in progress towards a Complete CSS Framework.

In addition to the above two, the third option is to build your own CSS framework. This is preferred by good number of developers because it provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution. If you are interested in developing your own CSS framework you may want to check Guidelines for Developing Your Own CSS Framework published on W3Avenue.

Complete CSS Frameworks

  • Blueprint
    Blue print is one of the most popular CSS frameworks, it supports grid based layouts and includes: CSS for reset, typography, forms and print. In addition it also supports plugins for buttons, tabs and sprites.
  • Yet Another Multicolumn Layout (YAML)
    YAML supports floated layouts and includes: CSS for base, print, content, navigation, forms and IE hacks.
  • YUI Grids CSS Foundation
    This is part of Yahoo’s YUI Library; 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 YUI CSS Foundation also includes: CSS for reset, base and fonts.
  • 960 Grid System
    960 Grid System supports grid based layout and includes: CSS for reset and base of text styles. It allows you to create layouts with 960 pixel width and you can divide your layout into 12 or 16 columns.
  • BlueTrip
    BlueTrip CSS Framework supports 24 column grid layouts and includes: CSS for print, IE specific code, basic styles for typography and forms.
  • Emastics
    Emastic is a lightweight CSS framework offering 3 different grid systems, support for fluid columns, semantic css, baseline typography not to mention everything is based on “em” for better usability.
  • OOCSS – Object Oriented CSS Framework
    OOCSS is work-in-progress, with Object Oriented approach to writing CSS. It offers grid layout based on %age rather than pixels, and focuses on separating structure from skin and separating container from content. It is built on top of reset and fonts from the YUI CSS libraries.
  • Elastic CSS Framework
    Elastic is based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. Includes: CSS for reset, base, print, fonts and grids.
  • The Golden Grid
    The Golden Grid is a lightweight CSS framework with support for 6 or 12 column grid layouts and includes: CSS for reset and basic typography.
  • Baseline
    Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.
  • Fluid Grid System
    The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework. It is based on a six column grid and a total of 720 different combinations can be achieved.
  • Sparkl
    A modular CSS framework, includes CSS for: Reset, Advanced Layout, Grid Layout, Typography, Tabs, Vertical Tabs, Image Replacement, Links, Tables, Images and Code.
  • Atatonic CSS Framework
    CSS framework with a focus on solid typography and a stable grid. It also includes: CSS for print, IE specific code and forms.
  • Lovely CSS
    Based on a simple 960px wide grid system, Lovely CSS Framework features multiple column layouts, and various pluggable add-ons.
  • 52Framework
    Combination of JavaScript, CSS and HTML to enable current browser use HTML5 and CSS3.
  • Markercss
    Markercss is a simple CSS framework that enable developers to style pages so that properties of a specific element can be easily understood by just looking at the various classes applied to it. Its objective is to let you write code like traditional markup.

Limited CSS Frameworks

  • Tripoli
    Triploi’s primary purpose is to reset and rebuild browser standards forming a stable, cross-browser rendering foundation for your web projects. However plugins are available that provide CSS for layout and adds several visual details such as link colors, borders, form controls etc.
  • SenCSS – Sensible Standards CSS Framework
    SenCSS CSS leaves task of layout development to you; It provides a vertical rhythm for all elements (18px baseline), sets a common typographic standard across browsers, has fonts specified for Windows, Mac and Linux.
  • The 1Kb CSS Grid
    Lightweight framework which supports grid based layouts.
  • jQuery UI CSS Framework
    Designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller.
  • Elements
    Elements CSS framework is a simple framework which requires you to use a certain folder hierarchy in your project. It mainly provides CSS for reset, lightbox and external links.
  • CSS Drop-Down Menu Framework
    A cross-browser, modular framework for designing drop-down-menus.
  • Hartija – CSS Print Framework
    As the name suggest Harjita contains CSS for web page printing
  • Formy – CSS Form Framework
    Include CSS for forms and contains reset, structure and color palette. Formy is build to help you mange web forms in more natural way. No lists no tables just CSS and br for the structure of HTML

Other CSS Frameworks

Here is a list of CSS frameworks which are either in development stage, experimental, insufficient documentation or abandoned:

Meta Frameworks / Extensions

  • Compass
    Compass is a CSS Meta-Framework that provides ports of popular CSS frameworks to Sass and ready to use in your ruby-based web application or stand-alone via a simple command-line interface.
  • CSScaffold
    CSScaffold is a CSS framework written in PHP. Unlike pure CSS framework that uses the standard abilities of CSS, it uses PHP to extend CSS. The syntax looks and feels exactly like CSS, except that you have additional features.
  • LESS CSS Framework
    LESS (Leaner CSS) is a CSS Framework that provides an alternative for SAAS. It extends CSS with variables, mixins, operations and nested rules. As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax.
  • xCSS
    xCSS is PHP based CSS framework that allows you to work object-oriented and keeps your workflow as “DRY” as possible. xCSS is lightweight and seamlessly integrates into any existing workflow; key features include using variables, nesting child objects, extending objects and comments.

Selecting CSS Framework For Yourself

Don’t form your opinion only by counting number of praises for a certain framework. You must select one which you can easily understand and modify. Being able to simply use a CSS framework is not enough. If you are selecting a CSS framework for a long haul, you must test it in the most complex project you can get your hands on. This will truly reveal any flaws or strength a framework may have. There is nothing worse than using a framework for a long time and then finding you don’t have complete control over it, specially when you are in the middle of critical project.

It is absolutely necessary to have complete understanding of what’s going on in your CSS framework. This is the only way to reap maximum benefit from a CSS framework. If you don’t want to invest time learning third party framework, then you should consider developing your own (Guidelines for Developing Your Own CSS Framework).

If you like this post, you may also want to look at:

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

22 Responses to “Definitive List of CSS Frameworks – Pick Your Style”
  1. First thank you for mention all my 5 frameworks(Emastic,Malo,Hartija,Formy,The Golden Grid)
    Emastic is probably my favorite project it’s not (experimental or abandoned) maybe I should probably write some extra stuff and examples.

    Emastic is very small but with many many options there are 3 different grid systems inside (usually one CSS Framework include one grid system), also support fluid columns, semantic css, baseline typography not to mention everything is based on ems for major usability.

    I must admit that I’m NOT doing great job promoting it.

    I will appreciate if you could put Emastic inside your “Complete CSS Frameworks” list. In My Humble Opinion Emastic is probably the most complete css framework.

    • Khan says:

      First of all thank you for all your contributions towards the community. I apologize for the mistake; Emastic certainly falls under “Complete CSS Framework” category and correction has been made.

      It will be really great if you could create a page containing comparison of all your frameworks; this will be really helpful for users in deciding which one to pick.

  2. carbon8 says:

    Compass deserves a mention, despite it being a Sass-based meta-framework rather than a straight CSS framework: http://wiki.github.com/chriseppstein/compass

    • Khan says:

      Thanks for sharing. It has been added into list of “Limited Frameworks”.

      Note: This is only because it has a specific purpose and is primarily meant for Ruby, although as per our definition it is a “Complete Framework”

      • Compass comes with a command line tool that frees Sass from its ruby dependency. So it is not limited to just ruby (although it has tighter integration with ruby apps).

        But it’s also not really a css framework in the common definition of the phrase. It’s a more of a framework in the classical definition. That’s why I call it a meta-framework.

      • Andrew Vit says:

        Compass and Sass have been developed in ruby, but that doesn’t make the tools exclusively ruby-specific.

      • I’ll just mention as well, Compass is hardly Ruby-specific; it can be used anywhere.

      • W3Avenue Team says:

        @Chris @Andrew @Nathan

        Thanks for your feedback, “Compass” has been moved unders “Meta Frameworks” to eliminate any confusion. It was originally placed under “Limited Frameworks” only to separate it from typical CSS frameworks.

  3. Jason Palmer says:

    I’ve personally had a great amount of success using the Blueprint CSS framework. I must admit I’ve never tried the others, but it’s simply been because I have no need to since Blueprint has worked out so well.

    The learning curve is about 15 minutes.

    And the great thing about it, is using their compress.rb script and the ajoining YAML file, I can safely keep customized grids for each of my projects so that is astounding.

    Just my two cents.

  4. charlie says:

    OOCSS ( http://wiki.github.com/stubbornella/oocss ) is looking nice as well.

  5. Smith says:

    Yes OOCSS is really promising !

  6. how about Elastic CSS Framework, its a full stack framework, with helpers, freestyle framework with no forcing to use grid systems, and works to layout widgets, completely unobtrusive, and with declarative syntax language like…

  7. Jesse says:

    BTW, BlueTrip combines Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, (modified description from the website). I’ve been playing with it as a foundation for a possible redesign for a large-scale higher ed website (3K+ pages). What I’ve found nice is that a framework normalizes browser quirks, so you spend less time scratching your head and more time developing. Just my 2 cents.

  8. Angie Bowen says:

    This is a great resources, thanks so much for putting it together. Bookmarked!

  9. Russell says:

    I was previously linking through to the wikipedia page which listed most of the CSS Frameworks but that page seems to have been deleted. I found your site from the wikipedia page on CSS Frameworks and will link to you instead from my blog post http://rdjs.co.uk/web/Proper-Web-Developers-dont-need-a-framework-for-CSS/3

    Great work on compiling this list. Very useful resource. I was initially very sceptical about CSS Frameworks but have used bluetrip for a few months now and definitely believe they are the right choice in some situations.

  10. Great resource. Thanks for sharing. I’ve been using 960 grid system and Blueprint for awhile, but look forward to checking out some of these other options.

  11. I’ve used YUI Grid a few times and while it does work I’ve always felt at the end of my designing (which is my fault) it has ended up very boxy. I’m interested in frameworks for css, so I’ll take a look at the rest.

  12. serzhiio says:

    This article helped me very much, thank you!

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links