CSS Frameworks allow web designer to develop web pages more quickly. We can not always choose a single framework and use it in all our projects. Each project has different characteristics, so we must choose the right tool for each of it. In this post you can find an huge collection of CSS Frameworks for every kind of web site. Some of these framework are very famous (960gs, Blueprint, YUI, etc.) but there are many less known but at the same time very powerful that you have to try.

We have also included a comparison table with the main features of each framework. Read on to choose your next CSS framework.

Comparison Table

Framework	Size	Grids	Reset	Text	Forms	Fixed	Fluid
960gs	23kb	Yes	Yes	Yes	No	Yes	No
Blueprint	15kb	Yes	Yes	Yes	Yes	Yes	No
YUI 2: Grids CSS	25kb	Yes	Yes	Yes	No	Yes	No
BlueTrip	18kb	Yes	Yes	Yes	Yes	Yes	No
Easy	9kb	Yes	Yes	Yes	No	Yes	No
Elastic CSS	7kb	Yes	Yes	Yes	Yes	Yes	Yes
Tripoli	22kb	Yes	Yes	Yes	No	No	Yes
EZ-CSS	2kb	Yes	No	No	No	Yes	No
CleverCSS
LogicCSS	7kb	Yes	Yes	Yes	No	Yes	Yes
SenCSs	5kb	No	Yes	Yes	No	No	No
Emastic	4kb	Yes	Yes	Yes	No	Yes	Yes
Typogridphy	10kb	Yes	Yes	Yes	No	Yes	No
Less Framework	3kb	Yes	Yes	Yes	No	Yes	No
Boilerplate	6kb	No	Yes	Yes	Yes	No	No
Elements	8kb	No	Yes	No	No	Yes	No
Malo	1kb	Yes	Yes	No	No	No	Yes
The 1kb CSS Grid	1kb	Yes	Yes	Yes	No	Yes	No
Content with Style	38kb	No	Yes	Yes	Yes	Yes	No
Fluid Grid System	4kb	Yes	Yes	No	No	No	Yes
WYMstyle	25kb	No	Yes	Yes	Yes	Yes	No
YAML	22kb	Yes	Yes	Yes	Yes	No	Yes
The Golden Grid	2kb	Yes	Yes	No	No	Yes	No
Compass

960gs

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are three variants: 12, 16 and 24 columns, which can be used separately or simultaneously.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

Link: http://960.gs/

Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
Some of its features are:

• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

Link: http://www.blueprintcss.org/

YUI 2: Grids CSS

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. Other features include:

• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Flexible in response to user initiated font-size adjustments.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.
• Offers full A-grade browser support.

Link: http://developer.yahoo.com/yui/grids/

BlueTrip

A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.

Link: http://bluetrip.org/

Easy

Easy is more than a CSS framework designed for building layouts. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don’t have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. With a way of file organization it allow you to easily create your own content blocks. To sum it up Easy includes:

• Solid CSS base in terms of HTML element styles and layout construction
• Built-in interactive functions, extremely easy to use
• Upgradeable HTML content blocks library

Easy is rock-solid, true all-in-one front-end solution that you can easily use as it is or customize to fit your own needs.

Link: http://easyframework.com/

Elastic CSS

Elastic is a simple css framework to layout web-based interfaces, 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.

Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want.

Link: http://elasticss.com/

Tripoli

Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Link: http://devkick.com/lab/tripoli/

EZ-CSS

Ez-css is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width. It works by forcing the final element in the HTML flow to become a block formatting context (It uses “hasLayout” for Internet Explorer lt 8). If this makes no sense to you don’t worry, because using  is an easy 4-step process:

Link: http://www.ez-css.org/

CleverCSS

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.

Link: http://sandbox.pocoo.org/clevercss/

LogicCSS

The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates. Some features are:

