15 New Responsive Web Frameworks

It has been a long time coming, but here is part 4 in in our continuous series of articles that takes a look at the latest and greatest responsive web frameworks. We’re back with another 15 for you to consider.

Looking back at our previous posts and comparing them to the current batch of CSS frameworks, you will notice that as RWD matures the frameworks have become more robust and reliable. And perhaps inspired by the popularity of Bootstrap, Foundation and Gumby, many new frameworks have evolved into all-in-one feature-rich solutions by including many extras, including reusable components and widgets (icons, modals, pagination, breadcrumbs, navigation…).

Of course, not all of the frameworks are jam-packed with features, some just like to give you a solid layout foundation.

Here are the frameworks:

New Responsive CSS Frameworks


Girder CSS responsive web frameworks grid UI kit

Built with Sass, Girder is a minimalistic grid toolkit that builds flexible layouts divided into logical sections. It uses silent classes (placeholders) to structure content in HTML (to keep your markup free of excess presentational classes) and it can scale based on your project's needs as it includes support for complex media queries using the Breakpoint() compass plugin.



Cardinal CSS responsive web frameworks grid UI kit

Cardinal is a small mobile first CSS framework with its focus primarily on responsive web applications. The purpose of Cardinal is to 'make it easier to rapidly prototype, build, scale, and maintain CSS' for responsive web apps. It does omits many aesthetic design decisions that will often drag down larger, more complicated CSS frameworks, leaving the design to you.



Typeplate typography CSS responsive web frameworks grid UI kit

Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.



Gridism CSS framework grid responsive UI kit

Gridism is a simple CSS grid that comes with in-built patterns for responsive design.



Furatto CSS framework grid responsive UI kit

The flat styled Furatto is a front-end framework for rapid web development based on other frameworks, such as Twitter Bootstrap, Foundation…, as a start point.



PocketGrid CSS framework grid responsive UI kit

PocketGrid is a lightweight (0.5kB) pure CSS responsive grid system that allows for an unlimited number of columns and breakpoints. Instead of creating grids with rows and columns, PocketGrid has a more flexible system with blocks and block groups. Block groups are similar to rows, and blocks are similar to columns, allowing for more flexibility than traditional grids.



Fitgrid CSS framework grid responsive UI kit

Designed for rapid prototyping (but also runs well in production environments), .Fitgrd is a solid foundation for designers that don't want to have their pages look like they are "bootstraped". The grid is divided into twelve columns with percentual widths, with each column having a two percent margin on both sides.



Kraken CSS framework grid responsive UI kit

Kraken is a lightweight, mobile-first boilerplate that includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.



Markup CSS framework grid responsive UI kit

Markup is a simple collection of layouts, widgets, UI styles and other components that you can make use of in your projects in order to code rapidly and efficiently.



Topcoat CSS framework grid responsive UI kit

Topcoat is a fully themable and open source CSS framework to help you work with and create web apps with ease.



Cascade CSS framework grid responsive UI kit

Cascade Framework operates by splitting your CSS into seperate files based on features rather than selectors and by implementing a modifier design pattern inspired by SMACCS and OOCSS.



Responsable CSS framework grid responsive UI kit

Responsable is a responsive grid system based on Semantic.gs and powered by LESS.



Ratchet CSS framework grid responsive UI kit

Ratchet lets you prototype mobile apps using simple HTML, CSS and JavaScript components.



Clank CSS framework grid responsive UI kit

Clank is an open source prototyping framework that helps you work with mobile apps.


Responsive Web CSS

Web CSS framework grid responsive UI kit

Responsive Web CSS helps you layout your web pages within minutes. You can specify target devices and resolutions for responsiveness, and then easily download the site skeleton.

Responsive Web CSS

(604 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.


  • Mario Cotom

    Buenisimos los fremwork estan nitidos gracias a quienes tuviero la pacienca y la inteligencia de crearlos

  • Mario Cotom

    felidades a los creadores

  • You also add http://www.getuikit.com/ Is a great and fast framework

  • We have recently published our responsive grid system Emerald – http://lmc-eu.github.io/emerald/ – you might be interested in. It is block-element based (as opposite to floats) and is written with OOCSS methodology using BEM syntax.

    It has some features not present elsewhere – or a combination of individual features from other grid systems (that is why I decided to write it in the first place). I am about to rewrite the docs and make it more introductory and explanatory, still exploring the code will show what is possible to do with it.

  • Hoby Van Hoose

    It’s nice that these are collected but could there be some extra information on how they compare? Which ones are better for certain tasks/sites?

  • I created my own from scratch, now its on github


    take a look