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

BlueTrip CSS Framework

YAML

Baseline CSS Framework

Compass Open-Source CSS Framework

Elasticss Framework

Instant Blue Print

Tiny Fluid Grid

1Kb Css Grid

The Square Grid