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:
- Designer Toolbox: 30 Open Source CSS Resources
- Getting the Best PHP Framework: Tips and Resources
- 20 JavaScript MVC Frameworks for Rapid Development
- A Useful Collection of JavaScript Application Frameworks
- Creating a CSS3 Web Browser Window Inspired by Chrome
Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
