10 Tools & Frameworks for Responsive Design

Like webfonts, responsive design wasn’t something you heard much about until CSS3 specs started making it into popular browsers. Now, it’s the cool thing to do, and for good reason — it means one site to maintain for all devices. But it’s also a really challenging approach to web design. In this article, we look at 10 tools that’ll help you handle the challenge.

320 and up

Most responsive designs are built with full desktop size in mind and scaled down from there. Andy and Keith Clark, the developers behind 320 and up, believe the opposite approach works best: design for the small screen, and implement the layout working upwards in size. 320 and upcontains Media Query increments for five viewport sizes, a vertical grid, preset styles for typography and components from HTML5 Boilerplate.

inuit.css

inuit.css is a HTML5 framework that uses a grid system that scales down to small screens ‘out of the box’. It’s a minimalist approach, giving you just what you need to get started without unnecessary styles, but it’s extensible and there are a range of handy plugins available for it — such as one that creates breadcrumb trails out of ordered lists.

inuit.css

inuit.css is a HTML5 framework that uses a grid system that scales down to small screens ‘out of the box’. It’s a minimalist approach, giving you just what you need to get started without unnecessary styles, but it’s extensible and there are a range of handy plugins available for it — such as one that creates breadcrumb trails out of ordered lists.

Skeleton

Skeleton is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Skeleton includes some basic styling and typography presets to get you out of the gate quickly. This project is the brainchild of Dave Gamache, formerly of esteemed UX firm ZURB and now on Twitter’s design team.

Less Framework

Less Framework is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide mobile sizes — based on a grid system and including a selection of typography presets. Because Less Framework is one of the most popular options, there’s a range of supporting tools such as a Rails gem, OmniGraffle stencil and Compass plugin built around Less.

BluCSS

BluCSS is a CSS framework that, as usual, uses a flexible grid to facilitate responsive design. One feature that stands out is its responsive images, something many of these frameworks leave out; apply a class to your images and they’ll scale with your design. No need to include multiple files at multiple sizes, though be wary of unnecessary load on mobile devices with this approach.

Mobile Boilerplate

From the developers behind the famous HTML5 Boilerplate comes Mobile Boilerplate, a responsive template that puts the focus on mobile devices, namely those running Android, iOS, Blackberry and Symbian software. Everything from viewport scaling to HTML5 offline caching to home screen icons are ready to go.

Tiny Fluid Grid

If you find all these CSS frameworks to be too much for your needs, Tiny Fluid Grid may be the alternative you’re looking for. Simply tell it how many columns your grid will need, how big you want your gutters and how wide the site will be, and this site will spit out a responsive fluid grid you can use right away.

Golden Grid System

The Golden Grid System is a 16 column grid that uses a folding method inspired by the DIN paper system to collapse down to 8 columns on tablet-size screens and 4 columns on mobile screens, making it work for designs that range from 240 to 2560 pixels wide. The GGS developers say their folding method is superior to others because the gutters are better at staying in proportion with the content, producing less of a squeezed (or sparse, depending on direction) look.

1140 CSS Grid

The 1140 CSS Grid takes the opposite approach of the 320 and up system. This is primarily aimed at people who really want to design for a wider 1280 pixel screen, and are sick of catering to a 1024 pixel baseline. 1140 CSS Grid allows them to do that while fluidly re-arranging to fit on smaller screens all the way down to mobile.

Respond.js

Even before you start working on a responsive design, you may be worried about visitors using browsers that don’t support media queries, the CSS3 feature that responsive sites depend on. With Respond.js, this problem is easily solved; the script makes min-width and max-width work in Internet Explorer 6, 7 and 8, and should work with other browsers lacking support.

Bonus: ZURB Foundation

ZURB’s Foundation is a newer entry among responsive design frameworks, and is one of the most promising, having already won over many users of other frameworks. Billed as an easy-to-use yet powerful framework for building both prototypes and production deployments that work across all kinds of devices, Foundation makes use of a flexible grid, a library of styles and elements for rapid prototyping, and professes to take the pain out of creating layouts for different formats with the same markup.

courtesy :http://speckyboy.com/2012/11/05/10-lightweight-minimal-responsive-grid-frameworks/