• Common cross-browser rendering behavior approach (not a reset).
• Beautiful font stacks.
• Typography with text resizing capabilities and vertical baseline/rhythm.
• Three totally flexible layout grid templates, customizable with the toolset.
  • Elastic layout using EMs.
  • Liquid layout with percentages.
  • Fixed layout using pixel dimensions.

Link: http://code.google.com/p/logicss/

SenCSs

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.

Link: http://sencss.kilianvalkhof.com/

Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. Some of its features are:

• Lightweight (compressed weight less then 4kb)
• Personalized width of the page in (em,px,%)
• Use of fixed and fluid columns in the grid.
• Elastic Layout with “em”s
• Baseline Grid Typography

Link: http://code.google.com/p/emastic/

Typogridphy

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS. It also uses a typographical method know as ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs. This method in itself isn’t that difficult to accomplish — using pixels.

Link: http://csswizardry.com/typogridphy/

Less Framework 3

Less Framework is a cross-device CSS grid system based on using inline media queries.

The idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore all the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.

ll four of the layouts included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets, composed around a baseline grid of 24 px.

Link: http://lessframework.com/

Boilerplate

Boilerplate: noun standardized pieces of text for use as clauses in contracts or as part of a computer program.

Boilerplate is written by one of the original authors of Blueprint CSS. He has decided to re-factor his ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions.

Link: http://code.google.com/p/css-boilerplate/

Elements

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow. It has everything you need to complete your project, which makes you and your clients happy. Some features are:

• Easy to use
• Lightweight
• Collection of preset classes
• Lightbox included
• An awesome mass reset
• Adds style and usablity to external links with icons
• Can be easily uploaded to your website hosting server
• Free of course

Link: http://elements.projectdesigns.org/

Malo

Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.

Malo is based on the principle that every column can be divided into two, three, four and five parts.

• 100% = 50% + 50%
• 100% =~ 33,33% + 33,33% + 33,33%
• 100% = 25% + 25% + 25% + 25%
• 100% = 20% + 20% + 20% + 20% + 20%

Also you can use nested columns

100% = 50% + 50% ( and inside 25% + 25% + 25% + 25%)

Link: http://code.google.com/p/malo/

The 1kb CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Link: http://www.1kbgrid.com/

Content with Style

Content with Style is a quick-start framework with the possibility of breaking down stylesheets into components that could be reused across projects. It provides common names for div elements:

• Header
• Footer
• Main content
• Sub content
• Main nav
• Local nav

and provides 6 different layouts:

• Vertical navigation with one content column
• Vertical navigation with two columns of content
• Horizontal navigation with one content column
• Horizontal navigation with 2 columns of content
• Horizontal navigation with local navigation and one column of content
• Horizontal navigation with local navigation and 2 columns of content

Link: http://www.contentwithstyle.co.uk/content/a-css-framework

Fluid Grid System

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework. The Fluid Grid System is great for rapid prototyping as well as final production layouts because designers can quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm.

Link: http://fluid.newgoldleaf.com/

WYMstyle

WYMstyle is a CSS (Cascading Style Sheet) framework for web designers. It allows to design web sites faster, using robust CSS modules, which are already tested in a large array of web browsers.

Link: http://sourceforge.net/projects/wymstyle/

Yet Another Multicolumn Layout (YAML)

“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.

• Focussed on web standards and accessibility
• Slim framework core with numerous extensions
• Robust, flexible layout concept (columns & grids)
• Design patterns for typography, forms, mircoformats, rtl support ect.
• Complete multilingual documentation

Link: http://www.yaml.de/en/

The Golden Grid

The Golden Grid is the third framework written by Vladimir Carrer. He created first Emastic, then Malo and finally The Golden Grid. He was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous – The Golden Grid. Some features are:

• 970px main width
• 6/12 grid system
• Super lightweight((compressed weight less then 1kb)
• Easy to learn.

Link: http://code.google.com/p/the-golden-grid/

Compass

Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain. Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names. It’s a new way of thinking about stylesheets that must be seen in action!

Link: http://compass-style.org

Comparison Table

comparison table