With the high uptake in responsive design practices come the arrival of next generation CSS framework and boilerplate to transform your website into a responsive creation!

Like most CSS frameworks, all of the frameworks mentioned below will help you rapidly develop sites by eliminating the need to write basic CSS styles yourself whilst giving you the extra functionality for a full responsive grid layout to support mobile sites!


Foundation the "most advanced responsive front-end framework in the world", is a a 12-column grid framework that is flexible, friendly and easily adaptable for rapid development providing you with a variety of styles and elements to help you quickly put together your design. Additionally, Foundation lets you quickly piece together page layouts for mobile devices and the desktop without having to worry about any specifics - the grid layout is built to adapt on all kinds of devices without requiring any change to your markup.

1140px Grid System

The 1140px CSS Grid has been designed to fit on 1280px screen, becoming fluid for smaller screens until a certain point in which it uses media queries to serve up a mobile version. The grid is split into twelve columns, evenly divided by either two, three, four or six. It works with all major browsers (minus IE6, who uses that!).


Skeleton is a lightweight collection of CSS & JS files that offers a 960px grid layout that scales down to smaller screens on, tablets, mobile phones (in both landscape and portrait). It was one of the earliest responsive boilerplates and still renowned for being one of the best. In contrast with other CSS frameworks, Skeleton doesn't provide any CSS classes instead simply providing you with a simple and light responsive solution.

HTML5 Boilerplate

HTML5 Boilerplate is not a framework but instead only a boilerplate, it's important to mention that this is a starting point for any HTML5 project containing features that others don’t have e.g. cross-browser normalisation, performance enhancements and many optional features!

Twitter Bootstrap

Twitter Boostrap contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. Designs are presented and designed similarly to Foundation, in a 12-column grid layout and comes with an extensive catalogue of JavaScript plugins such as dialogs, tooltips, modal windows and many more.

HTML KickStart

HTML KickStart is an ultra-lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart. A well packed all-around framework giving you support for a responsive design and many common UI styles and interactions.

Other Resources:

Make your Instagram beautiful. Preview your images before you post them ›