Frameworks, Boilerplates And Tools For Responsive Web Design

There have been lots of complaints regarding responsive web designs especially from those web designers who preferred to be really creative and innovative with the website designs that they are used to create and their layouts. In a way, responsive web design has brought web design back to flatness, grids and boxes, but if you think about it well, that’s what web design is about, manipulation of grids and boxes. It’s not like creativity is gone with RWD, it’s still there, but different.

Responsive web design and its techniques are in fact the best way to address the reality of the multi-device web, making use of less so that it can deliver more, the ‘more’ being represented by the actual content, the thing that matters. Even if others won’t admit it, responsive web design is taking us to a better web, one where we are realizing what’s important for the user in a contextual environment.

This outrage against fresh standards isn’t at all a new thing. If you’ve been a web designer for over a decade, you’ve witnessed the criticism that CSS received when it was launched. People are afraid of new, because every time something new comes up, they have to start from scratch.

The only thing I can say to those who want to criticize instead of trying to learn again the basics of something is: adapt or die. Responsive web design will be present on almost all websites in the future and you should prepare for those times.

Now, we are leaving the introductory part behind us and directing our attention to resources which could help us with responsive web design, but remember, just using the tools is not enough, cause it’s not about the tools you use. What is important is how you use them.

Frameworks and boilerplates

The first framework that I used was 960gs which at that time was the most awesome tool I had for coding a website faster. Since then, a lot of frameworks were created and there is a huge list of frameworks that could be used for either fixed, fluid or responsive layouts.

Fixed layouts can be created by almost anyone and the fluid ones are a bit outdated, we will focus our attention to responsive frameworks and also boilerplates. Considering that there are a lot of frameworks, I will only mention a few, and not 100 of them.

Bootstrap

Bootstrap

Foundation 4

Foundation 4

Jetstrap

Jetstrap

Less Framework 4

Less Framework 4

Wirefy

Wirefy

320 and Up

320 and Up

Mobile Boilerplate

Mobile Boilerplate

Frameless

Frameless

sass-responsive

sass-responsive

Gridless

Gridless

Responsive Grid System

Responsive Grid System

Gridset

Gridset

Fluid Baseline Grid System

Fluid Baseline Grid System

Golden Grid System

Golden Grid System

Responsify

Responsify

Columnal

Columnal

Semantic Grid System

Semantic Grid System

1140 CSS grid

1140 CSS grid

Unit Grid System

Unit Grid System

inuit.css

inuit.css

Gumby Framework

Gumby Framework

Singularity

SINGULARITY

Gridpak

Gridpak

Amazium

Amazium

BluCSS

BluCSS

Neat

Neat

Susy

Susy

Bedrock

Bedrock

csswizardry-grids

csswizardry-grids

996 CSS grid system

The 996 CSS grid system

Skeleton

Skeleton

Gridiculous

Gridiculous

The Goldilocks Approach

The Goldilocks Approach

ResponsiveAeon

ResponsiveAeon

Responsive Grid System

Responsive Grid System

Calculators

Most likely you’ve known one or two of these following calculators, but you should check out other similar calculators that may make your work easier.

Pixel to Percent Converter

Pixel to Percent Converter

The Responsive Calculator

The Responsive Calculator

Em Calculator

Em Calculator

PXtoEM

PXtoEM

RatioSTRONG

RatioSTRONG

Other tools and guides

MQtest.io

MQtest.io

enquire.js: Awesome Media Queries in JavaScript

enquire.js: Awesome Media Queries in JavaScript

Respond.js

Respond.js

Responsive JavaScript with minwidth.js and relocate.js

Responsive JavaScript with minwidth.js and relocate.js

onMediaQuery – Responsive Javascript

onMediaQuery - Responsive Javascript

Palm Reader

Palm Reader

Tools for unsupported browsers

“Mobile first” CSS and getting Sass to help with legacy IE

Mobile first CSS and getting Sass to help with legacy IE

A LESS approach to “Mobile First” CSS & supporting older IE browsers

A LESS approach to Mobile First CSS & supporting older IE browsers

SASS IE

SASS IE

Enjoyed this article? Subscribe to read more like it

 
 
 
 
 

Sponsors