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.

1. 1140px CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. When presented on smaller monitors it becomes fluid and adapts to the width of the browser. beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. The 1140px grid works on all modern browsers like Chrome, Safari, Firefox, IE7 & IE8 but not IE6(but who really use that these day)

2. Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as IE 9, Android Webkit, and Mobile Safari (all iPhones, iPads and iPod Touches) will use the layout most appropriate to them. Internet Ex­plorer 6–8 and most old mobile devices will only use the Default Layout.

3. Foundation

Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
The Grid lets you lay out pages quickly and logically with a flexible, nestable system. Even better, the Grid can be whatever size you need — it’s easily adapted to any size screens, from phones to TVs.

Foundation grid includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.

4. inuit.css

Most frameworks require that you apply to the last grid in a row in order to remove its margin-right and stop things breaking but not with inuit.css and now inuit.css now has a custom grid system builder for creating fixed or fluid grid system igloos.

5. Columnal

The Columnal CSS grid system is a “remix” of a couple of others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

If the browser gets thin enough, the site will change to a mobile-friendly layout. Try resizing this page to give it a try (Internet Explorer 6-8 will be a fixed width page).

6. Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

7. Amazium

So what is Amazium I hear you ask, well you may have been hearing the term “Responsive Web Design” being thrown around the past few months, which simple means a website that can adjust to your screen size without having to make a separate website! This came about from the simple fact that a lot of people have been making demos of this responsive web design but none seem to be using 960 grid system with 12 columns.

Amazium uses 4 main media queries to adjust the layout of your website to match the size of your screen.

8. MQFramework

MQFramework is built and designed around a 12 column grid. For each of the supported screen sizes MQFramework has adopted a different width of container to house the grid. As for mobile versions, the twelve columns become one stacking up vertically.

9. 320 and Up

The ‘tiny screen first’ boilerplate extension. The 320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

320 and Up contains Five Media Query increments: 480, 600, 768, 992 and 1382px, Vertical grid based on Less Framework 4, Two versions: multiple linked stylesheets, or a single stylesheet with multiple Media Queries , Combined HTML5 Boilerplate and Mobile Boilerplate components  and Typography preset styles

10. Gridless

Gridless is a optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. Gridless takes the boring parts of making websites and webapps out. It comes packed with everything you’re tired of doing in every new project: CSS normalization, beautiful typography, a well-organized folder structure, IE bugfixes and other nice tricks.

11. The Goldilocks Approach

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

It contains

  • 2 well commented CSS files that consider 3 CSS Media Query increments; multi column, narrow column and single column
  • Good typographic defaults out of the box (including print contexts)
  • A boilerplate HTML file to get you started (index.html)
Share

Top 11 CSS Frameworks For Creating Responsive Web Design