15 Responsive CSS Frameworks Worth Considering

Taking the next step of our responsive layout coverage (we recently published the articles Responsive WordPress Themes and jQuery Plugins to help with Responsive Layouts), today we are taking a look at responsive CSS frameworks that we feel are worth your consideration.

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, as you would expect. But, on top of that, they also come with a responsive layout helping you to quickly and easily create mobile-specific sites.

Less Framework 4

Less Framework 4
The Less Framework contains 4 adaptive layouts and 3 sets of typography presets, all based on a single grid, composed of 68 px columns with 24 px gutters. The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code seve­ral child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do.
Less Framework 4GitHub

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.
Foundation lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites – the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.
Foundation HomeGitHubDocs

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. One CSS file imports the framework files and a custom stylesheet for the design of your site. It utilises the @media property to allow you to design your sites for browsers of all sizes.
MQFramework Home

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. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.
It comes with folding columns, elastic gutters, a zoomable baseline grid, and the Golden Gridlet a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.
Golden Grid System HomeGitHub

Fluid Baseline Grid

Fluid Baseline Grid
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.
It is packed with CSS normalization, beautiful typographic standards, corrected bugs and common browser inconsistencies.
Fluid Baseline Grid HomeGitHub

Columnal

Columnal
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 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.
Columnal Home

The Semantic Grid System

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

The 1140px CSS Grid System

The 1140px CSS Grid System
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.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).
The 1140px CSS Grid System Home

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).
Skeleton HomeGitHub

320 and Up

320 and Up
320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. It starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.
320 and Up HomeGitHub

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.
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.
The Goldilocks Approach HomeGitHub

inuit.css

inuit.css
inuit.css is a lightweight, responsive and constantly updated CSS framework which gives you a pragmatic and feature-rich starting point for all your projects. It is crammed full of useful snippets and has additional plugins to extend its usefulness further.
inuit.css HomeGitHub

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.
There are 10 columns in BluCSS, and each has a width specified in percentages. Because of this, they resize automatically to fit into their parent container. In this way, you aren't restricted to just using the built-in "container" div. You can create smaller containers, and use BluCSS inside them with no changes whatsoever.
BluCSS Home

Frameless

Frameless
Frameless HomeGitHub

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

Amazium

Amazium
Amazium Home

