Responsive Web Design Frameworks

Mobile Website Design South Africa

So in this day and age we as web designers have to consider all devices when we designing our clients websites. The obvious route to go here is Responsive Web Design (RWD).

There are great tools available that can make your work much easier and also speed up development time. As we are busy developing our own Framework we did a lot of research on this topic and found some great tools while doing so.

Below we match up 4 Responsive Frameworks that you can use in your projects. We found 3 awesome frameworks that you should check out. Twitter Bootstrap, Foundation and Skeleton. We also found a great match-up by vermeliondesign.


 
 
 

Overview

Bootstrap Foundation v2 Foundation v3 Skeleton
Summary
  • Large user base
  • Grids: Fluid and fixed
  • UI tools: Lots of widgets; good for rapid prototyping
  • History: Built by Twitter as a style guide for internal tools
  • Medium user base
  • Grids: Fluid. Most robust grid tools.
  • UI tools: Good for rapid prototyping, but not as expansive as Bootstrap
  • History: Built by ZURB as boilerplate for client projects
  • Medium user base
  • Grids: Fluid. Most robust grid tools.
  • UI tools: Good for rapid prototyping, but not as expansive as Bootstrap
  • History: Built by ZURB as boilerplate for client projects
  • Medium user base
  • Grids: Fixed
  • UI tools: Limited
  • History: Style agnostic and intentionally lightweight
Version 2.04 2.2.1 3.2 1.2
Website twitter.github.com/bootstrap foundation.zurb.com foundation.zurb.com getskeleton.com
GitHub github.com/twitter/bootstrap github.com/zurb/foundation github.com/zurb/foundation github.com/dhgamache/Skeleton
Creator Twitter ZURB ZURB Dave Gamache
License Code: Apache License v2.0
Documentation: CC BY 3.0
Icons: CC BY 3.0 from Glyphicons Free
MIT License MIT License MIT License
Browser Support Desktop: Chrome, Firefox, Safari, Opera, IE7+
Mobile: “tablets and smartphones”
Desktop: Chrome, Firefox, Safari, IE7+
Mobile: Mobile Webkit (iOS 5), Android 2 browser
Desktop: Chrome, Firefox, Safari, IE8+
Mobile: iOS (iPhone), iOS (iPad), Android 2 (phone), Android 2 (Tablet), Windows Phone 7
Desktop: Chrome, Firefox, Safari, IE7+
Mobile: iPhone, Droid, iPad

CSS

Bootstrap Foundation v2 Foundation v3 Skeleton
Reset normalize.css Eric Meyer’s reset normalize.css Inspired by Eric Meyer’s reset
LESS Y N N N
SASS/SCSS N Y Y N

UI and Widgets

Bootstrap Foundation v2 Foundation v3 Skeleton
Alerts Y Y Y N
Badges Y N Y N
Breadcrumbs Y Y Y N
Buttons Y Y Y Y
Carousel Y Y Y N
Collapse Y N Y N
Dropdown Y Y Y N
Forms Y Y Y Y
Grids Y Y Y Y
Icons Y N Y — with download N
Labels Y Y Y N
Lists Y Y Y N
Lists (horizontal) N N Y N
Modal window Y Y Y N
Navigation Y Y Y N
Pagination Y Y Y N
Panels N N Y N
Popovers Y N N N
Progess bars Y N Y N
Scrollspy Y N Y N
Tables Y Y Y N
Tabs Y Y Y Removed in v1.2
Thumbnails Y N Y N
Tooltips Y Y Y N
Typeahead Y N Y N
Typography Y Y Y Y
Video scaling N N Y N
Share:

Related Articles:

This entry was posted in Mobile Design, Resources, Responsive Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>