Collection of Responsive Web Design Frameworks

On 20 Jul, 2012 By With 2 Comments

Responsive Web Design is getting more and more popular these days, most of the themes that are in the themeforest are boasting with responsive feature.

If you are planning to create one for yourself and not sure where to start, you’ll need some frameworks to guide you and save you a lot of time.  First, what is a framework? A good post from prothemer.com explains this;

To help you paint a better picture: plan, base, shell, frame, scheme, skeleton, structure, blueprint and groundwork. All of the synonyms above represent some kind of starting point, head start or foundation upon which to continue building in order to complete what is needed. You may also get the feeling that most of the words indicate that a lot of the work is already complete, especially the important groundwork.

According to AlistApart;

The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around. Generally speaking, this is the approach taken by the aforementioned JavaScript and web application frameworks.

Basically it will save you a lot of time in the process, now here is the list of collection that I found when I am searching for responsive frameworks, hope one of these bad boys can help you in your future projects 🙂

Mobile Boilerplate

responsive01 Collection of Responsive Web Design Frameworks

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Skeleton

responsive02 Collection of Responsive Web Design Frameworks

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

*I’ve used Skeleton for a couple of projects before and it is really easy.

Hardboiled CSS3 Media Queries

responsive03 Collection of Responsive Web Design Frameworks

These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.

tiny fluid grid

responsive04 Collection of Responsive Web Design Frameworks

The happy & awesome way to build fluid grid based websites.

FluidGrids

responsive05 Collection of Responsive Web Design Frameworks

A CSS framework for rapid interactive prototyping.

Less Framework

responsive06 Collection of Responsive Web Design Frameworks

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.

 

CSS Grid

responsive07 Collection of Responsive Web Design Frameworks

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

inuit.css

responsive08 Collection of Responsive Web Design Frameworks

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

flurid

responsive09 Collection of Responsive Web Design Frameworks

A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Fluid Grid

responsive10 Collection of Responsive Web Design Frameworks

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.

320 and Up

responsive11 Collection of Responsive Web Design Frameworks

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

Foundation

foundation.zurb .com  Collection of Responsive Web Design Frameworks

Foundation is a a 12-column, future-friendly responsive grid framework that 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.

MQFramework

resp framework 03 Collection of Responsive Web Design Frameworks

The responsive MQFramework, based on a 12 column grid, has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code. One CSS file imports the framework files and a custom stylesheet for the design of your site.

Golden Grid System

resp framework 04 Collection of Responsive Web Design Frameworks

The Golden Grid System is a folding grid system for responsive design. It 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.

Fluid Baseline Grid

resp framework 05 Collection of Responsive Web Design Frameworks

 

The Fluid Baseline Grid system was built with typographic standards in mind and combines the key principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.

Columnal

resp framework 06 Collection of Responsive Web Design Frameworks

Columnal, a 1140px wide grid system, has been inspired by the cssgrid.net and 960.gs. It makes web design easier by making your grids fluid, dynamically changing based on the browser size and switching to a mobile-style layout if the width is small enough.

The Semantic Grid System

resp framework 07 Collection of Responsive Web Design Frameworks

The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages without any ugly .grid_x classes in your markup.

The Goldilocks Approach

resp framework 11 Collection of Responsive Web Design Frameworks

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 is a minimal framework that includes well commented CSS files that consider 3 CSS Media Query increments (multi column, narrow column and single column) and an HTML boilerplate file to get you started.

Frameless

resp framework 14 Collection of Responsive Web Design Frameworks

BluCSS is a lightweight CSS framework designed with ease of use and simplicity in mind. It is also extremely responsive with four distinct stages: Desktop screen, laptop, tablet, and mobile.

Gridless

resp framework 15 Collection of Responsive Web Design Frameworks

Gridless is an HTML5 and CSS3 boilerplate for making future-proof responsive websites. You can easily create responsive, cross-browser websites with beautiful typography. It is simple and straightforward and doesn’t come with any predefined grid systems or non-semantic classes.

Responsive Grid System

www.responsivegridsystem.com  Collection of Responsive Web Design Frameworks

It’s a quick, easy & flexible way to create a responsive web site.

These frameworks are here to help so why not use them, after all you might learn a thing or two about this frameworks and you can add them to your arsenal of development 🙂

I’ve used a couple of them and trying to learn a few more, and I’d say they definitely helped me save a lot of time coding. If you created your own and want to add to the list, give me a shout on the comments below.

2 Responses to “Collection of Responsive Web Design Frameworks”