(639 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter, Facebook or Google+.

Comments

  • Cherif BOUCHELAGHEM

    Great collection, yesterday I started testing Less Framework but Golden Grid and Frameless are from the same developer so I am confused, and for Frameless he said “is a new fixed-width adaptive grid and the successor to Less Framework.”. I wish i have time to test all those to find who really fit for me I want to use normalize.css instead of eric meyer reset to use Html5BP eventually.
    Thanks

  • Blueprint Framework is missing, don’t know why..:-)

  • Nice collections, my fav is 
     Semantic Grid System

  • Iani

    Great roundup! Do you have a personal favourite from these ones? I have worked with Less and Skeleton but I will try to test as many as I can…

  • Idevgames

    So which one is best? :)

  • Hey, I’d really like to know which one’s the most easy to start with. I’ve tried amazium and it’s Ok, but don’t have time to try out all of these. Any suggests? Excellent article, thanks.

  • Hernan S. Godoy

    muy bueno… justo lo que estaba buscando!! gracias!

  • wattscreative

    Just started looking into and am excited about the Foundation framework from Zurb!

  • The blueprint and 960 Grid are missing. Great list though.

  • Lesparte

    Wow, I was documenting myself about responsive frameworks and you come with this post. Thanks!

    By the way, any advice for making a 960.gs site responsive?

    Thanks!

  • great resource, thanks

  • Responsive web design has become extremely important lately, since our content is published across many different platforms. It is important to consider how your content will reflow, so that you can plan accordingly. Frameworks like these are great starting points for creating responsive layouts, while not having to reinvent the wheel each time.

  • anybody tried any of the framework  mentioned above ? if yes please suggest which one is better to start with

  • I found nothing with animated stylesheet. All are simple and clean sheets. Hope the pure white frameworks always rocks. Thanks for sharing the great resource.

  • jordanmoore85

    They are not responsive frameworks

  • jordanmoore85

    It is not a responsive framework.

  • I’ve only used Less Framework 4 which is very good. I might have to try a few others. Thanks for the list :)

  • Scott

    I plan on using 320 and Up. The reasons: 1. It works in conjunction with HTML5 Boilerplate. 2. Andy Clarke knows his stuff . . . :)

  • apfwebs

    The iPad is mightier than the app. None of the above seems to master the iPad’s habit of zooming on device rotation. I note that if I re-orient, over and over, from portrait to landscape, none of the above seems to keep up. At some time or another, on landscape (where Apple likes to zoom instead of re-rendering)…we end up with a horizontal scroll on all of the above. I’ve been messing with this on all my websites. It’s frustrating as all getout.

  • Edgeui

    If you like the 960.gs I would look at MQFramework

  • Prodyot

    Great collection.
    Thanks.

  • Richard Carter

    How many of these frameworks are WordPress Codex compliant?

  • Mike

    You only have to change the ViewpostTag to get it working on Ipad. I noticed also that alot of these responsive templates are not checked on the Ipad. most probarly these developers work on PC and Galaxy Tabs :)

  • Binoy

    bootstrap is missing

  • MauriceGriffin

    I’ve been loving that one myself, highly recommend it. Will have to learn LESS style CSS but that is also totally worth it and very backwards-compatible with regular CSS.

  • leonardteo

    Bootstrap wasn’t responsive until version 2, which came after the article was posted

  • steadweb

    I find Skeleton to the the easiest. Good selection though, thanks for posting. 

  • Kashif

    any update to this article with all the new frameworks that popped up since you published it?

  • Great collection, but there is no satisfaction like building your own framework to use!

  • Solid collection of resources. The one not on the list I really like is YAML.

  • Guest

    Can someone please explain to me this approach? This was done in a using the LESS framework file. How is the author achieving the desired media queries to trigger?

    .responsive (@scale: 1) {

    /*Responsive code goes here*/
    .logo {
            padding: 44px * @scale 0 33px * @scale;

            img {
                width: 580px * @scale;
                height: 90px * @scale;
            }
        }
    }

    .responsive;

    @media screen and (min-width: 480px) and (max-width: 639px) {
        .responsive(0.75);
    }

    @media screen and (min-width: 320px) and (max-width: 479px) {
        .responsive(0.5);
    }

    @media screen and (max-width: 319px) {
        .responsive(0.25);
    }

  • Itjobcoder

    Excellent work!! 

  • very nice article. just started leaning more on responsive design but choosing a framework is still a bit confusing. i’ve already used inuit.css and 1140px. 

  • Ms Schulke

    I’ve used the 1140 Gird and it doesn’t seem to work well in Internet Explorer

  • Marco Duran

    if you build it then it is not a framework :( unless you release it for others to take advantage of it, so post yours

  • Zurb rocks.

  • Bourbon Neat is worth mentioning.
    Bourbon Neat to SASS is like LESS Framework to LESS. (well… almost)

  • It really comes down to two – Twitter Bootstrap and Zurb Foundation.
    Bootstrap
    Pros:
    1) Most popular, therefore has the most templates and better support with 3rd party software.
    2) Largely pre-styled. Once you learn Bootstrap, you can make themes extremely quick.
    Cons:
    1) Not ideal at responsiveness (v3 is somewhat ok).
    2) Since Bootstrap pre-styles so many elements, all themes tend to look alike.
    Foundation
    Pros:
    1) Second most popular.
    2) Majority consider it to be the best responsive framework to date.
    3) Lightly pre-styled. It makes theming quick, while giving way for creativity.
    Cons:
    None major.
    Probably sounds like I’m biased… maybe so, but I’ve used both in the past and although miss the amount of public support, tutorials & templates available for Bootstrap, I haven’t looked back since trying Foundation.

  • asus3000

    Love Skeleton. Works well. Using it with ASP.