20 Responsive CSS Frameworks and Boilerplates

LIKE & SHARE

Developing and designing responsive websites is one task that every web designer and/or developer should know as it is one of the latest web design trends especially this year, 2013. By the way, check out our previous post regarding everything you need to know about responsive web design if you want to learn more about it.

There are, however, a lot of tools and techniques, e.g. jQuery plugins for building responsive layouts, that will help every creative when creating such website. To add more resources, here’s a collection of very powerful responsive CSS frameworks and boilerplates for fast, intuitive development of responsive websites.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Microsoft PowerPoint Presentation Templates

Foundation: Responsive Front-end Framework

Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.

Foundation: Responsive Front-end Framework
View Source

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development. A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

Bootstrap
View Source

Gumby 960 Grid Responsive CSS Framework

The Grid lets you lay out pages quickly and easily in a natural, logical way. The Gumby Framework’s grid system can be customized and molded to fit your every need — it’s easily adapted to any screen size or application. The possibilities are endless; the results are extraordinary.

Gumby 960 Grid Responsive CSS Framework
View Source

Less+ Framework | Angry Creative

Less+ empowers designers and developers to build websites that can adapt their content depending on screen resolution. This framework is an extension of the Less Framework built by Joni Korpi with the difference that it has extended support for Internet Explorer.

Less+ Framework | Angry Creative
View Source

Responsive Aeon Framework – 12Columns – Grid

Basic responsive grid system based on 12 columns layout called: col1, col2, col3, col4, etc…, with full width of 1104px. Very easy to understand and use. Allready with @mediaqueries.

Responsive Aeon Framework - 12Columns - Grid
View Source

Golden Grid System

Golden Grid System (GGS) 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.

Golden Grid System
View Source

The Semantic Grid System

The Semantic Grid avoids presentational CSS classes in the HTML markup itself. Instead, it uses a parametric LESS mixin (or a SCSS or Stylus mixin, depending on which framework you prefer) to control the layout in the stylesheet where it belongs.

The Semantic Grid System
View Source

Responsive Grid System

Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn’t hard, you’ve just never used responsive.gs.

Responsive Grid System
View Source

The 1140px CSS Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The 1140px CSS Grid System
View Source

Skeleton: Beautiful Boilerplate for Responsive Development

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Skeleton: Beautiful Boilerplate for Responsive Development
View Source

Titan Framework – CSS framework for Responsive Web Designs

If you’ve worked with 960.gs until now, you can work with Titan Framework also. Titan Framework uses the same CSS classes as 960.gs. Also, if you have developed websites with 960.gs, you now can easily switch them to responsive web design in a matter of minutes.

Titan Framework - CSS framework for Responsive Web Designs
View Source

Ingrid – A Fluid CSS Layout System

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts.

Ingrid - A Fluid CSS Layout System
View Source

BluCSS – Responsive CSS Frameworks and Boilerplates

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

BluCSS - Responsive CSS Frameworks and Boilerplates
View Source

Gridless – HTML5 & CSS3 Boilerplate for Responsive Websites

Make future-proof responsive websites with ease. Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Gridless - HTML5 & CSS3 Boilerplate for Responsive Websites
View Source

Columnal – A Responsive CSS Grid System

Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

Columnal - A Responsive CSS Grid System
View Source

Susy – Responsive Grids for Compass

Susy is based on Natalie Downe’s CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, WordPress and more.

Susy – Responsive Grids for Compass
View Source

Wirefy | The Responsive Wireframe Framework

Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions.

Wirefy | The Responsive Wireframe Framework
View Source

Toast – A Simple CSS Framework

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast - A Simple CSS Framework
View Source

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

HTML5 Boilerplate
View Source
2600+ Facebook Covers - Facebook Timeline Covers | GraphicRiver

Written by Manuel Garcia

Manuel Garcia is the founder and the brain behind Designrshub.com, a community that provides High Quality Design Inspirations and Resources. He’s a student from Philippines who loves to write for design community and dedicated in sharing inspirational resources. He fell in love with creative writing when he was 15.

COPYRIGHT © 2013 DESIGNRSHUB | ABOUT | ADVERTISE | CONTACT US | SUBMIT NEWS | WRITE FOR US
Designrshub.com. Created and Designed by Manuel Garcia.
Reproduction without explicit permission is prohibited. All Rights Reserved.