10 Free CSS Frameworks

Most computer users till date are using 1024 x 768 screen resolution. Due to this, websites usually are developed with 960 pixels width. If you are a web developer or a designer, the following CSS grid systems will help you to create websites with easy having a structured, grid-based layout system. I have listed here the most popular CSS frameworks that I like. Hope someone will find this post useful.

1. 960 Grid System

The most popular, used by many websites and web designers is the 960 Grid System. This CSS framework allows you to choose the numbers and the width of columns and the margins between each css block. click here for demo.

2. Variable Grid System

This is a very simple to use CSS framework which will help you to generate both fixed and fluid css layouts. This framework is using the 960GS and allows you to preview the layout you want to use.click here for demo

3. FEM CSS Framework

FEM CSS Framework is a 960px width allows to use up to 12 columns grid system and is using common CSS styles, enables to develop layouts fast and easy. This framework is using the common 960GS and it’s compatible with all major web browsers. click here for demo

4. Fluid 960 Grid System

This is a fluid CSS framework, that is using 960 grid system, but has some extra addons such as Mootools and jQuery. These two Javascript libraries will create nice flowing, accordion, roll it and roll out effects which is very used nowadays on many websites. Certainly if you don’t need, you can deactivate javascript. The Fluid 960GS supports 12 and 16 columns. click here for demo

5. 1KB CSS Grid System

The size of this CSS framework is only 1KB, which is very useful if you are building a design for a high traffic website. This framework can save you lot of bandwidth if you are using it. It supports up to 16 columns, different column and gutter widths. click here for demo

6. Formalize – Form Element Styling

You get headache when it comes to style form elements? Different browsers are displaying from elements in different way. This nice CSS framework was designed to make your job easier when you have to use custom styles of form elements. It is compatible with all major web browsers and has a very good documentation. click here for demo

7. Primary CSS

Primary CSS is a simple CSS Framework, developed to make using CSS as easy as possible. Primary comes with 22 CSS layouts which always work with all major web browsers. click here for demo

8. Typogridphy

Typogridphy is a simple CSS framework which is using 960 grid system. Beside 960GS this framework has additional styles for typography; this is perfect for anyone who need a typography ready grid system based layout. click here for demo

9. Tiny Fluid Grid

Tiny Fluid is another great CSS grid system which supports up to 24 columns and the width varies between 800px and 1200px; The framework was inspired by 1KBGrid. click here for demo

10. Less Framework 3

Creating websites to be compatible with iPhone or other smart phones could be difficulty. Less Framework is a good solution to build layouts compatible with all 320px mobiles including all iPhones and iPad Touch. While resizing the browser the grid is also changing accordingly to the width of the web browsers. click here for demo