15 CSS Frameworks for Responsive Web Design

    written by Nikola Lazarevic

    Responsive design is cool thing to do, and for good reason — it means one site to maintain for all devices. It’s also a really challenging approach to web design.
    In this article, we look at frameworks that will help you handle the challenge.

    Just like most CSS frameworks, all of the frameworks below will help you rapidly develop sites by eliminating the need to write basic CSS styles yourself, and they also come with a responsive layout helping you to quickly and easily create mobile-specific sites.

    Foundation

    Foundation
    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.

    Less Framework 4

    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.

    Golden Grid System

    Golden Grid System
    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. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones.

    Amazium

    Amazium
    Amazium is a responsive framework based on a 960 grid system with 12 columns.

    MQFramework

    MQFramework
    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.

    Semantic Grid System

    Semantic Grid System
    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.

    Skeleton

    Skeleton
    Skeleton is a small collection of CSS & JS files that has a lightweight 960 grid as its base that seemlessly scales down to downsized browser windows, tablets, mobile phones (in both landscape and portrait).

    1140px CSS Grid

    1140px CSS Grid
    The 1140px CSS Grid has been designed to fit perfectly with a 1280px screen, becoming fluid for smaller screens, beyond a certain point it uses media queries to serve up a mobile version.

    320 and up

    320 and up
    320 and up contains Media Query increments for five viewport sizes, a vertical grid, preset styles for typography and components from HTML5 Boilerplate.

    The Goldilocks Approach

    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.

    inuit.css

    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.

    BluCSS

    BluCSS
    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

    Gridless
    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.

    Columnal

    Columnal
    Columnal, a 1140px wide grid system, has been inspired by the cssgrid.net and 960.gs. The grid is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.

    Fluid Baseline Grid

    Fluid Baseline Grid
    The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease. The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.

     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

8 Comments
ADD COMMENT
  • Clipping Path says:

    April 3, 2012

    Fantastic and ordinary webdesign. you’ve done really excellent work. I’ll visit your blog again.

  • payda says:

    April 4, 2012

    Amazium is a responsive framework based on a 960 grid system with 12 columns.

    what is thid “920 grid system” ?

  • Lisa says:

    April 4, 2012

    Thanks for the info. I’m trying to learn more about responsive website design.

  • Eugene says:

    April 6, 2012

    You should have included the Twitter Bootstrap Grid system http://twitter.github.com/bootstrap/

  • Sri Ganesh.M says:

    April 7, 2012

    Bookmarked – will try this – earlier used 960.gs :D

  • Elise says:

    April 12, 2012

    Super helpful, thanks!

  • Pablo Massa says:

    April 15, 2012

    Hey! Twitter Twitter Bootstrap is the best and you dind’t included :(