Responsive Web Design has become a basic standard of web designing these days. From no where, there are now tens of Responsive frameworks which allow designers and developers to focus on core design of the application than basic boilerplate code for design.

Responsive Web Design

Twitter Bootstrap has become the standard against which all Responsive frameworks are judged, and for a lot of good reasons. At the same time, there are excellent CSS frameworks like Zurb Foundation, LESS Framework etc. which offer features - be it components, code style, architecture, which can be more to one's taste and development preference.

While we prefer Twitter Bootstrap, there are many more basic and advanced Web frameworks you can choose from depending on your need and interest.

Twitter Bootstrap

Twitter Bootstrap CSS Framework

URL: twitter.github.com/bootstrap/

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS3, Javascript, jQuery
  • Compatible with: Firefox- 5,6+, Safari 5+, Chrome 14+, Opera 11+, IE- 7,8,9+
  • Additional Components: Modal, Alert, Button groups, Dropdowns, Badges, Navbar, Tooltips, Labels, Progressbar, Typeahead, Thumbnails, Popovers, Accordion, JS plugins

Quick Summary

  • 12- column grid structure
  • Fixed (comes with an option of responsive design) and Fluid layout pattern
  • Designs pages fit for displays ranging between 480px (or even less) and 1200px (or even more)
  • Nested grids, Offset support
  • Customizable features for typography, colors, navbar, grid and more
  • Based on LESS CSS Pre-processor

Zurb Foundation

Zurb Foundation

URL: foundation.zurb.com

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS3, Javascript
  • Compatible with: Chrome, Safari, Firefox, IE- 8,9+, iOS- for iPhone, iPad, Windows Phone 7, Android 2+ for tablet and phone
  • Additional components: Media Queries, Buttons, Modular Scale for Typography, Forms, Navigation, Tabs, Alerts, Tooltips, Labels, Accordion, Tables, Progress Bars, Video, Thumbnails, Orbit, Magellan, Reveal, Joyride, Clearing, UI elements

Quick Summary

  • 12-column grid structure
  • Fluid layout pattern
  • Default grid-width set at 940px, adjustable grid-size, single breakpoint at 768px for devices that need width less than 768px
  • Nested grids, Offset support
  • Customizable features for typography, forms, UI elements, navigation etc
  • Based on Sass styling pattern

LESS framework

LESS CSS Framework

URL: lessframework.com

Technical Details

  • Type: Grid System
  • Technology: HTML5, CSS, Javascript
  • Compatible with: IE 6+, Safari, Chrome, Opera, Firefox, Nokia Webkit, Android Webkit, Mobile Safari (all iPhones, iPads, and iPod Touches), WebOS, Blackberry OS
  • Additional Components: You need to add them separately

Quick Summary

  • 3/5/8/10 columns grid structure
  • Fluid layout pattern
  • Default grid-width set at 992 px, adjustable for 320, 480, and 768px
  • 3 sets of typography presets
  • Default layout served to browsers not supporting media queries; other layouts served for the ones that do
  • Based on LESS CSS Pre-processor

Skeleton

Skeleton CSS Framework

URL: getskeleton.com

Technical Details

  • Type: Boilerplate
  • Technology: CSS
  • Compatible with: Chrome, Firefox 3 and above, Safari, IE- 7,8,9
  • Additional Components: Buttons, Forms, Media Queries, Typography

Quick Summary

  • 16-column grid structure
  • It's only a development kit and not a full-fledge UI framework
  • Default width set at 960px; can design pages for width ranging from 480px (or even less) to 960px
  • Support for iPhone Retina images and Droid (charge/original)
  • Grid pattern is a variation of 960gs

Gumby

Gumby CSS Framework

URL: gumbyframework.com

Technical Details

  • Type: Framework
  • Technology: HTML, CSS, Javascript
  • Compatible with: all the commonly-used browsers and screen-sizes
  • Additional Components: Design templates, UI kit, Production-ready codes, Buttons, Forms, Toggles, Navigation, Drawers, Tabs

Quick Summary

  • 12/16/hybrid columns grid structure
  • 12-column grid divided into 60px-wide portion, 16-column into 40px-wide
  • Fixed, fluid layout pattern Grid based on 960gs
  • Nested grids
  • Customizable features for grid, typography, colors etc

Columnal

Columnal CSS Framework

URL: columnal.com

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: all the commonly-used desktop and mobile browsers
  • Additional components: Media Queries, Sub-columns, Prefix, Suffix, Wireframing templates, PDF of grid system

Quick Summary

  • 12-column grid structure
  • Default width of 1140px; IE- 6,7 work well on 984px or 960px
  • Fluid layout
  • Borrowed from 960.gs, cssgrid.net grid systems

1140 Grid

1140 Grid CSS Framework

