12 Great Lightweight Responsive Grid Frameworks

Responsive layouts are rapidly moving towards being the standard and as more and more responsive CSS frameworks have been cropping up on the web and with a huge variety of frameworks available that includes every single one of them employing a different grid properties and techniques, it can be sometimes be difficult choice to make when to choose the right one.

You can always choose what I think the four main and popular ones are and these are the 1140 CSS Grid, Less+ Framework, Twitter Bootstrap and Zurb’s Foundation. But you won’t find any of them below today as this post features 12 lightweight frameworks that will quickly help you get going with your next project.

1. RWD Grid

The RWDgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).

RWDgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens. This can be used as a base grid system that will help you to build responsive webdesign with your existing proficiency over popular grid systems.

Top 11 CSS Frameworks For Creating Responsive Web Design

With devices like Smartphones and Tablets and bigger and bigger monitors introduced a concept in web design that has risen up during the late year of 2011 and that is responsive web design.

But what does responsive web design means? Let`s say that you have to build a website for a client and you want to do it based on a standard grid system, for example 960 grid system. And the client also wants versions of the website that fits smartphones such as iPhone and tablets like the iPad. You`re not going to build 3 different websites, instead you`re going to use a responsive grid system which adapts the website for all types of screen resolutions.

It’s all about adapting the dimensions of the website ( font-size, columns, images, etc) to different screen resolutions. The things which make all the magic are the CSS media queries. They’re the ones which tests which resolution the screen has and according to it, are changing the CSS to fit the screen.