Skip to content

rails html5 boilerplate

Jump to bottom Edit New page
Daniel Kehoe edited this page Oct 25, 2011 · 21 revisions

Guide to HTML5 Boilerplate for Rails Developers

This is a guide to HTML5 Boilerplate for Rails developers. Like Ruby on Rails on the backend, HTML5 Boilerplate provides structure and conventions for setting up HTML5, CSS3 styles, and Javascript for front-end development. It’s a popular starting point for many front-end developers. However, some aspects of HTML5 Boilerplate are not useful for Rails projects. Sorting through the HTML5 Boilerplate documentation to pick what’s useful for Rails can be confusing. This article lists each component of HTML5 Boilerplate and identifies its usefulness for Rails applications.

Each component of HTML5 Boilerplate is described in this article and assigned to a category:

  • Already Included in Rails Projects
  • Useful for Rails Projects
  • Possibly Useful for Rails Projects
  • Not Useful for Rails Projects

CSS-related features of HTML5 Boilerplate are described separately to enable comparison to other HTML5 front-end frameworks and CSS3 toolkits.

  • HTML5 Boilerplate’s HTML and Javascript Support for CSS
  • HTML5 Boilerplate’s CSS Toolkit

HTML5 Boilerplate

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.”

On a first encounter, it seems HTML5 Boilerplate includes “everything but the kitchen sink.” Just finding a list of components can be overwhelming. Jonathan Verrecchia’s Initializr Advanced Customization provides a good list of everything in HTML5 Boilerplate. Descriptions of the features are found in various places on the HTML5 Boilerplate website:

This article provides links to the relevant HTML5 Boilerplate documentation for each component.

Installing HTML5 Boilerplate

If you use one of my RailsApps example apps or Rails 3 application templates to create a starter app, the most useful HTML5 Boilerplate features are included.

Here are other Rails 3 application templates that will generate HTML5 Boilerplate:

Or use a Ruby gem to add HTML5 Boilerplate to your application:

If you are not using Rails and want HTML5 Boilerplate as a set of downloadable files, use a custom HTML5 template generator website:

Already Included in Rails Projects

404: Not Found Page

A “404: Not Found” page is provided by Rails when you generate a new Rails application so you don’t need to use HTML5 Boilerplate to add it.

Favicon

HTML5 Boilerplate provides a favicon. As a Rails developer, you might have a designer create a custom favicon for your project or you may use one of several favicon generators to create your own favicon. Browsers always request the favicon.ico file so a zero byte file named favicon.ico will eliminate 404 errors in your logfile. A zero byte favicon.ico file is provided by Rails when you generate a new Rails application so you don’t need to use HTML5 Boilerplate to add it.

Sample robots.txt File

A robots.txt file is provided by Rails when you generate a new Rails application so you don’t need to use HTML5 Boilerplate to add it. If you are deploying a site that is under development, you may want to modify robots.txt to block potential spidering while the site is unfinished.

Placeholder Javascript Files

HTML5 Boilerplate provides placeholder script.js and plugins.js files as a suggested location for site-specific Javascript. When you build a new Rails app, you’ll have a placeholder app/assets/javascripts/application.js file that works with the Rails asset pipeline.

jQuery

In Rails 3.1 jQuery is the default JavaScript library and the jquery-rails gem provides the jquery.js and jquery_ujs.js files via the Rails asset pipeline. You won’t see these files in the application assets directory and you won’t need to include them using <script> tags. The HTML5 Boilerplate index.html file shows how to add jQuery to a non-Rails web page but don’t modify your application layout to match the HTML5 Boilerplate example if you are building a Rails app.

  • HTML5 Boilerplate’s jQuery
  • HTML5 Boilerplate’s description of jQuery

X-UA-Compatible Metatag

The HTML5 Boilerplate index.html page includes the X-UA-Compatible metatag. Versions 8 and 9 of Internet Explorer contain multiple rendering engines and the X-UA-Compatible metatag will force IE 8 or 9 to use the newest version of the IE rendering environment. Secondly, if Chrome Frame is installed, the X-UA-Compatible metatag will force IE 8 or 9 to use Chrome Frame’s rendering engine. As a Rails developer, you don’t have to add the X-UA-Compatible metatag to your application layout files or set an HTTP header in your ApplicationController. In production mode, the Rails ActionDispatch class automatically sends an HTTP header that sets the X-UA-Compatible header to IE=Edge,chrome=1. In development mode, the X-UA-Compatible header is set to IE=Edge. For a Rails app, there’s no need to use the X-UA-Compatible metatag snippet from HTML5 Boilerplate.

