10 Useful Responsive CSS Frameworks For Designers

For the past few days, I have showed you some of the best WordPress responsive themes you can download and use on your site. Today, I am going to provide a range of useful responsive CSS frameworks which can make your task quick and easy. These frameworks have all the complicated grids, layouts and media queries in place ready for you to add your own design and markup. Here’s a roundup of the most popular frameworks currently being used by designers.

Skeleton

Skeleton is one of the more lightweight Responsive CSS frameworks that’s based on a simple grid system. The Skeleton grid elegantly scales from 960px right down to tablets and mobile viewports in landscape and portrait.

Example

 

Responsive Grid System

The Responsive Grid System is a quick, easy & flexible way to create a responsive web site.

Example

 

Foundation

Foundation is made by ZURB, a product design company in Campbell, California. It is an advanced responsive front end framework based on a flexible grid that can be customized to your exact needs. This makes it easy to develop layouts for mobile and desktop devices using the same markup.

Example

 

Bootstrap

Bootstrap is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions that uses some of the latest techniques that gives you stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a lightweight framework.

Example

 

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.

Example

 

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.

Example

 

Lessframework

Less Framework is a CSS grid system for designing adaptive websites.  It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Example

 

CSS Grid

This one is a pretty standard grid system without anything fancy. It starts with a 12 column fluid grid that uses percentage-based gutters and works great on 1,280 and 1,140px monitors. As the view port gets smaller, a couple of simple media queries are used to re-flow the content.

Example

 

Framelessgrid

Frame less grid is a cross-device CSS grid system using media queries. Less+ empowers designers and developers to build websites that can adapt their content depending on screen resolution.

Example

 

Wirefy

Wirefy is a collection of CSS & JS files to help you experiment with responsive wireframes. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. It is style agnostic so that clients don’t get hung up on colors, fonts, other design elements.

Example

 

Gumby Framework

Gumby Framework is simple and lightweight, and unlike some of the more daunting frameworks, it actually comes with a PSD and UI Kit which makes it easy to mock up your designs the traditional way.

Example

About the Author: Laeeq

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

More posts like this

3 Comments + Add Comment

  • Susy and Inuit CSS are forgotten in this top 10

  • Heya i’m for the first time here. I came across this board and I in finding It truly helpful & it helped me out much. I am hoping to present something again and help others like you helped me.

  • Hello. remarkable job. I did not anticipate this. This is a impressive story. Thanks!

Leave a comment

(You can, of course, unsubscribe at anytime).