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 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.
The Responsive Grid System is a quick, easy & flexible way to create a responsive web site.
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.
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.
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.
320 and up contains Media Query increments for five viewport sizes, a vertical grid, preset styles for typography and components from HTML5 Boilerplate.
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.
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.
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.
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.
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.