Useful for Rails Projects

Sample index.html File

The HTML5 Boilerplate index.html file shows how to structure a simple web page using HTML5 markup. Initializr provides a more complex index.html file that shows how to use the HTML5 <nav>, <article>, and <aside> tags. You may want to refer to these index.html examples when you create an application layout file.

If you are using HAML, you can convert the HTML to HAML markup using the Html2Haml website.

Viewport Metatag

Apple introduced the viewport metatag to help web developers improve the presentation of web pages on mobile devices. Setting a viewport tells the browser how content should fit on the device’s screen. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. The HTML5 Boilerplate index.html page provides an example that sets the viewport to the width of the device with an initial scale of 1. You can add this to your Rails application layout.

<meta name="viewport" content="width=device-width,initial-scale=1">

The above example allows zooming, something that may be desirable for a web site but not a web app. We could prevent zooming with the following values:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Apple’s developer documentation on Configuring the Viewport offers all the details.

Google Analytics Snippet

Most developers want to use Google Analytics tracking for their web apps. The HTML5 Boilerplate index.html page includes the Google Analytics tracking code. As a Rails developer, you’ll likely add the code to your application layout. Alternatively you can use one of several Ruby gems that automatically insert Google Analytics code into your pages with a helper or Rack middleware.

Sample humans.txt File

HTML5 Boilerplate provides a sample humans.txt file. By convention, a humans.txt file lists the people who contributed to building the website as well as a colophon (notes about tools or software used to create the website). There’s no need to provide the file except for one’s own desire to be recognized or to satisfy the curiosity of humans knowledgeable enough to look for the file.

Possibly Useful for Rails Projects

Chrome Frame

The HTML5 Boilerplate index.html page includes Javascript that prompts users of Internet Explorer 6 (IE6) to install the Google Chrome Frame browser plug-in. The X-UA-Compatible metatag is required to force the IE rendering engine to use Chrome Frame’s rendering engine. If your website uses HTML5 features and you wish to support users of Internet Explorer 6, you can add the Javascript to your application layout files. Web browser market share for Internet Explorer 6 is rapidly decreasing so you may not wish to support IE6.

Apple Touch Icons

HTML5 Boilerplate provides five icons that serve as favicons for Apple and Android mobile devices and tablets. The icons are versions of the orange stars used on the HTML5 Boilerplate website. For IOS devices such as the iPad or iPhone, these icons are used when a web page is added to the device’s home screen. For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available. As a Rails developer, you probably won’t want the orange stars from HTML5 Boilerplate. Instead you might have a designer create a set of custom touch icons for your project or you may use one of several favicon generators to create your own icons. You may want to read Mathias Bynens’s Everything You Always Wanted to Know About Touch Icons to learn more.

crossdomain.xml File

You don’t need this in your Rails app unless your app is used as a backend by a web client such as Flash or Silverlight. What’s Crossdomain.xml For? explains that “a cross-domain policy file is an XML document that grants a web client—such as Adobe Flash Player, Adobe Reader, etc.—permission to handle data across multiple domains.”

Not Useful for Rails Projects

Web Server Configuration Files

If you are the system admininstrator for a web server, see Paul Irish’s best-practice server configurations for Apache, IIS, nginx, lighttpd, Google AppEngine, and NodeJS. If you are a Rails developer and not a system admininstrator, these files will not be useful.

HTML and Javascript Support for CSS

IE Conditional Comments (HTML Markup)

The HTML5 Boilerplate index.html page includes code that modifes the <html> tag to add CSS classes for specific versions of Internet Explorer. This is HTML5 Boilerplate’s important contribution to cross-browser compatibility. For how it works, see Paul Irish’s Conditional stylesheets vs CSS hacks? Answer: Neither!.

Modernizr (Javascript)