URL: cssgrid.net

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: IE- 6,7,8+, Safari, Chrome, Firefox, MacBook, iMac, iPhone, iPad, Android phones, Blackberry OS, Nokia phones (the old ones too)
  • Additional components: Media Queries

Quick Summary

  • 12-column grid structure
  • Default width of 1140px
  • Fluid layout
  • Option of including Retina Display x2 images for iPhone 4

Semantic Grid System

Semantic CSS Framework

URL: semantic.gs

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: IE 6+, Firefox 3.5+, Chrome, Opera 9+, Safari 4+
  • Additional components: Mixins for LESS, Stylus, and SCSS

Quick Summary

  • 12-column grid structure
  • Default width of 960px
  • Fixed, fluid layout
  • Nested columns
  • Runs on LESS, Stylus, SCSS pre-processor

Golden Grid System

Golden Grid CSS Framework

URL: goldengridsystem.com

Technical Details

  • Type: Grid System
  • Technology: HTML, CSS3, Javascript
  • Compatible with: IE 6+, Safari, other common browsers and screen-sizes
  • Additional components: Media queries, Zoomable baseline grid, Golden Gridlet

Quick Summary

  • 18-column grid structure of which 16 columns available for actual design
  • Foldable grid pattern inspired by DIN paper system and Unigrid
  • Covers screens ranging from 240px to 2560px
  • Columns can be folded into 8 or 4 numbers depending upon the screen size
  • Elastic gutters for better layout pattern

Titan Framework

Titan CSS Framework

URL: titanthemes.com

Technical Details

  • Type: Framework
  • Technology: CSS
  • Compatible with: Still in developmental phase
  • Additional components: PSD templates, reset.css, 12.css, text.css, 16.css

Quick Summary

  • 12/16 column grid structure
  • Similar to 960.gs grid system classes
  • Default width set at 960px
  • Responsive Grid System

Responsive CSS Grid System

Responsive Grid CSS Framework

URL: responsivegridsystem.com

Technical Details

  • Type: Grid System
  • Technology: HTML, CSS
  • Compatible with: IE 6+, Safari 4+, Opera 9+, Firefox 3.5+, Chrome
  • Additional Components: Media Queries

Quick Summary

  • 2 to 12 columns grid structure
  • Suitable for all the commonly-used widths including those less than 480px
  • Fluid layout

Base

Base CSS Framework

URL: matthewhartman.github.com/base/

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS, Javascript
  • Compatible with: IE 7 and above, Firefox, Chrome, Opera
  • Additional components: PSD, HTML5 template and jQuery, Typography, Tables, Blockquotes, Javascript plugins, Forms, Buttons, Lists

Quick Summary

  • 12-column grid structure
  • Fluid layout
  • Based on LESS CSS Pre-processor
  • Default font-size of 14px, line-height of 22px
  • Built for mobile, netbook, tablet, desktop

Kube

Kube CSS Framework

URL: imperavi.com/kube/

Technical Details

  • Type: Framework
  • Technology: CSS, Javascript
  • Compatible with: Chrome, Opera, Safari, IE 8+, Firefox
  • Additional components: Typography, Tables, Forms, Buttons, Blockquotes, Lists, Figure, Definition

Quick Summary

  • Nested columns
  • Developer version is based on LESS and includes mixins, modules, and variables
  • Includes a few goodies like Lead, Links, Colours, Elements, and Images

CSS Horus

CSS Horus Framework

URL: csshor.us

Technical Details

  • Type: Framework
  • Technology: CSS
  • Compatible with: IE 7, 8, 9+, Safari, Chrome, Firefox, Opera, iPhone, iPad, Blackberry, Windows phone, Android, Nokia
  • Additional components: Resets, Table, Lists, Button, Links, Typography, Forms, Basics, RTL

Quick Summary

  • 16-column grid structure
  • Available width-size of 1200px, 960px, and less
  • Based on LESS CSS Pre-processor
  • Also compatible with screen-width of mobile phones

Amazium

Amazium CSS Framework

URL: amazium.co.uk

Technical Details

  • Type: Framework
  • Technology: HTML, CSS
  • Compatible with: all the commonly-used browsers and screen-sizes
  • Additional Components: Typography defaults, Tables, Media Queries, Forms, provision for responsive images and videos, Show and Hide, Forms, Tables

Quick Summary

  • 12-column grid structure
  • Fluid layout
  • Default grid-width set at 960px; can design pages for width ranging between 300px and 1200px *Supports Hi-resolution/Retina (Pixel ratio:2) images
  • Offset support

Published in design | Tagged with responsive-web-design, frameworks, html5, twitter-bootstrap

CATEGORIES
web-development
javascript
ruby
ruby-on-rails
tutorials
startups
products
events
devops
mobile

TAGS
web-development
javascript
frameworks
ruby
open-source
ruby-on-rails
tutorials
programming
ruby-gems
reactjs

MORE

RSS

X

Talk to us, that's always a good idea!