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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Source link