Modernizr is a Javascript library that detects browser features and installs shims, fallbacks, and polyfills to add HTML5 functionalities to browsers that don’t natively support them. It’s useful as a foundation for building cross-browser-compatible HTML5 and CSS3 features. If you need to test whether a browser has CSS transitions and transforms (for example), you can use Modernizr. HTML5 Boilerplate’s CSS stylesheet does not depend on Modernizr. If you are relying solely on another front-end framework such as Twitter Bootstrap or Zurb Foundation, you won’t need Modernizr.

HTML5 Shiv (Javascript)

HTML5 Shiv is Javascript code that tricks older versions of Internet Explorer into applying CSS styling for HTML5 elements such as the <article> tag. Its use was first suggested in 2008 and it’s been subsequently incorporated into Modernizr. You’ll only use it if you don’t need all the features of Modernizr but still need to style HTML5 elements in older versions of IE.

Respond (Javascript)

Scott Jehl’s Respond Javascript code enables min-width and max-width media queries in browsers (Internet Explorer 6, 7, and 8) that do not natively support CSS3 media queries. It makes it possible to do responsive web design in browsers that don’t support CSS3 media queries. Respond.js is offered as an option in the Modernizr download builder tool and HTML5 Boilerplate includes it as part of the default Modernizr Javascript file. You’ll need Respond if you are implementing custom CSS that is device specific. Otherwise, use an HTML5 front-end framework with a CSS3 toolkit that already accommodates a variety of devices.

CSS Toolkit

CSS Reset

As described by Eric Meyer, CSS Reset “smooths out many browser inconsistencies by explicitly assigning values to things like element margins and padding, forcing all elements to have the same font size, and so on. You can find resets in most CSS frameworks, and they’re a great starting point for creating your own ‘baseline’ styles.” HTML5 Boilerplate does not provide CSS rules for a complete CSS reset. Instead it offers CSS normalization.

CSS Normalization

CSS normalization provides a set of CSS rules that make HTML elements such as <h1> look the same across web browsers. You can see a web page that uses normalized CSS from the normalize.css project by Nicolas Gallagher and Jonathan Neal. The HTML5 Boilerplate css.style file incorporates CSS normalization from the normalize.css project and adds a few rules of its own.

CSS Print Styles

The HTML5 Boilerplate style.css file offers an example CSS media print style that is used when a web page is printed from a browser. It is a useful reference if you are writing your own CSS styles. You’ll be better served by using an HTML5 front-end framework that offers a richer toolkit of CSS3 styles.

CSS Media Queries for Responsive Design

You’ll want to design your Rails app to accommodate a variety of devices. The term responsive web design was coined by Ethan Marcotte and refers to using fluid grids, flexible images, and CSS3 media queries to modify a web page to accommodate devices with differing screen sizes and resolutions such as a smartphones, tablets, and desktop computers. A media query in a CSS stylesheet (such as media screen and (max-width:320px)) can detect the width of a smartphone’s screen and adjust CSS rules accordingly. HTML5 Boilerplate provides placeholders for media queries in its style.css file but does not provide CSS styles for different devices. Don’t bother with the media query placeholders in HTML5 Boilerplate. Use an HTML5 front-end framework that offers a full implementation of responsive web design.

CSS Paged Media Styles

Paged media support means browsers will break content into pages to accommodate orphans/widows. Paged media is supported only in a few browsers. The HTML5 Boilerplate style.css file includes CSS rules for paged media.

CSS Helper Classes

The HTML5 Boilerplate style.css file includes several CSS classes that are often needed by web designers.

CSS Grid

HTML5 Boilerplate does not provide a CSS grid system.

Conclusion

The HTML5 Boilerplate project integrates the research and thought of a large community of front-end developers. In its downloadable form, HTML5 Boilerplate doesn’t fit easily into a typical Rails application. However, HTML5 Boilerplate serves as a useful reference for Rails developers who want to provide structure and convention for the HTML, CSS, and Javascript of an application’s front-end. Hopefully, with this guide, you can pick and choose the components that are useful for a Rails app. In the process, you’ll learn about current best practices for front-end development.

Add a custom footer
Add a custom sidebar
Clone this wiki locally