-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrails-html5-boilerplate.html
307 lines (298 loc) · 33.2 KB
/
rails-html5-boilerplate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Guide to HTML5 Boilerplate for Rails Developers · RailsApps</title>
<link href="https://plus.google.com/u/0/b/117374718581973393536/117374718581973393536/posts/" rel="publisher" />
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/gollum.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/site.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/syntax.css" type="text/css" charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="/javascript/jquery.text_selection-1.0.0.min.js" type="text/javascript"></script>
<script src="/javascript/jquery.previewable_comment_form.js" type="text/javascript"></script>
<script src="/javascript/jquery.tabs.js" type="text/javascript"></script>
<script src="/javascript/gollum.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5109366-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand">RailsApps Project</a>
<ul class="pull-right nav">
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="https://plus.google.com/117374718581973393536" class="google">Google +</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content wikistyle gollum textile">
<h1>Guide to HTML5 Boilerplate for Rails Developers</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 20 November 2011</em></p>
<p>This is a guide to <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> for Rails developers. Like Rails on the server side or “backend”, HTML5 Boilerplate provides structure and conventions for setting up HTML5, CSS3 styles, and Javascript for front-end development. It is 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 find what’s useful for Rails can be confusing. This article lists each component of HTML5 Boilerplate and identifies its usefulness for Rails applications.</p>
<h3>
<a href="http://www.twitter.com/rails_apps"><img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" title="Follow on Twitter" alt="Follow on Twitter"></a> Follow on Twitter <a href="https://plus.google.com/117374718581973393536"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" title="Add to Google+ Circles" alt="Add to Google+ Circles"></a> Add on Google+</h3>
<p>Follow <a href="http://twitter.com/rails_apps">@rails_apps</a> on Twitter if you want more. Please tweet some praise if you like what you’ve found.</p>
<p>Add <a href="https://plus.google.com/108039160165742774777">+DanielKehoe</a> and <a href="https://plus.google.com/117374718581973393536">+RailsApps</a> to your Google+ circles for updates.</p>
<p>If you find this article helpful, be sure to take a look at the <a href="http://railsapps.github.com/">RailsApps</a> tutorials and example apps. Applications such as <a href="https://github.com/RailsApps/rails3-bootstrap-devise-cancan">rails3-bootstrap-devise-cancan</a> show how to set up a default application layout using recommendations from this article. Also see a guide to the <a href="http://railsapps.github.com/rails-default-application-layout.html">Rails Default Application Layout for HTML5</a>.</p>
<h2>About HTML5 Boilerplate</h2>
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> has been available since August 10th, 2010. <a href="http://paulirish.com/about/">Paul Irish</a> and <a href="http://nimbu.in/">Divya Manian</a> launched HTML5 Boilerplate as a set of templates “collecting best practices and making an ideal project starting point.”</p>
<p>On a first encounter, it seems HTML5 Boilerplate includes “everything but the kitchen sink.” Even finding a succinct list of components can be overwhelming. There’s an excellent list of the HTML5 Boilerplate components in Jonathan Verrecchia’s <a href="http://www.initializr.com/advanced">Initializr Advanced Customization</a>.</p>
<p>This article provides commentary plus links to the relevant HTML5 Boilerplate documentation for each component. Descriptions are available in several places on the HTML5 Boilerplate website:</p>
<ul>
<li>
<a href="http://html5boilerplate.com/">HTML5 Boilerplate home page</a> (look for “Walk through it with me, now”)</li>
<li><a href="http://html5boilerplate.com/docs/">Docs</a></li>
<li>
<a href="http://html5boilerplate.com/docs/The-markup/">The Markup</a> (describes the <code>index.html</code> file)</li>
<li>
<a href="http://html5boilerplate.com/docs/The-style/">The Style</a> (describes the <code>style.css</code> file)</li>
</ul><h2>Installing HTML5 Boilerplate in a Rails Application</h2>
<p>Many developers use my <a href="http://railsapps.github.com/">RailsApps example apps</a> or <a href="https://github.com/RailsApps/rails3-application-templates">Rails 3 application templates</a> to create a starter app. You’ll get the useful features of HTML5 Boilerplate (as described here) when you start with a <a href="http://railsapps.github.com/">RailsApps</a> application.</p>
<p>There are other popular Rails 3 application templates that include HTML5 Boilerplate:</p>
<ul>
<li><a href="https://github.com/Xac/Rails-3-HTML5-Boilerplate">Rails-3-HTML5-Boilerplate</a></li>
<li><a href="https://github.com/russfrisch/h5bp-rails">h5bp-rails</a></li>
</ul><p>(Are there others? Please suggest with a comment below.)</p>
<p>Or use a Ruby gem to add HTML5 Boilerplate to your application:</p>
<ul>
<li><a href="https://github.com/khelben/rails-boilerplate">rails-boilerplate</a></li>
</ul><h2>Useful for Rails Projects</h2>
<p>Consider adding the following components to your Rails application.</p>
<h3>Default Application Layout</h3>
<p>The HTML5 Boilerplate <code>index.html</code> file shows how to structure a simple web page using HTML5 markup. Initializr provides a more complex <code>index.html</code> file that shows how to use the HTML5 <code><nav></code>, <code><article></code>, and <code><aside></code> tags. It is helpful to refer to these <code>index.html</code> examples when you create an application layout file.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-content">simple index.html file</a>
</li>
<li>Initializr’s <a href="http://www.initializr.com/builder?print&mode=custom&izr-samplepage">more complex index.html file</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/head-Tips/">tips for the <code><head></code> section</a>
</li>
</ul><p>If you are using <span class="caps">HAML</span>, you can convert the <span class="caps">HTML</span> to <span class="caps">HAML</span> markup using the <a href="http://html2haml.heroku.com/">Html2Haml website</a>.</p>
<h3>Viewport Metatag</h3>
<p>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 <code>index.html</code> 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.</p>
<p><code><meta name="viewport" content="width=device-width,initial-scale=1"></code></p>
<p>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:</p>
<p><code><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"></code></p>
<p>Apple’s developer documentation on <a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">Configuring the Viewport</a> offers all the details.</p>
<ul>
<li>HTML5 Boilerplate’s description of the <a href="http://html5boilerplate.com/docs/The-markup/#mobile-viewport--creating-a-mobile-version">viewport metatag</a>
</li>
</ul><h3>Google Analytics Snippet</h3>
<p>Most developers want to use Google Analytics tracking for their web apps. The HTML5 Boilerplate <code>index.html</code> 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. You don’t need to copy what’s provided in HTML5 Boilerplate but it offers a good reminder to add Google Analytics tracking.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-analytics">Google Analytics code</a>
</li>
<li>HTML5 Boilerplate’s description of the <a href="http://html5boilerplate.com/docs/The-markup/#google-analytics-tracking-code">Google Analytics code</a>
</li>
</ul><h3>Sample <code>humans.txt</code> File</h3>
<p>HTML5 Boilerplate provides a sample <code>humans.txt</code> file. By convention, a humans.txt file lists the people who contributed to building the website. It also can include a colophon (notes about tools or software used to create the website). If you have a desire to be recognized or want to satisfy the curiosity of humans (those who know to look for the file), you can consider adding a <code>humans.txt</code> file.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-humans">humans.txt file</a>
</li>
</ul><h2>Possibly Useful for Rails Projects</h2>
<p>Depending on your requirements, the following components might be useful in your Rails application.</p>
<h3>Chrome Frame</h3>
<p>The HTML5 Boilerplate <code>index.html</code> page includes Javascript that prompts users of Internet Explorer 6 (IE6) to install the <a href="http://en.wikipedia.org/wiki/Google_Chrome_Frame">Google Chrome Frame</a> 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 <a href="http://www.ie6countdown.com/">market share for Internet Explorer 6</a> is rapidly decreasing so <a href="http://www.conceivablytech.com/9708/business/why-ie6-still-matters-and-why-you-should-not-care">you may not wish to support IE6</a>.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-chromeframe">Chrome Frame code</a>
</li>
<li>HTML5 Boilerplate’s description of the <a href="http://html5boilerplate.com/docs/The-markup/#google-chrome-frame">Chrome Frame code</a>
</li>
</ul><h3>Apple Touch Icons</h3>
<p>HTML5 Boilerplate provides five icons that serve as <a href="http://en.wikipedia.org/wiki/Favicon">favicons</a> for Apple and Android mobile devices and tablets. The icons are versions of <a href="https://raw.github.com/h5bp/html5-boilerplate/master/apple-touch-icon-114x114-precomposed.png">the orange stars</a> used on the HTML5 Boilerplate website. For <span class="caps">IOS</span> 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 is 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 <a href="http://mathiasbynens.be/notes/touch-icons">Everything You Always Wanted to Know About Touch Icons</a> to learn more.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-appletouchicons">touch icon files</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#favicons-and-touch-icons">touch icon files</a>
</li>
</ul><h3>Crossdomain.xml File</h3>
<p>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. <a href="http://html5boilerplate.com/docs/crossdomain.xml/">What’s Crossdomain.xml For?</a> explains that “a cross-domain policy file is an <span class="caps">XML</span> document that grants a web client—such as Adobe Flash Player, Adobe Reader, etc.—permission to handle data across multiple domains.” Most developers will not need it.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-adobecrossdomain">crossdomain.xml file</a>
</li>
</ul><h2>Already Included in Rails Projects</h2>
<p>There’s no need to add the following components to your Rails application.</p>
<h3>404: Not Found Page</h3>
<p>You won’t need to use HTML5 Boilerplate to add this. A “404: Not Found” page is provided by Rails when you generate a new Rails application.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-404">404: Not Found Page</a>
</li>
</ul><h3>Favicon</h3>
<p>HTML5 Boilerplate provides a <a href="http://en.wikipedia.org/wiki/Favicon">favicon</a>. A zero byte <code>favicon.ico</code> file is provided by Rails when you generate a new Rails application so you don’t need to use HTML5 Boilerplate to add it. 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 <code>favicon.ico</code> file so a zero byte file named <code>favicon.ico</code> will eliminate 404 errors in your logfile.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-favicon">favicon file</a>
</li>
</ul><h3>Sample <code>robots.txt</code> File</h3>
<p>A <code>robots.txt</code> 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 <code>robots.txt</code> to block potential spidering while the site is unfinished.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-robots">robots.txt file</a>
</li>
</ul><h3>Placeholder Javascript Files</h3>
<p>HTML5 Boilerplate provides placeholder <code>script.js</code> and <code>plugins.js</code> files as a suggested location for site-specific Javascript. When you build a new Rails app, you’ll have a placeholder <code>app/assets/javascripts/application.js</code> file that works with the <a href="http://guides.rubyonrails.org/asset_pipeline.html">Rails asset pipeline</a>. Don’t use the placeholder <code>script.js</code> and <code>plugins.js</code> files offered by HTML5 Boilerplate.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-scripts">placeholder Javascript files</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/plugins.js-and-script.js/">placeholder Javascript files</a>
</li>
</ul><h3>jQuery</h3>
<p>The HTML5 Boilerplate <code>index.html</code> file shows how to add jQuery to a non-Rails web page. For a Rails app, don’t modify your application layout to match the HTML5 Boilerplate example. In Rails <a href="http://weblog.rubyonrails.org/2011/4/21/jquery-new-default">jQuery is the default JavaScript library</a>. The default <code>jquery-rails</code> gem provides <code>jquery.js</code> and <code>jquery_ujs.js</code> files. You won’t need to include these files using <code><script></code> tags because they are automatically included via the <a href="http://guides.rubyonrails.org/asset_pipeline.html">Rails asset pipeline</a>.</p>
<p>HTML5 Boilerplate recommends loading jQuery from Google’s <span class="caps">CDN</span> (content delivery network). You can write code that checks if a connection to the <span class="caps">CDN</span> is available, then checks if the version in the <span class="caps">CDN</span> matches the version in the <code>jquery-rails</code> gem, and falls back to the version in the Rails asset pipeline if the <span class="caps">CDN</span> is not available. If you do so, you’ll only save a single <span class="caps">HTTP</span> request (the first time a user visits the app). The assets pipeline produces a cached minified Javascript file which is used for all subsequent requests. For ultimate performance, you can consider using the <span class="caps">CDN</span>; for most projects, it’s probably not worth the extra code.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&jquerydev">jQuery</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#google-cdn-for-jquery">jQuery</a>
</li>
</ul><h3>X-UA-Compatible Metatag</h3>
<p>The HTML5 Boilerplate <code>index.html</code> 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 <span class="caps">HTTP</span> header in your ApplicationController. In production mode, the Rails <a href="https://github.com/lifo/docrails/commit/6767946374353f90ce05e68d38bcb93dcb8bae56">ActionDispatch class</a> automatically sends an <span class="caps">HTTP</span> header that sets the X-UA-Compatible header to <code>IE=Edge,chrome=1</code>. In development mode, the X-UA-Compatible header is set to <code>IE=Edge</code>. For a Rails app, there’s no need to use the X-UA-Compatible metatag snippet from HTML5 Boilerplate.</p>
<ul>
<li>HTML5 Boilerplate’s description of the <a href="http://html5boilerplate.com/docs/The-markup/#make-sure-the-latest-version-of-ie-is-used">X-UA-Compatible metatag</a>
</li>
</ul><h2>Not Useful for Rails Projects</h2>
<p>You won’t need these components.</p>
<h3>Web Server Configuration Files</h3>
<p>These files will only be useful if you are a system admininstrator. If you are the system admininstrator for a web server, see <a href="https://github.com/h5bp/server-configs">Paul Irish’s best-practice server configurations</a> for Apache, <span class="caps">IIS</span>, nginx, lighttpd, Google AppEngine, and NodeJS.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-htaccess">Apache configuration file</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-nginx">nginx configuration file</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-webconfig"><span class="caps">IIS</span> configuration file</a>
</li>
</ul><h2>
<span class="caps">HTML</span> and Javascript Support for <span class="caps">CSS</span>
</h2>
<p>You can use these components if you are implementing <span class="caps">CSS</span> styles for your application and need to support Internet Explorer versions 6, 7, or 8 or features that are missing from certain web browsers. If you are using a <span class="caps">CSS</span> toolkit such as Twitter Bootstrap or Zurb Foundation and intend to use only the provided (“pre-themed”) <span class="caps">CSS</span> styles, you can do without these components.</p>
<h3>IE Conditional Comments (<span class="caps">HTML</span> Markup)</h3>
<p>The HTML5 Boilerplate <code>index.html</code> page includes code that modifes the <code><html></code> tag to add <span class="caps">CSS</span> classes for older versions of Internet Explorer. This is HTML5 Boilerplate’s important contribution to cross-browser compatibility. For how it works, see Paul Irish’s <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">Conditional stylesheets vs <span class="caps">CSS</span> hacks? Answer: Neither!</a>. If you are designing with <span class="caps">CSS</span> and accommodating specific versions of Internet Explorer, you’ll find IE conditional comments are useful.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-iecond">IE conditional comments</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#ie-html-tag-classes">IE conditional comments</a>
</li>
</ul><h3>Modernizr (Javascript)</h3>
<p><a href="http://www.modernizr.com/">Modernizr</a> is a Javascript library that detects browser features and installs <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">shims, fallbacks, and polyfills</a> to add HTML5 functionalities to browsers that don’t natively support them. It is useful as a foundation for building cross-browser-compatible HTML5 and CSS3 features. If you need to test whether a browser has <span class="caps">CSS</span> transitions and transforms (for example), you can use Modernizr. HTML5 Boilerplate’s <span class="caps">CSS</span> stylesheet does not depend on Modernizr. If you are relying solely on a <span class="caps">CSS</span> toolkit such as Twitter Bootstrap or Zurb Foundation, you won’t need Modernizr.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&modernizr">Modernizr file</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#modernizr-yepnope-respond">Modernizr</a>
</li>
</ul><h3>HTML5 Shiv (Javascript)</h3>
<p><a href="http://paulirish.com/2011/the-history-of-the-html5-shiv/">HTML5 Shiv</a> is Javascript code that tricks older versions of Internet Explorer into applying <span class="caps">CSS</span> styling for HTML5 elements such as the <code><article></code> tag. Its use was <a href="http://ejohn.org/blog/html5-shiv/">first suggested in 2008</a> and it has been subsequently incorporated into <a href="http://www.modernizr.com/">Modernizr</a>. 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.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&html5shiv">HTML5 Shiv file</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#modernizr-yepnope-respond">HTML5 Shiv</a>
</li>
</ul><h3>Respond (Javascript)</h3>
<p>Scott Jehl’s <a href="https://github.com/scottjehl/Respond">Respond</a> 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 <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive web design</a> in browsers that don’t support CSS3 media queries. Respond.js is <a href="http://filamentgroup.com/lab/respondjs_now_available_in_modernizr/">offered as an option</a> in the <a href="http://www.modernizr.com/download/">Modernizr download builder tool</a> and HTML5 Boilerplate includes it as part of the default Modernizr Javascript file.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&respond">respond.js file</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-markup/#respond">Respond</a>
</li>
</ul><h2>
<span class="caps">CSS</span> Toolkit</h2>
<p>You may need these components if you are implementing <span class="caps">CSS</span> styles for your application.</p>
<h3>
<span class="caps">CSS</span> Reset</h3>
<p>As described by Eric Meyer, <a href="http://meyerweb.com/eric/tools/css/reset/index.html"><span class="caps">CSS</span> Reset</a> “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 <span class="caps">CSS</span> frameworks, and they’re a great starting point for creating your own ‘baseline’ styles.” HTML5 Boilerplate does not provide <span class="caps">CSS</span> rules for a complete <span class="caps">CSS</span> reset. Instead it offers <span class="caps">CSS</span> normalization.</p>
<h3>
<span class="caps">CSS</span> Normalization</h3>
<p><span class="caps">CSS</span> normalization provides a set of <span class="caps">CSS</span> rules that make <span class="caps">HTML</span> elements such as <code><h1></code> look the same across web browsers. For a sample, see a <a href="http://necolas.github.com/normalize.css/demo.html">web page that uses normalized <span class="caps">CSS</span></a> from the <a href="http://necolas.github.com/normalize.css/">normalize.css project</a> by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> and <a href="http://twitter.com/#!/jon_neal">Jonathan Neal</a>. The HTML5 Boilerplate <code>css.style</code> file incorporates <span class="caps">CSS</span> normalization from the normalize.css project and adds a few rules of its own. If you use another <span class="caps">CSS</span> toolkit such as Twitter Bootstrap or Zurb Foundation, you won’t need the normalization from HTML5 Boilerplate.</p>
<h3>
<span class="caps">CSS</span> Print Styles</h3>
<p>The HTML5 Boilerplate <code>style.css</code> file offers an example <span class="caps">CSS</span> <code>media print</code> style that is used when a web page is printed from a browser. It is a useful reference if you are writing your own <span class="caps">CSS</span> styles for printing.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-mediaqueryprint"><span class="caps">CSS</span> print styles</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-style/#print-styles"><span class="caps">CSS</span> print styles</a>
</li>
</ul><h3>
<span class="caps">CSS</span> Media Queries for Responsive Design</h3>
<p>You’ll want to design your Rails app to accommodate a variety of devices. The term <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive web design</a> 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 <span class="caps">CSS</span> stylesheet (such as <code>media screen and (max-width:320px)</code>) can detect the width of a smartphone’s screen and adjust <span class="caps">CSS</span> rules accordingly. HTML5 Boilerplate provides placeholders for media queries in its <code>style.css</code> file but does not provide <span class="caps">CSS</span> styles for different devices. You can use a <span class="caps">CSS</span> toolkit such as <a href="http://getskeleton.com/">Skeleton</a> or <a href="http://foundation.zurb.com/">Zurb Foundation</a> to design sites that adapt to different browser page sizes.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://www.initializr.com/builder?print&mode=custom&h5bp-mediaqueries">media queries placeholders</a>
</li>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-style/#media-queries">media queries placeholders</a>
</li>
</ul><h3>
<span class="caps">CSS</span> Paged Media Styles</h3>
<p>Paged media support means browsers will break content into pages to accommodate orphans/widows. The HTML5 Boilerplate <code>style.css</code> file includes <span class="caps">CSS</span> rules for paged media. Paged media is supported only in a few browsers. You probably don’t need this.</p>
<ul>
<li>HTML5 Boilerplate’s description of <a href="http://html5boilerplate.com/docs/The-style/#paged-media-styles">paged media styles</a>
</li>
</ul><h3>
<span class="caps">CSS</span> Helper Classes</h3>
<p>The HTML5 Boilerplate <code>style.css</code> file includes several <span class="caps">CSS</span> classes that are often needed by web designers. You’ll probably use some of these if you are not using another <span class="caps">CSS</span> toolkit.</p>
<ul>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/The-style/#ir">image-replacement</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/The-style/#hidden">hidden</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/The-style/#visuallyhidden">visuallyhidden</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/The-style/#invisible">invisible</a>
</li>
<li>HTML5 Boilerplate’s <a href="http://html5boilerplate.com/docs/The-style/#clearfix">clearfix</a>
</li>
</ul><h3>
<span class="caps">CSS</span> Grid</h3>
<p>HTML5 Boilerplate does not provide a <span class="caps">CSS</span> grid system. You can add a <span class="caps">CSS</span> toolkit that provides a grid system.</p>
<h2>Conclusion</h2>
<p>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 <span class="caps">HTML</span>, <span class="caps">CSS</span>, 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.</p>
<p>Like the article? Follow <a href="http://twitter.com/rails_apps">@rails_apps</a> on Twitter if you want more. And please tweet some praise!</p>
<h4>Contributors</h4>
<p>Thank you to <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> and <a href="http://peterc.org/">Peter Cooper</a> for commenting on the first draft of this article.</p>
</div><!-- class="content" -->
<div class="comments">
<div class="content wikistyle gollum">
<h2>Comments</h2>
</div>
<p>Is this helpful? Please "like" below. Question or suggestion? Please add a comment below. Got a correction or addition? You can edit this page <a href="https://github.com/RailsApps/railsapps.github.com/wiki/_pages">on the wiki</a> or create a <a href="https://github.com/RailsApps/railsapps.github.com/issues">GitHub issue</a> to alert me.</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'railsapps'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!-- class="comments" -->
<div class="footer row">
<div class="span4">
<h3>Credits</h3>
<p><a href="http://danielkehoe.com/">Daniel Kehoe</a> initiated the <a href="http://railsapps.github.com/">RailsApps Project</a>. Thanks to <a href="http://tigrish.com/">Christopher Dell</a> for design contributions.</p>
</div>
<div class="span4">
<h3>Contributions</h3>
<p>Corrections? Additions? You can edit this page <a href="https://github.com/RailsApps/railsapps.github.com/wiki/_pages">on the wiki</a>.</p>
</div>
<div class="span4">
<h3>Last edit</h3>
<p>by <b>Daniel Kehoe</b>, 2012-06-26 04:16:58</p>
</div>
</div>
</div>
</body>
</html>