The World of CSS Frameworks

Published On May 18, 2011
15 Comments Leave a Comment

The world of CSS Frameworks

What exactly is a CSS Framework?

CSS frameworks are just pre-written CSS files which can be applied to your HTML by using the class names defined in the framework. It can be called as a best practice to to define conceptual routine tasks into generic modules that can be reused. For example, all the font syles can be put together in a file called typography.css. Similarly, all the classes related to layout can be put together in another file called layout.css. After modulating the CSS styles, these files can be called within a single CSS file and further integrated into your HTML file.

There are a number of Frameworks you can freely download and use in your projects. To use them, you will need a fair bit of CSS knowledge, some patience and a fair bit of time to get yourself familiar with the layout. The page layout structure is pretty standard across almost all Frameworks. It could be Header -> Main Content -> Sub Content -> Local Nav -> Main Nav -> Footer. The variations on structure goes on and on. If you want, You can make your own structure using the predefined classes in the framework.

Why you should be using CSS frameworks?

The main benefit I think that CSS frameworks have is that they tend to force you to think about how you’re going to organise you code rather than provide you with indispensable tools for your day to day tasks. They are simply a convenience and as such are good for things like wireframing and rapid prototyping. They are probably also a good way to learn CSS layout as well if you can familiarise yourself with the layout code.

CSS Frameworks provide basic, yet a solid foundation of code to further build a website. You also save precious time as you don’t have to write the necessary CSS styles from scratch. Another major advantage of using a framework is that your website can be easily aligned to web standards and is consistent across different browsers.

10 Best CSS Frameworks

Here is a highlight of 10 CSS frameworks that are easy to use and provide the user with good amount of flexibility. It might be difficult to choose one amongst them as every one of them focuses on something different.

960 Grid System

960 Grid CSS Framework

BlueTrip CSS Framework

Bluetrip CSS Framework

YAML

YAML

Baseline CSS Framework

Baseline CSS Framework

Compass Open-Source CSS Framework

Compass Open-Source CSS Framework

Elasticss Framework

Elasticss Framework

Instant Blue Print

Instant Blue Print

Tiny Fluid Grid

Tiny Fluid Grid

1Kb Css Grid

1Kb Css Grid

The Square Grid

The Square Grid

15 replies on “The World of CSS Frameworks”

Joshua A. Price Reply

This articles helps me more. Thanks for your sharing,I will pay more attentions to your blog. Looking forward to your better and better articles.See you next time.

obagi reviews Reply

I disagree with most people here; since I started reading this blog post I couldn’t stop until I was done, while it wasn’t just what I had been trying to find, was still a great read though. I will instantaneously get your blog feed to keep in touch of future updates

Sudheer Ranga Reply

I would go with 960 gird system than others. Using this will be very useful to design a PSD and convert them to HTML and others.

Sinisa Reply

I must admit that I never used frameworks, but I liked 960. It can be used very well, but you need to take some time into it. Good post!

Leave a Reply to SKyper Cancel reply

Your email address will not be published. Required fields are marked *