-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathrails-default-application-layout.html
364 lines (362 loc) · 27.7 KB
/
rails-default-application-layout.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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rails Application Layout · RailsApps</title>
<meta name="viewport" content="width=device-width">
<link href="https://plus.google.com/117374718581973393536" rel="publisher">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<link rel="stylesheet" href="http://railsapps.github.io/css/railsapps.css" />
<link rel="stylesheet" href="http://railsapps.github.io/css/syntax.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
window.analytics=window.analytics||[],window.analytics.methods=["identify","group","track","page","pageview","alias","ready","on","once","off","trackLink","trackForm","trackClick","trackSubmit"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var key=window.analytics.methods[i];window.analytics[key]=window.analytics.factory(key)}window.analytics.load=function(t){if(!document.getElementById("analytics-js")){var a=document.createElement("script");a.type="text/javascript",a.id="analytics-js",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.io/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)}},window.analytics.SNIPPET_VERSION="2.0.9",
window.analytics.load("l1stqfqqbf");
window.analytics.page();
window.analytics.ready(function () {
ga('require', 'linker');
ga('linker:autoLink', ['railscomposer.com','learn-rails.com','blog.railsapps.org','tutorials.railsapps.org']);
});
</script>
</head>
<body>
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="http://railsapps.github.io/" class="brand">RailsApps Project</a>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="https://tutorials.railsapps.org/" class="google">Tutorials</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-12 columns">
<div class="content wikistyle gollum textile">
<h1>Rails Application Layout</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 3 August 2014</em></p>
<p>Rails application layout for HTML5. Shows how to set up an application layout with navigation links, messages for alerts and notices, and <span class="caps">CSS</span> styling for Rails.</p>
<h4>If You Are New to Rails</h4>
<p>If you’re new to Rails, see <a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a>, the book <a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a>, and recommendations for a <a href="https://tutorials.railsapps.org/rails-tutorial">Rails tutorial</a>.</p>
<h4><a href="http://railsapps.github.io/"><img src="http://railsapps.github.io/images/join/join-railsapps.png" title="Join RailsApps" alt="Join RailsApps"></a></h4>
<h4>What is the RailsApps Project?</h4>
<p>This is an article from the RailsApps project. The <a href="http://railsapps.github.io/">RailsApps project</a> provides example applications that developers use as starter apps. Hundreds of developers use the apps, report problems as they arise, and propose solutions. Rails changes frequently; each application is known to work and serves as your personal “reference implementation.” Each application is accompanied by a tutorial so there is no mystery code. Support for the project comes from subscribers. Please accept our invitation to <a href="http://railsapps.github.io/">join the RailsApps project</a>.</p>
<h2>Background</h2>
<p>The default application layout is where you put <span class="caps">HTML</span> that you want to include on every page of your website.</p>
<p>Every Rails application needs a well-designed application layout. The Rails default starter application, which is created when you run <code>rails new</code>, provides a barebones application layout. You’ll want to add navigation links, include flash messages for errors and notifications, and apply <span class="caps">CSS</span> styling.</p>
<p>Rails will use the layout defined in the file <strong>app/views/layouts/application.html.erb</strong> as a default for rendering any page. See the RailsGuide <a href="http://guides.rubyonrails.org/layouts_and_rendering.html#using-render">Layouts and Rendering in Rails</a> for details. The book <a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a> provides an in-depth explanation.</p>
<h4>HTML5 Boilerplate</h4>
<p>The well-known HTML5 Boilerplate project has been recommending “best practice” tweaks to web pages since 2010. Very few of the HTML5 Boilerplate recommendations are relevant for Rails developers, as Rails already provides almost everything required. If you want to learn more, the article <a href="http://railsapps.github.io/rails-html5-boilerplate.html">HTML5 Boilerplate for Rails Developers</a> looks at the recommendations.</p>
<h4>Front-end Frameworks</h4>
<p>This article shows how to set up a simple application layout with navigation links, messages for alerts and notices, and <span class="caps">CSS</span> styling for Rails. If you intend to use a front-end framework such as Bootstrap or Zurb Foundation, see these articles for information about how to set up the application layout:</p>
<ul>
<li><a href="http://railsapps.github.io/twitter-bootstrap-rails.html"><strong>Rails and Bootstrap</strong></a></li>
<li><a href="http://railsapps.github.io/rails-foundation.html"><strong>Rails and Foundation</strong></a></li>
</ul>
<h4>Rails Layout Gem</h4>
<p>This article shows how to use the <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem to generate files for an application layout, navigation links, and flash messages styled with simple <span class="caps">CSS</span> classes and layout. You don’t have to use the gem; you can copy the code directly from this article.</p>
<h2>Rails Default Application Layout</h2>
<p>Generating a new Rails application with the <code>rails new</code> command will create an application layout in the file <strong>app/views/layouts/application.html.erb</strong>. Here is the default with Rails:</p>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
</pre>
<p>This is a barebones application layout.</p>
<p>It contains a <code>title</code> for your web pages.</p>
<p>The <code>stylesheet_link_tag</code> and <code>javascript_include_tag</code> elements add <span class="caps">CSS</span> stylesheets and JavaScript from the <a href="http://guides.rubyonrails.org/asset_pipeline.html">Rails asset pipeline</a>. The <code>data-turbolinks-track</code> attribute supports Rails <a href="https://github.com/rails/turbolinks/blob/master/README.md">Turbolinks</a>.</p>
<p>The <code>csrf_meta_tags</code> element is a view helper that prevents <a href="https://en.wikipedia.org/wiki/Cross-site_request_forgery">cross-site request forgeries</a> when users input data in forms.</p>
<p>The content from a Rails view is inserted where you place the <code>yield</code> keyword. See the RailsGuide <a href="http://guides.rubyonrails.org/layouts_and_rendering.html#using-render">Layouts and Rendering in Rails</a> for details about how Rails combines views with layouts.</p>
<h2>The Rails Layout Gem</h2>
<p>You can use the <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem to generate files for an improved application layout. It will add navigation links and flash messages plus simple <span class="caps">CSS</span> classes for styling.</p>
<p>In your <strong>Gemfile</strong>, add:</p>
<pre>
group :development do
gem 'rails_layout'
end
</pre>
<p>You don’t need the <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem deployed to production, so put it in the development group.</p>
<p>Run <code>$ bundle install</code> in the Terminal.</p>
<p>The rails_layout gem uses the <code>rails generate</code> command to create files. Run:</p>
<pre>
$ rails generate layout:install simple --force
</pre>
<p>The <code>--force</code> argument will force the gem to replace the existing <strong>app/views/layouts/application.html.erb</strong> file.</p>
<p>The gem will add five files to your project:</p>
<ul>
<li><strong>app/views/layouts/application.html.erb</strong></li>
<li><strong>app/views/layouts/_messages.html.erb</strong></li>
<li><strong>app/views/layouts/_navigation.html.erb</strong></li>
<li><strong>app/views/layouts/_navigation_links.html.erb</strong></li>
<li><strong>app/assets/stylesheets/simple.css</strong></li>
</ul>
<p>Next we’ll examine the files created by the <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem.</p>
<h2>Improved Application Layout</h2>
<p>Here is the file <strong>app/views/layouts/application.html.erb</strong> created by the <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem:</p>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "My Application" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Learn Rails" %>">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<main role="main">
<%= render 'layouts/messages' %>
<%= yield %>
</main>
</body>
</html>
</pre>
<h3>Viewport</h3>
<p>The <code>viewport</code> metatag improves the presentation of web pages on mobile devices. Setting a viewport tells the browser how content should fit on the device’s screen. Apple’s developer documentation on <a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">Configuring the Viewport</a> provides details.</p>
<h3>Title and Description</h3>
<p>The <em>title</em> and <em>description</em> metatags help make your web pages search-engine friendly. Google uses contents of the title tag to display titles in search results. And it will sometimes use the content of a description metatag in search results snippets. See Google’s explanation of how it uses <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35624">Site Title and Description</a>.</p>
<p>The code uses the Ruby <a href="http://ruby.about.com/od/beginningruby/a/The-Ternary-Or-Conditional-Operator.htm">ternary operator</a>. It is a conditional statement that says, “if <code>content_for?(:title)</code> is present in the view file, use <code>yield(:title)</code> to include it, otherwise just display ‘My Application’.”</p>
<p>You can use a <code>content_for</code> statement to set a title and description on each individual page.</p>
<p>The combination of <code>content_for?</code> with <code>yield</code> allows you to inject data into the application layout from any view. Set up a view file containing the code:</p>
<pre>
<% content_for :title do %>My Title<% end %>
<% content_for :description do %>My Description<% end %>
</pre>
<p>When a controller renders the view template and combines it with the application layout, the text “My Title” will replace <code><%= content_for?(:title) ? yield(:title) : "My Application" %></code> in the application layout. If no <code>content_for</code> block is found in the view template, the alternate text “My Application” will be used.</p>
<h3>Body Tag</h3>
<p>The simplest form of the <code><body></code> tag is all you need for many applications. However, if you’re using JavaScript extensively and wish to execute JavaScript conditionally on a page, it’s helpful to set the controller name and action in the <code><body></code> tag:</p>
<pre>
<body class="<%= controller_name %> <%= action_name %>">
</pre>
<p>See the article <a href="http://railsapps.github.io/rails-javascript-include-external.html">Adding JavaScript to Rails</a> for details.</p>
<h3>HTML5 Elements</h3>
<p>The improved application layout contains tags that are structural elements from the HTML5 specification:</p>
<ul>
<li><code><header></code></li>
<li><code><main></code></li>
</ul>
<p>These elements add structure to a web page. The tags don’t add any new behavior but make it easier to determine the structure of the page and apply <span class="caps">CSS</span> styles.</p>
<p>The <code><header></code> tag is typically used for branding or navigation.</p>
<p>We wrap a navigation partial in the <code><header></code> tag:</p>
<pre>
<header>
<%= render 'layouts/navigation' %>
</header>
</pre>
<p>The <code><main></code> tag is among the newest HTML5 elements (see the <a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element">W3C specification</a> for details). From the specification: “The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos.” We follow the advice of the specification and wrap our unique content in the <code><main></code> tag.</p>
<p>The specification recommends, “Authors are advised to use <span class="caps">ARIA</span> role=‘main’ attribute on the main element until user agents implement the required role mapping.” <a href="http://www.w3.org/WAI/intro/aria"><span class="caps">ARIA</span></a>, the Accessible Rich Internet Applications Suite, is a specification to make web applications more accessible to people with disabilities. That means the <code>role="main"</code> attribute is there for any web browsers that don’t yet recognize the <code><main></code> tag, and may help people with disabilities.</p>
<pre>
<main role="main">
<%= render 'layouts/messages' %>
<%= yield %>
</main>
</pre>
<p>We wrap a messages partial and <code>yield</code> expression in a <code><main role="main"></code> element.</p>
<p>You could add a <code><footer></code> tag. It typically contains links to copyright information, legal disclaimers, or contact information.</p>
<h3>Navigation Partial</h3>
<p>You’ll likely need navigation links on every page of your web application.</p>
<p>You can add navigation links directly to your application layout file but many developers prefer to create a <a href="http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials">partial template</a> – a “partial” – to better organize the default application layout.</p>
<p>Examine the file <strong>app/views/layouts/_navigation.html.erb</strong>:</p>
<pre>
<ul class="nav">
<li><%= link_to 'Home', root_path %></li>
<%= render 'layouts/navigation_links' %>
</ul>
</pre>
<p>The navigation partial contains a <code>link_to</code> helper for a navigation link to the application home page. You’ll need to set <code>root to:</code> in the <strong>config/routes.rb</strong> file so you’ll have a <code>root_path</code> value.</p>
<p>The navigation partial includes a nested partial, the navigation links partial, in the file <strong>app/views/layouts/_navigation_links.html.erb</strong>:</p>
<pre>
<%# add navigation links to this file %>
</pre>
<p>As you add pages to your application, you can add links to this file.</p>
<p>In a simple application, it is not necessary to nest a navigation links partial. Use it to isolate the complex markup required by a front-end framework from a simple list of links needed for navigation, if you wish.</p>
<h3>Flash Messages</h3>
<p>Rails provides a standard convention to display alerts (including error messages) and other notices (including success messages), called a <em>flash message</em>. The name comes from the term “flash memory” and should not be confused with the “Adobe Flash” web development platform that was once popular for animated websites. The flash message is documented in the <a href="http://guides.rubyonrails.org/action_controller_overview.html#the-flash">RailsGuides: Action Controller Overview</a>.</p>
<p>Code to display flash messages can go directly in your application layout file or you can use a partial.</p>
<p>Here the application layout references a partial contained in the file <strong>app/views/layouts/_messages.html.erb</strong>:</p>
<pre>
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<%= content_tag :div, msg, :class => "flash_#{name}" %>
<% end %>
<% end %>
</pre>
<p>We use <code>each</code> to iterate through the flash hash, retrieving a <code>name</code> and <code>msg</code> that are passed to a block to be output as a string. The expression <code>if msg.is_a?(String)</code> serves as a test to make sure we only display messages that are strings. We use the Rails <code>content_tag</code> view helper to create the <span class="caps">HTML</span> <code>div</code>. Finally, we apply a <span class="caps">CSS</span> <code>class</code> and combine the word “flash” with “notice” or “alert” to make the <span class="caps">CSS</span> class.</p>
<h2>Simple <span class="caps">CSS</span>
</h2>
<p>The <a href="https://github.com/RailsApps/rails_layout">rails_layout</a> gem adds a <span class="caps">CSS</span> file for simple styling of the navigation links and flash messages. If you don’t want to use Twitter Bootstrap, Zurb Foundation, or another <span class="caps">CSS</span> front-end framework, you can apply simple <span class="caps">CSS</span> styling for your navigation links and flash messages with the following code.</p>
<p>Examine the file <strong>app/assets/stylesheets/simple.css</strong>:</p>
<pre>
/*
* Simple CSS stylesheet for a navigation bar and flash messages.
*/
main {
background-color: #eee;
padding-bottom: 80px;
width: 100%;
}
header {
border: 1px solid #d4d4d4;
background-image: linear-gradient(to bottom, white, #f2f2f2);
background-color: #f9f9f9;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul.nav li {
display: inline;
}
ul.nav li a {
padding: 10px 15px 10px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
.flash_notice, .flash_alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
.flash_notice {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.flash_alert {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
</pre>
<p>The <span class="caps">CSS</span> rules set a background color for the <code>main</code> section of the page, plus styles for a header, navigation links, and flash messages.</p>
<h2>Did You Like the Article?</h2>
<p>Was the article useful to you? Follow <a href="http://twitter.com/rails_apps">@rails_apps</a> on Twitter and tweet some praise. I’d love to know you were helped out by the article.</p>
<p>You can also find me on <a href="https://www.facebook.com/daniel.kehoe.sf">Facebook</a> or <a href="https://plus.google.com/+DanielKehoe/">Google+</a>.</p>
</div>
<div class="comments" id="comments">
<div class="content wikistyle gollum">
<h2>Comments</h2>
</div>
<p>Is this helpful? Your encouragement fuels the project. Please tweet or add a comment. Couldn't get something to work? For the example apps and tutorials, it's best to open an issue on GitHub so we can help you.</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="columns" -->
</div><!-- class="row" -->
<footer class="row">
<div class="large-12 columns">
<div class="row">
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Getting Started</dt>
<dd><a href="http://railsapps.github.io/ruby-and-rails.html">Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/what-is-ruby-rails.html">What is Ruby on Rails?</a></dd>
<dd><a href="http://learn-rails.com/learn-ruby-on-rails.html">Learn Ruby on Rails</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-tutorial">Rails Tutorial</a></dd>
<dd><a href="http://learn-rails.com/ruby-on-rails-tutorial-for-beginners">Ruby on Rails Tutorial for Beginners</a></dd>
<dd><a href="http://railsapps.github.io/installing-rails.html">Install Ruby on Rails</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-mac.html">Install Ruby on Rails - Mac OS X</a></dd>
<dd><a href="http://railsapps.github.io/installrubyonrails-ubuntu.html">Install Ruby on Rails - Ubuntu</a></dd>
<dd><a href="http://railsapps.github.io/rubyonrails-nitrous-io.html">Ruby on Rails - Nitrous.io</a></dd>
<dd><a href="http://railsapps.github.io/updating-rails.html">Update Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-composer/">Rails Composer</a></dd>
<dd><a href="http://railsapps.github.io/">Rails Examples</a></dd>
<dd><a href="http://railsapps.github.io/rails-examples-tutorials.html">Rails Starter Apps</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Articles</dt>
<dd><a href="http://railsapps.github.io/rails-authorization.html">Rails Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-google-analytics.html">Analytics for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-heroku-tutorial.html">Heroku and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-javascript-include-external.html">JavaScript and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-environment-variables.html">Rails Environment Variables</a></dd>
<dd><a href="http://railsapps.github.io/rails-git.html">Git and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-github.html">Rails GitHub</a></dd>
<dd><a href="http://railsapps.github.io/rails-send-email.html">Send Email with Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-haml.html">Haml and Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-default-application-layout.html">Rails Application Layout</a></dd>
<dd><a href="http://railsapps.github.io/rails-html5-boilerplate.html">HTML5 Boilerplate for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-3-2-example-gemfile.html">Example Gemfiles for Rails</a></dd>
<dd><a href="http://railsapps.github.io/rails-application-templates.html">Rails Application Templates</a></dd>
<dd><a href="http://railsapps.github.io/rails-product-planning.html">Rails Product Planning</a></dd>
<dd><a href="http://railsapps.github.io/rails-project-management.html">Rails Project Management</a></dd>
</dl>
</div>
<div class="medium-4 large-4 columns">
<dl class="footer_nav">
<dt>RailsApps · Tutorials</dt>
<dd><a href="http://railsapps.github.io/twitter-bootstrap-rails.html">Rails Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-foundation.html">Rails Foundation</a></dd>
<dd><a href="http://railsapps.github.io/rails-omniauth/">OmniAuth Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise.html">Rails Devise Tutorial</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-devise-rspec-cucumber.html">Devise RSpec</a></dd>
<dd><a href="http://railsapps.github.io/tutorial-rails-bootstrap-devise-cancan.html">Devise Bootstrap</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-roles">Role-Based Authorization</a></dd>
<dd><a href="http://railsapps.github.io/rails-devise-pundit">Rails Authorization with Pundit</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-stripe-membership-saas">Rails Membership Site with Stripe</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-recurly-subscription-saas">Rails Subscription Site with Recurly</a></dd>
<dd><a href="https://tutorials.railsapps.org/rails-prelaunch-signup">Startup Prelaunch Signup Application</a></dd>
</dl>
<dl class="footer_nav">
<dt>RailsApps Profile</dt>
<dd><a href="https://plus.google.com/108039160165742774777?rel=author">Google</a></dd>
<dd><a href="https://plus.google.com/117374718581973393536" rel="publisher">Find us on Google+</a></dd>
</dl>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>