This article was published 10 years ago, therefore the contents of this post may be out of date.

The aim for Responsive Web Design approach is to craft a website into being able to provide an flawless viewing experience for any end user by providing the content to be a easy reading, an easy use navigation and with a small amount of re-sizing, panning, and scrolling across a wide range of devices.

Being able to start crafting your own responsive website does not have to become an backbreaking venture if only one set themselves up with the right set of tools by using an flexible Grid framework but also be able to utilise responsive images into the design.

So in today’s post you will see a small list of 12 great responsive frameworks that which will enable you to get started within creating your own responsive website.

1. Neat

neat-bourbon

Neat is a semantic grid framework built on top of Sass and Bourbon. The primary objective of this framework is help you to  promote ca lean semantic HTML markup by using Sass mixins to avoid excess presentation classes and extra wrapping of div elements. This framework is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout that you can dream of.

2. .Fitgrid

fitgrd

So first .Fitgrd is not a framework as it is a solid foundation to build up your own responsive website and as it is been designed for rapid prototyping, but also runs well in production environments. Fitgrid grid system is perfect for advanced web designers who doesn’t want to have their pages look like “bootstraped”. Everything but the grid is up to you and gives you the ability to save a lot of dispensable code. Give it a try and you’ll love it.

3. RWDgrid

rwdgrid

To start off with RWDgrid is just another Grid system that been based on the popular 960grid but which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (that increases readabilty). RWDgrid is a different Grid system that was made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens. This can be used as a base grid system that will help you to build responsive web design with your existing proficency over popular grid systems.

4. Cute Grid

cute-grid

Cute grids was made out of the frustration of today’s world of full of large overbuilt frameworks that can be overkill for most projects and restrict the creativity of the designer with too many inbuilt design features that can make even the most creative person lazy.

With too many underused features and over bloated code in many frameworks the idea of cute grids is to clean out all the dirty stuff and leave you with a clean base to let you get on with designing your responsive site the way you like. But don’t make the mistake of thinking this is a minimum grid system. This framework has been built with most features that are seen fit to make your grid work the way you need it to. By the way this is just clean CSS, that means No Sass, No Less.

5. Base

base

Base is a simple responsive framework that been developed in Sass/Less which is a powerfull CSS pre-processor that help you write cleaner and more organised structured CSS. This framework be built to be functional on mobile devices, tablets, netbooks and desktop computers It also works with screen readers in mind and has nice no-js fallbacks.

Base has the default basic styles for headings, tables, blockquotes, forms and more. It works best in modern browsers and IE7 and up.

6. Kube

kube

Kube is an advanced and flexible CSS-frameworks as this framework will gives you full power of choice, creativity and beauty, while handling all of the technology behind it. No more boring routine, just concentrate on something big and wonderful, and let Kube provide the rest. Kube works in all modern browsers on desktops and mobile devices: latest Chrome, Firefox, Safari, Opera and IE9+.

7. One% CSS Grid

One%-CSS-Grid

One% CSS Grid is a 12 column fluid CSS grid system and has been designed to be as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearranging your layout for each platform separately, as One% CSS Grid will do all this for you.

The One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens).  One% CSS Grid has 2 starting options, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).

8. Lemonade

lemonade

Lemonade is a a simple, flexible and easy to customise grid system and been created in order to give designers & developers a kickstart with their projects. It currently supports Chrome, Firefox, Safari, Opera & IE 9+, also supports major phone devices too.

9. Pure

pure

Pure is set of small, responsive CSS modules that you can use in every web project, as it is small as the entire set of modules clocks in at 4.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep the file sizes small, and every line of CSS was carefully considered. The Pure framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.

10. 1080 Grid System

1080-grid-system

The 1080 Grid System just expands upon Nathan Smith’s 960 Grid System by simply adding the additional 120 pixels while utilising the same margins. Thus, anyone who has ever used the 960 Grid System to design can easily do so with the 1080 Grid System.

11. Kickoff

kickoff

Kickoff is a lightweight front-end framework for creating scalable, responsive sites that been built by being a mobile first responsive philosophy that has starter content styles, including clean typography, lists, tables,form element styles, etc

12. Sculpt

sculpt

Sculpt is a powerful, flexible and fast tool that been web host company Heart Internet, this framework doesn’t try to do too much for you and you won’t spend time stripping out things you don’t need, which will give you more time to design the site you need and lay it over a lightweight, modular framework.

Share

12 Great Responsive Frameworks To Help You Create Responsive Websites