-
Notifications
You must be signed in to change notification settings - Fork 0
html5 frameworks
Last updated 16 December 2011
Here you’ll find a comparison of features of HTML5 front-end frameworks and CSS3 toolkits that are often used by Rails developers. The aim of the article is to compare popular frameworks and toolkits including HTML5 Boilerplate, Twitter Bootstrap, Zurb Foundation, and offer guidance in choosing the frameworks.
Developers who work on the “backend” (the server-side programs) of database-driven websites use web application programming frameworks such as Ruby on Rails, Django for Python, or various frameworks for PHP and Java. A web application framework provides a structure and conventions for responding to requests from web browsers including interacting with a database and generating pages from templates. “Front-end” developers create the templates that implement graphic design as HTML markup and CSS styles, including navigation menus, functionality such as modal dialogs and sliders, and any other interactive elements developed within the web browser. Just as there are web application frameworks for programming languages on the server backend, there are front-end development frameworks that provide structure and conventions for using HTML5, CSS3 and Javascript in the web browser. Unlike web app frameworks such as Rails which have become well-established and essential to web application development, many front-end development frameworks are new and not yet well known.
You may see these frameworks referred to as CSS toolkits or libraries, grid systems, boilerplates, or default templates. I call these projects “front-end frameworks” because they are used by the front-end developers who use HTML, CSS, and Javascript and are concerned with design, typography, and cross-browser consistency across devices. Few of the front-end frameworks offer the same set of features; each focuses on different needs and several overlap in usefulness. This article compares features and offers recommendations.
HTML5 Boilerplate has been available since August 10th, 2010. Paul Irish and Divya Manian launched HTML5 Boilerplate as a set of templates for web developers “collecting best practices and making an ideal project starting point.” My Guide to HTML5 Boilerplate for Rails Developers describes each component of HTML5 Boilerplate and identifies its usefulness for Rails applications.
(Discussion welcome. Notes to come.)
Twitter Bootstrap and Zurb Foundation are popular CSS toolkits. The primary difference is that Bootstrap is built around a fixed grid, while Foundation is built on a responsive grid that accommodates devices with a variety of screen sizes.
Bootstrap uses an adapted version of Eric Meyer’s CSS reset file that cuts out some HTML elements that are not used often (see the reset.less file).
Foundation includes Eric Meyer’s CSS reset file (see the globals.css file).
For a history and comparison of CSS resets, see a series of articles by Michael Tuck".
Bootstrap uses Less to set variables to customize the look and feel of Bootstrap (see the variables.less file).
Foundation is pure css and doesn’t natively offer support for variables.
Bootstrap uses Less to provide snippets of reusable CSS for frequently-used techniques such as “clearfix” (see the mixins.less file).
Foundation offers a very limited set of commonly used CSS snippets: left, right, hide, and highlight (see the globals.css file).
Bootstrap uses Less to provide styles for a grid system for page structure and layout (see the scaffolding.less file).
Foundation provides a grid system that adapts to mobile device with small screens.
Neither Bootstrap or Foundation includes styles or a default layout showing use of HTML5 semantic markup tags (article, section, aside, nav, footer).
Bootstrap provides styles for common design elements (design patterns) including:
- topbar
- dropdown menu
- tabs
- pills
- breadcrumb navigation
- hero unit
- footer
- buttons
- alert message
- pagination
- modal boxes
- popover
- label
- media grid
(See the patterns.less file).
Bootstrap uses Less to style forms (see the forms.less file).
Foundation provides styles for forms (see the forms.css file).
Bootstrap uses Less to style tables (see the tables.less file).
Foundation provides styles for tables (see the globals.css file).
Bootstrap provides styles for lists (see the type.less file).
Foundation provides styles for lists (see the globals.css file).
Bootstrap uses Less to style links (see the patterns.less, scaffolding.less, and variables.less files).
Foundation provides styles for links (see the globals.css file).
Bootstrap uses Less to style typography for common elements such as headings, body text, lists, and code (see the type.less file).
Foundation provides styles for typography for headings, body text, etc. (see the globals.css file).
Bootstrap has no styles for printing (@media print).
Foundation provides styles for printing (@media print) derived from Paul Irish’s HTML5 Boilerplate.
The current version of Bootstrap (V1.4.0 released November 3, 2011) does not provide responsive layouts for mobile devices. A responsive stylesheet is planned for a future 2.0 version.
The Foundation grid system responds to mobile device with small screens.