WordPress Themes Blog Oh! Blog

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



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

  1. Joshua A. Price left a comment on September 4, 2019 at 4:47 am |

    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. our site

  2. afrohousemusic left a comment on June 4, 2019 at 9:30 am |
  3. HGIT left a comment on March 22, 2016 at 7:38 pm |

    Gear-ring gluer (be applicable to full-automatic gluers for many parts)
    Possess proprietary intellectual property rights; have obtained patent for invention (certificate No.: 1400959); the equipment has filled industrial blank.

    Carbon band gluing (plane arc flake workpiece automatic gluer)
    Possess proprietary intellectual property rights; letter of patent No.: 2502278; the equipment has filled industrial blank

  4. John Slegers left a comment on June 19, 2013 at 11:08 am |

    Try Cascade Framework ( http://cascade-framework.com/ ) . It’s a pretty new but already very powerful CSS framework with a tiny footprint.

  5. Prince left a comment on November 21, 2012 at 5:28 am |

    I think Yaml is best among them but what do your think, which one is the best.

  6. obagi reviews left a comment on November 28, 2011 at 12:02 pm |

    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

  7. anvelope iarna left a comment on September 13, 2011 at 2:31 am |

    From those exposed here I like Elasticss Framework

  8. SKyper left a comment on August 17, 2011 at 12:00 pm |

    I really love 1KB CSS than others. hihi

  9. Vijay Sharma left a comment on August 8, 2011 at 3:18 pm |

    I think 960 Grid system is the best among this list. what are your thoughts on this?

    • Sudheer Ranga left a comment on August 9, 2011 at 8:43 am |

      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.

  10. Bloomer left a comment on June 26, 2011 at 8:02 pm |

    Come on man, where the hell are free themes? No more free themes?

  11. Dustin left a comment on June 9, 2011 at 11:05 am |

    Bluetrip has not been updated in almost two years..


  12. ??????? left a comment on June 2, 2011 at 8:32 am |


  13. Sinisa left a comment on May 27, 2011 at 10:34 am |

    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!

  14. SOHO left a comment on May 19, 2011 at 9:14 am |

    That’s senese very well ,I’ll try it.

Leave a Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
Need a Custom Website?

Leave a Feedback

Tell Me About Your Project