CSS Frameworks are very important tools in web design to create web interfaces neatly and easily. They are one of the tools which cut down and make web designing faster. These tools have pre made CSS classes which can be used for making columns in the designing process. Most of them are free and lightweight. Some popular CSS frameworks are 960 CSS Framework, Blueprint CSS Framework, The jQuery UI CSS Framework etc. Below is the list of most popular lightweight CSS Frameworks.

The 1140px CSS Grid System/Framework

The recently released 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).


The Square Grid

The Square Grid is a simple CSS framework based on 35 equal-width columns. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2, with the total width of the grid is 994px – which the majority of modern monitors will support.
The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block.


Less Framework 3

The Less Framework 3 has been built so that you design your default layout as normal, and then all additional layouts using inline media queries. Any browsers that are incompatible with media queries will ignore all of the additional layouts, and will only use the default. The additional layouts will inherit any styles given to the default layout, so coding them is a very easy.
All four of the layouts (3, 5, 8 and 13 columns) 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 24px.


EZ-CSS

EZ-CSS is a light and easy to use framework with which you are not bound to a traditional grid and allows for columns and gutters of any width.
The idea behind EZ-CSS is to force the final “columns” in the flow to become a block formatting context. Doing so creates a fluid container that is both aware of surrounding floats and will contain a float at the same time. Actually, each EZ-CSS container is a block formatting context, the difference being that the final column is width-less. This lack of width prevents rounding issues (e.g., 1/3, 1/3, 1/3) or rounding errors (e.g. 1/2, 1/2 in Internet Explorer lt 7). As a bonus, vertical margins should behave the same in all containers (it will not collapse at the top or bottom of the box).
There is also a version for rapid prototyping, which you can learn more about here: EZ-CSS: Markup for Rapid Prototyping.


iWebKit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible web site or webapp. The kit is accessible to anyone (even people without any HTML knowledge) and is simple to understand thanks to the included docs and tutorials.
iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable. It is simple HTML that anyone can edit contrary to some other very complicated solutions based on ajax. Simplicity is the key!


Elastic CSS Framework

The Elastic CSS Framework is a simple CSS frameworks, based on the printed layout techniques of 4 columns but with the capability to offer unlimited column combinations. and capacity to make elastic, fixed or liquid layouts easily.


Baseline

Baseline makes it very 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. Baseline has been developed to be a quick way to prototype a website and grew up to become a full typographic framework for the web using a “real” baseline grid as its foundation.

Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines —H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.

Subscribe for updates

Get updates on the WordPress plugins, tips and tricks to enhance your WordPress experience. No spam. View newsletter