Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

2343 lines (1549 sloc) 216.38 kb
<!DOCTYPE html>
<html>
<head>
<title>filling-in-the-layout</title>
<link rel="stylesheet" href="pygments.css" type="text/css" />
<link rel="stylesheet" href="polytexnic.css" type="text/css" />
</head>
<body>
<div id="book">
<h1 class="title">Ruby on Rails Tutorial </h1>
<h1 class="subtitle"> Learn Web Development with Rails</h1>
<h2 class="author">Michael Hartl</h2>
<h2 class="contents">Contents</h2>
<div id="table_of_contents"><ol><li class="chapter"><a href="beginning.html#top"><span class="number">Chapter 1</span> From zero to deploy</a></li><li><ol><li class="section"><a href="beginning.html#sec-introduction"><span class="number">1.1</span> Introduction</a></li><li><ol><li class="subsection"><a href="beginning.html#sec-comments_for_various_readers"><span class="number">1.1.1</span> Comments for various readers</a></li><li class="subsection"><a href="beginning.html#sec-1_1_2"><span class="number">1.1.2</span> &ldquo;Scaling&rdquo; Rails</a></li><li class="subsection"><a href="beginning.html#sec-conventions"><span class="number">1.1.3</span> Conventions in this book</a></li></ol></li><li class="section"><a href="beginning.html#sec-up_and_running"><span class="number">1.2</span> Up and running</a></li><li><ol><li class="subsection"><a href="beginning.html#sec-development_tools"><span class="number">1.2.1</span> Development environments</a></li><li><ol><li class="subsubsection"><a href="beginning.html#sec-1_2_1_1">IDEs</a></li><li class="subsubsection"><a href="beginning.html#sec-1_2_1_2">Text editors and command lines</a></li><li class="subsubsection"><a href="beginning.html#sec-1_2_1_3">Browsers</a></li><li class="subsubsection"><a href="beginning.html#sec-1_2_1_4">A note about tools</a></li></ol></li><li class="subsection"><a href="beginning.html#sec-rubygems"><span class="number">1.2.2</span> Ruby, RubyGems, Rails, and Git</a></li><li><ol><li class="subsubsection"><a href="beginning.html#sec-rails_installer_windows">Rails Installer (Windows)</a></li><li class="subsubsection"><a href="beginning.html#sec-install_git">Install Git</a></li><li class="subsubsection"><a href="beginning.html#sec-install_ruby">Install Ruby</a></li><li class="subsubsection"><a href="beginning.html#sec-install_rubygems">Install RubyGems</a></li><li class="subsubsection"><a href="beginning.html#sec-install_rails">Install Rails</a></li></ol></li><li class="subsection"><a href="beginning.html#sec-the_first_application"><span class="number">1.2.3</span> The first application</a></li><li class="subsection"><a href="beginning.html#sec-bundler"><span class="number">1.2.4</span> Bundler</a></li><li class="subsection"><a href="beginning.html#sec-rails_server"><span class="number">1.2.5</span> <tt>rails server</tt></a></li><li class="subsection"><a href="beginning.html#sec-mvc"><span class="number">1.2.6</span> Model-view-controller (MVC)</a></li></ol></li><li class="section"><a href="beginning.html#sec-version_control"><span class="number">1.3</span> Version control with Git</a></li><li><ol><li class="subsection"><a href="beginning.html#sec-git_setup"><span class="number">1.3.1</span> Installation and setup</a></li><li><ol><li class="subsubsection"><a href="beginning.html#sec-1_3_1_1">First-time system setup</a></li><li class="subsubsection"><a href="beginning.html#sec-1_3_1_2">First-time repository setup</a></li></ol></li><li class="subsection"><a href="beginning.html#sec-adding_and_committing"><span class="number">1.3.2</span> Adding and committing</a></li><li class="subsection"><a href="beginning.html#sec-1_3_3"><span class="number">1.3.3</span> What good does Git do you?</a></li><li class="subsection"><a href="beginning.html#sec-github"><span class="number">1.3.4</span> GitHub</a></li><li class="subsection"><a href="beginning.html#sec-git_commands"><span class="number">1.3.5</span> Branch, edit, commit, merge</a></li><li><ol><li class="subsubsection"><a href="beginning.html#sec-git_branch">Branch</a></li><li class="subsubsection"><a href="beginning.html#sec-git_edit">Edit</a></li><li class="subsubsection"><a href="beginning.html#sec-git_commit">Commit</a></li><li class="subsubsection"><a href="beginning.html#sec-git_merge">Merge</a></li><li class="subsubsection"><a href="beginning.html#sec-git_push">Push</a></li></ol></li></ol></li><li class="section"><a href="beginning.html#sec-deploying"><span class="number">1.4</span> Deploying</a></li><li><ol><li class="subsection"><a href="beginning.html#sec-heroku_setup"><span class="number">1.4.1</span> Heroku setup</a></li><li class="subsection"><a href="beginning.html#sec-heroku_step_one"><span class="number">1.4.2</span> Heroku deployment, step one</a></li><li class="subsection"><a href="beginning.html#sec-1_4_3"><span class="number">1.4.3</span> Heroku deployment, step two</a></li><li class="subsection"><a href="beginning.html#sec-heroku_commands"><span class="number">1.4.4</span> Heroku commands</a></li></ol></li><li class="section"><a href="beginning.html#sec-beginning_conclusion"><span class="number">1.5</span> Conclusion</a></li></ol></li><li class="chapter"><a href="a-demo-app.html#top"><span class="number">Chapter 2</span> A demo app</a></li><li><ol><li class="section"><a href="a-demo-app.html#sec-planning_the_application"><span class="number">2.1</span> Planning the application</a></li><li><ol><li class="subsection"><a href="a-demo-app.html#sec-modeling_demo_users"><span class="number">2.1.1</span> Modeling demo users</a></li><li class="subsection"><a href="a-demo-app.html#sec-modeling_demo_microposts"><span class="number">2.1.2</span> Modeling demo microposts</a></li></ol></li><li class="section"><a href="a-demo-app.html#sec-demo_users_resource"><span class="number">2.2</span> The Users resource</a></li><li><ol><li class="subsection"><a href="a-demo-app.html#sec-a_user_tour"><span class="number">2.2.1</span> A user tour</a></li><li class="subsection"><a href="a-demo-app.html#sec-mvc_in_action"><span class="number">2.2.2</span> MVC in action</a></li><li class="subsection"><a href="a-demo-app.html#sec-weaknesses_of_this_users_resource"><span class="number">2.2.3</span> Weaknesses of this Users resource</a></li></ol></li><li class="section"><a href="a-demo-app.html#sec-microposts_resource"><span class="number">2.3</span> The Microposts resource</a></li><li><ol><li class="subsection"><a href="a-demo-app.html#sec-a_micropost_microtour"><span class="number">2.3.1</span> A micropost microtour</a></li><li class="subsection"><a href="a-demo-app.html#sec-putting_the_micro_in_microposts"><span class="number">2.3.2</span> Putting the <em>micro</em> in microposts</a></li><li class="subsection"><a href="a-demo-app.html#sec-demo_user_has_many_microposts"><span class="number">2.3.3</span> A user <tt>has_many</tt> microposts</a></li><li class="subsection"><a href="a-demo-app.html#sec-inheritance_hierarchies"><span class="number">2.3.4</span> Inheritance hierarchies</a></li><li class="subsection"><a href="a-demo-app.html#sec-deploying_the_demo_app"><span class="number">2.3.5</span> Deploying the demo app</a></li></ol></li><li class="section"><a href="a-demo-app.html#sec-2_4"><span class="number">2.4</span> Conclusion</a></li></ol></li><li class="chapter"><a href="static-pages.html#top"><span class="number">Chapter 3</span> Mostly static pages</a></li><li><ol><li class="section"><a href="static-pages.html#sec-static_pages"><span class="number">3.1</span> Static pages</a></li><li><ol><li class="subsection"><a href="static-pages.html#sec-truly_static_pages"><span class="number">3.1.1</span> Truly static pages</a></li><li class="subsection"><a href="static-pages.html#sec-static_pages_with_rails"><span class="number">3.1.2</span> Static pages with Rails</a></li></ol></li><li class="section"><a href="static-pages.html#sec-first_tests"><span class="number">3.2</span> Our first tests</a></li><li><ol><li class="subsection"><a href="static-pages.html#sec-TDD"><span class="number">3.2.1</span> Test-driven development</a></li><li class="subsection"><a href="static-pages.html#sec-adding_a_page"><span class="number">3.2.2</span> Adding a page</a></li><li><ol><li class="subsubsection"><a href="static-pages.html#sec-red">Red</a></li><li class="subsubsection"><a href="static-pages.html#sec-green">Green</a></li><li class="subsubsection"><a href="static-pages.html#sec-refactor">Refactor</a></li></ol></li></ol></li><li class="section"><a href="static-pages.html#sec-slightly_dynamic_pages"><span class="number">3.3</span> Slightly dynamic pages</a></li><li><ol><li class="subsection"><a href="static-pages.html#sec-testing_a_title_change"><span class="number">3.3.1</span> Testing a title change</a></li><li class="subsection"><a href="static-pages.html#sec-passing_title_tests"><span class="number">3.3.2</span> Passing title tests</a></li><li class="subsection"><a href="static-pages.html#sec-embedded_ruby"><span class="number">3.3.3</span> Embedded Ruby</a></li><li class="subsection"><a href="static-pages.html#sec-layouts"><span class="number">3.3.4</span> Eliminating duplication with layouts</a></li></ol></li><li class="section"><a href="static-pages.html#sec-static_pages_conclusion"><span class="number">3.4</span> Conclusion</a></li><li class="section"><a href="static-pages.html#sec-static_pages_exercises"><span class="number">3.5</span> Exercises</a></li><li class="section"><a href="static-pages.html#sec-advanced_setup"><span class="number">3.6</span> Advanced setup</a></li><li><ol><li class="subsection"><a href="static-pages.html#sec-eliminating_bundle_exec"><span class="number">3.6.1</span> Eliminating <tt>bundle exec</tt></a></li><li><ol><li class="subsubsection"><a href="static-pages.html#sec-rvm_bundler_integration">RVM Bundler integration</a></li><li class="subsubsection"><a href="static-pages.html#sec-binstubs">binstubs</a></li></ol></li><li class="subsection"><a href="static-pages.html#sec-guard"><span class="number">3.6.2</span> Automated tests with Guard</a></li><li class="subsection"><a href="static-pages.html#sec-spork"><span class="number">3.6.3</span> Speeding up tests with Spork</a></li><li><ol><li class="subsubsection"><a href="static-pages.html#sec-spork_and_guard">Guard with Spork</a></li></ol></li><li class="subsection"><a href="static-pages.html#sec-tests_inside_sublime_text"><span class="number">3.6.4</span> Tests inside Sublime Text</a></li></ol></li></ol></li><li class="chapter"><a href="rails-flavored-ruby.html#top"><span class="number">Chapter 4</span> Rails-flavored Ruby</a></li><li><ol><li class="section"><a href="rails-flavored-ruby.html#sec-motivation"><span class="number">4.1</span> Motivation</a></li><li class="section"><a href="rails-flavored-ruby.html#sec-strings_and_methods"><span class="number">4.2</span> Strings and methods</a></li><li><ol><li class="subsection"><a href="rails-flavored-ruby.html#sec-comments"><span class="number">4.2.1</span> Comments</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-strings"><span class="number">4.2.2</span> Strings</a></li><li><ol><li class="subsubsection"><a href="rails-flavored-ruby.html#sec-printing">Printing</a></li><li class="subsubsection"><a href="rails-flavored-ruby.html#sec-single_quoted_strings">Single-quoted strings</a></li></ol></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-objects_and_message_passing"><span class="number">4.2.3</span> Objects and message passing</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-method_definitions"><span class="number">4.2.4</span> Method definitions</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-back_to_the_title_helper"><span class="number">4.2.5</span> Back to the title helper</a></li></ol></li><li class="section"><a href="rails-flavored-ruby.html#sec-other_data_structures"><span class="number">4.3</span> Other data structures</a></li><li><ol><li class="subsection"><a href="rails-flavored-ruby.html#sec-arrays_and_ranges"><span class="number">4.3.1</span> Arrays and ranges</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-blocks"><span class="number">4.3.2</span> Blocks</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-hashes_and_symbols"><span class="number">4.3.3</span> Hashes and symbols</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-css_revisited"><span class="number">4.3.4</span> CSS revisited</a></li></ol></li><li class="section"><a href="rails-flavored-ruby.html#sec-ruby_classes"><span class="number">4.4</span> Ruby classes</a></li><li><ol><li class="subsection"><a href="rails-flavored-ruby.html#sec-constructors"><span class="number">4.4.1</span> Constructors</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-a_class_of_our_own"><span class="number">4.4.2</span> Class inheritance</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-modifying_built_in_classes"><span class="number">4.4.3</span> Modifying built-in classes</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-a_controller_class"><span class="number">4.4.4</span> A controller class</a></li><li class="subsection"><a href="rails-flavored-ruby.html#sec-a_user_class"><span class="number">4.4.5</span> A user class</a></li></ol></li><li class="section"><a href="rails-flavored-ruby.html#sec-conclusion"><span class="number">4.5</span> Conclusion</a></li><li class="section"><a href="rails-flavored-ruby.html#sec-exercises"><span class="number">4.6</span> Exercises</a></li></ol></li><li class="chapter"><a href="filling-in-the-layout.html#top"><span class="number">Chapter 5</span> Filling in the layout</a></li><li><ol><li class="section"><a href="filling-in-the-layout.html#sec-structure"><span class="number">5.1</span> Adding some structure</a></li><li><ol><li class="subsection"><a href="filling-in-the-layout.html#sec-adding_to_the_layout"><span class="number">5.1.1</span> Site navigation</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-custom_css"><span class="number">5.1.2</span> Bootstrap and custom CSS</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-partials"><span class="number">5.1.3</span> Partials</a></li></ol></li><li class="section"><a href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline"><span class="number">5.2</span> Sass and the asset pipeline</a></li><li><ol><li class="subsection"><a href="filling-in-the-layout.html#sec-the_asset_pipeline"><span class="number">5.2.1</span> The asset pipeline</a></li><li><ol><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_1_1">Asset directories</a></li><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_1_2">Manifest files</a></li><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_1_3">Preprocessor engines</a></li><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_1_4">Efficiency in production</a></li></ol></li><li class="subsection"><a href="filling-in-the-layout.html#sec-sass"><span class="number">5.2.2</span> Syntactically awesome stylesheets</a></li><li><ol><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_2_1">Nesting</a></li><li class="subsubsection"><a href="filling-in-the-layout.html#sec-5_2_2_2">Variables</a></li></ol></li></ol></li><li class="section"><a href="filling-in-the-layout.html#sec-layout_links"><span class="number">5.3</span> Layout links</a></li><li><ol><li class="subsection"><a href="filling-in-the-layout.html#sec-route_tests"><span class="number">5.3.1</span> Route tests</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-rails_routes"><span class="number">5.3.2</span> Rails routes</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-named_routes"><span class="number">5.3.3</span> Named routes</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-pretty_rspec"><span class="number">5.3.4</span> Pretty RSpec</a></li></ol></li><li class="section"><a href="filling-in-the-layout.html#sec-user_signup"><span class="number">5.4</span> User signup: A first step</a></li><li><ol><li class="subsection"><a href="filling-in-the-layout.html#sec-users_controller"><span class="number">5.4.1</span> Users controller</a></li><li class="subsection"><a href="filling-in-the-layout.html#sec-signup_url"><span class="number">5.4.2</span> Signup URI</a></li></ol></li><li class="section"><a href="filling-in-the-layout.html#sec-layout_conclusion"><span class="number">5.5</span> Conclusion</a></li><li class="section"><a href="filling-in-the-layout.html#sec-layout_exercises"><span class="number">5.6</span> Exercises</a></li></ol></li><li class="chapter"><a href="modeling-users.html#top"><span class="number">Chapter 6</span> Modeling users</a></li><li><ol><li class="section"><a href="modeling-users.html#sec-user_model"><span class="number">6.1</span> User model</a></li><li><ol><li class="subsection"><a href="modeling-users.html#sec-database_migrations"><span class="number">6.1.1</span> Database migrations</a></li><li class="subsection"><a href="modeling-users.html#sec-the_model_file"><span class="number">6.1.2</span> The model file</a></li><li><ol><li class="subsubsection"><a href="modeling-users.html#sec-model_annotation">Model annotation</a></li><li class="subsubsection"><a href="modeling-users.html#sec-accessible_attributes">Accessible attributes</a></li></ol></li><li class="subsection"><a href="modeling-users.html#sec-creating_user_objects"><span class="number">6.1.3</span> Creating user objects</a></li><li class="subsection"><a href="modeling-users.html#sec-finding_user_objects"><span class="number">6.1.4</span> Finding user objects</a></li><li class="subsection"><a href="modeling-users.html#sec-updating_user_objects"><span class="number">6.1.5</span> Updating user objects</a></li></ol></li><li class="section"><a href="modeling-users.html#sec-user_validations"><span class="number">6.2</span> User validations</a></li><li><ol><li class="subsection"><a href="modeling-users.html#sec-initial_user_tests"><span class="number">6.2.1</span> Initial user tests</a></li><li class="subsection"><a href="modeling-users.html#sec-presence_validation"><span class="number">6.2.2</span> Validating presence</a></li><li class="subsection"><a href="modeling-users.html#sec-length_validation"><span class="number">6.2.3</span> Length validation</a></li><li class="subsection"><a href="modeling-users.html#sec-format_validation"><span class="number">6.2.4</span> Format validation</a></li><li class="subsection"><a href="modeling-users.html#sec-uniqueness_validation"><span class="number">6.2.5</span> Uniqueness validation</a></li><li><ol><li class="subsubsection"><a href="modeling-users.html#sec-the_caveat">The uniqueness caveat</a></li></ol></li></ol></li><li class="section"><a href="modeling-users.html#sec-adding_a_secure_password"><span class="number">6.3</span> Adding a secure password</a></li><li><ol><li class="subsection"><a href="modeling-users.html#sec-an_encrypted_password"><span class="number">6.3.1</span> An encrypted password</a></li><li class="subsection"><a href="modeling-users.html#sec-password_and_confirmation"><span class="number">6.3.2</span> Password and confirmation</a></li><li class="subsection"><a href="modeling-users.html#sec-user_authentication"><span class="number">6.3.3</span> User authentication</a></li><li class="subsection"><a href="modeling-users.html#sec-has_secure_password"><span class="number">6.3.4</span> User has secure password</a></li><li class="subsection"><a href="modeling-users.html#sec-creating_a_user"><span class="number">6.3.5</span> Creating a user</a></li></ol></li><li class="section"><a href="modeling-users.html#sec-6_4"><span class="number">6.4</span> Conclusion</a></li><li class="section"><a href="modeling-users.html#sec-6_5"><span class="number">6.5</span> Exercises</a></li></ol></li><li class="chapter"><a href="sign-up.html#top"><span class="number">Chapter 7</span> Sign up</a></li><li><ol><li class="section"><a href="sign-up.html#sec-showing_users"><span class="number">7.1</span> Showing users</a></li><li><ol><li class="subsection"><a href="sign-up.html#sec-rails_environments"><span class="number">7.1.1</span> Debug and Rails environments</a></li><li class="subsection"><a href="sign-up.html#sec-a_users_resource"><span class="number">7.1.2</span> A Users resource</a></li><li class="subsection"><a href="sign-up.html#sec-tests_with_factories"><span class="number">7.1.3</span> Testing the user show page (with factories)</a></li><li class="subsection"><a href="sign-up.html#sec-a_gravatar_image"><span class="number">7.1.4</span> A Gravatar image and a sidebar</a></li></ol></li><li class="section"><a href="sign-up.html#sec-signup_form"><span class="number">7.2</span> Signup form</a></li><li><ol><li class="subsection"><a href="sign-up.html#sec-tests_for_user_signup"><span class="number">7.2.1</span> Tests for user signup</a></li><li class="subsection"><a href="sign-up.html#sec-using_form_for"><span class="number">7.2.2</span> Using <tt>form_for</tt></a></li><li class="subsection"><a href="sign-up.html#sec-the_form_html"><span class="number">7.2.3</span> The form HTML</a></li></ol></li><li class="section"><a href="sign-up.html#sec-signup_failure"><span class="number">7.3</span> Signup failure</a></li><li><ol><li class="subsection"><a href="sign-up.html#sec-a_working_form"><span class="number">7.3.1</span> A working form</a></li><li class="subsection"><a href="sign-up.html#sec-signup_error_messages"><span class="number">7.3.2</span> Signup error messages</a></li></ol></li><li class="section"><a href="sign-up.html#sec-signup_success"><span class="number">7.4</span> Signup success</a></li><li><ol><li class="subsection"><a href="sign-up.html#sec-the_finished_signup_form"><span class="number">7.4.1</span> The finished signup form</a></li><li class="subsection"><a href="sign-up.html#sec-the_flash"><span class="number">7.4.2</span> The flash</a></li><li class="subsection"><a href="sign-up.html#sec-the_first_signup"><span class="number">7.4.3</span> The first signup</a></li><li class="subsection"><a href="sign-up.html#sec-deploying_to_production_with_ssl"><span class="number">7.4.4</span> Deploying to production with SSL</a></li></ol></li><li class="section"><a href="sign-up.html#sec-7_5"><span class="number">7.5</span> Conclusion</a></li><li class="section"><a href="sign-up.html#sec-signup_exercises"><span class="number">7.6</span> Exercises</a></li></ol></li><li class="chapter"><a href="sign-in-sign-out.html#top"><span class="number">Chapter 8</span> Sign in, sign out</a></li><li><ol><li class="section"><a href="sign-in-sign-out.html#sec-signin_failure"><span class="number">8.1</span> Sessions and signin failure</a></li><li><ol><li class="subsection"><a href="sign-in-sign-out.html#sec-sessions_controller"><span class="number">8.1.1</span> Sessions controller</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-signin_tests"><span class="number">8.1.2</span> Signin tests</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-signin_form"><span class="number">8.1.3</span> Signin form</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-reviewing_form_submission"><span class="number">8.1.4</span> Reviewing form submission</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-rendering_with_a_flash_message"><span class="number">8.1.5</span> Rendering with a flash message</a></li></ol></li><li class="section"><a href="sign-in-sign-out.html#sec-signin_success"><span class="number">8.2</span> Signin success</a></li><li><ol><li class="subsection"><a href="sign-in-sign-out.html#sec-remember_me"><span class="number">8.2.1</span> Remember me</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-a_working_sign_in_method"><span class="number">8.2.2</span> A working <tt>sign_in</tt> method</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-current_user"><span class="number">8.2.3</span> Current user</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-changing_the_layout_links"><span class="number">8.2.4</span> Changing the layout links</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-signin_upon_signup"><span class="number">8.2.5</span> Signin upon signup</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-signing_out"><span class="number">8.2.6</span> Signing out</a></li></ol></li><li class="section"><a href="sign-in-sign-out.html#sec-cucumber"><span class="number">8.3</span> Introduction to Cucumber (optional)</a></li><li><ol><li class="subsection"><a href="sign-in-sign-out.html#sec-installation_and_setup"><span class="number">8.3.1</span> Installation and setup</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-features_and_steps"><span class="number">8.3.2</span> Features and steps</a></li><li class="subsection"><a href="sign-in-sign-out.html#sec-rspec_custom_matchers"><span class="number">8.3.3</span> Counterpoint: RSpec custom matchers</a></li></ol></li><li class="section"><a href="sign-in-sign-out.html#sec-8_4"><span class="number">8.4</span> Conclusion</a></li><li class="section"><a href="sign-in-sign-out.html#sec-sign_in_out_exercises"><span class="number">8.5</span> Exercises</a></li></ol></li><li class="chapter"><a href="updating-showing-and-deleting-users.html#top"><span class="number">Chapter 9</span> Updating, showing, and deleting users</a></li><li><ol><li class="section"><a href="updating-showing-and-deleting-users.html#sec-updating_users"><span class="number">9.1</span> Updating users</a></li><li><ol><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-edit_form"><span class="number">9.1.1</span> Edit form</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-unsuccessful_edits"><span class="number">9.1.2</span> Unsuccessful edits</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-successful_edits"><span class="number">9.1.3</span> Successful edits</a></li></ol></li><li class="section"><a href="updating-showing-and-deleting-users.html#sec-authorization"><span class="number">9.2</span> Authorization</a></li><li><ol><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-requiring_signed_in_users"><span class="number">9.2.1</span> Requiring signed-in users</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-requiring_the_right_user"><span class="number">9.2.2</span> Requiring the right user</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-friendly_forwarding"><span class="number">9.2.3</span> Friendly forwarding</a></li></ol></li><li class="section"><a href="updating-showing-and-deleting-users.html#sec-showing_all_users"><span class="number">9.3</span> Showing all users</a></li><li><ol><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-user_index"><span class="number">9.3.1</span> User index</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-sample_users"><span class="number">9.3.2</span> Sample users</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-pagination"><span class="number">9.3.3</span> Pagination</a></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-partial_refactoring"><span class="number">9.3.4</span> Partial refactoring</a></li></ol></li><li class="section"><a href="updating-showing-and-deleting-users.html#sec-destroying_users"><span class="number">9.4</span> Deleting users</a></li><li><ol><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-administrative_users"><span class="number">9.4.1</span> Administrative users</a></li><li><ol><li class="subsubsection"><a href="updating-showing-and-deleting-users.html#sec-revisiting_attr_accessible">Revisiting <tt>attr_accessible</tt></a></li></ol></li><li class="subsection"><a href="updating-showing-and-deleting-users.html#sec-the_destroy_action"><span class="number">9.4.2</span> The <tt>destroy</tt> action</a></li></ol></li><li class="section"><a href="updating-showing-and-deleting-users.html#sec-updating_and_deleting_users_conclusion"><span class="number">9.5</span> Conclusion</a></li><li class="section"><a href="updating-showing-and-deleting-users.html#sec-updating_deleting_exercises"><span class="number">9.6</span> Exercises</a></li></ol></li><li class="chapter"><a href="user-microposts.html#top"><span class="number">Chapter 10</span> User microposts</a></li><li><ol><li class="section"><a href="user-microposts.html#sec-a_micropost_model"><span class="number">10.1</span> A Micropost model</a></li><li><ol><li class="subsection"><a href="user-microposts.html#sec-the_basic_model"><span class="number">10.1.1</span> The basic model</a></li><li class="subsection"><a href="user-microposts.html#sec-accessible_attribute"><span class="number">10.1.2</span> Accessible attributes and the first validation</a></li><li class="subsection"><a href="user-microposts.html#sec-user_micropost_associations"><span class="number">10.1.3</span> User/Micropost associations</a></li><li class="subsection"><a href="user-microposts.html#sec-ordering_and_dependency"><span class="number">10.1.4</span> Micropost refinements</a></li><li><ol><li class="subsubsection"><a href="user-microposts.html#sec-default_scope">Default scope</a></li><li class="subsubsection"><a href="user-microposts.html#sec-dependent_destroy">Dependent: destroy</a></li></ol></li><li class="subsection"><a href="user-microposts.html#sec-micropost_validations"><span class="number">10.1.5</span> Content validations</a></li></ol></li><li class="section"><a href="user-microposts.html#sec-showing_microposts"><span class="number">10.2</span> Showing microposts</a></li><li><ol><li class="subsection"><a href="user-microposts.html#sec-augmenting_the_user_show_page"><span class="number">10.2.1</span> Augmenting the user show page</a></li><li class="subsection"><a href="user-microposts.html#sec-sample_microposts"><span class="number">10.2.2</span> Sample microposts</a></li></ol></li><li class="section"><a href="user-microposts.html#sec-manipulating_microposts"><span class="number">10.3</span> Manipulating microposts</a></li><li><ol><li class="subsection"><a href="user-microposts.html#sec-access_control"><span class="number">10.3.1</span> Access control</a></li><li class="subsection"><a href="user-microposts.html#sec-creating_microposts"><span class="number">10.3.2</span> Creating microposts</a></li><li class="subsection"><a href="user-microposts.html#sec-a_proto_feed"><span class="number">10.3.3</span> A proto-feed</a></li><li class="subsection"><a href="user-microposts.html#sec-destroying_microposts"><span class="number">10.3.4</span> Destroying microposts</a></li></ol></li><li class="section"><a href="user-microposts.html#sec-10_4"><span class="number">10.4</span> Conclusion</a></li><li class="section"><a href="user-microposts.html#sec-micropost_exercises"><span class="number">10.5</span> Exercises</a></li></ol></li><li class="chapter"><a href="following-users.html#top"><span class="number">Chapter 11</span> Following users</a></li><li><ol><li class="section"><a href="following-users.html#sec-the_relationship_model"><span class="number">11.1</span> The Relationship model</a></li><li><ol><li class="subsection"><a href="following-users.html#sec-a_problem_with_the_data_model"><span class="number">11.1.1</span> A problem with the data model (and a solution)</a></li><li class="subsection"><a href="following-users.html#sec-relationship_user_associations"><span class="number">11.1.2</span> User/relationship associations</a></li><li class="subsection"><a href="following-users.html#sec-relationship_validations"><span class="number">11.1.3</span> Validations</a></li><li class="subsection"><a href="following-users.html#sec-following"><span class="number">11.1.4</span> Followed users</a></li><li class="subsection"><a href="following-users.html#sec-followers"><span class="number">11.1.5</span> Followers</a></li></ol></li><li class="section"><a href="following-users.html#sec-a_web_interface_for_following_and_followers"><span class="number">11.2</span> A web interface for following users</a></li><li><ol><li class="subsection"><a href="following-users.html#sec-sample_following_data"><span class="number">11.2.1</span> Sample following data</a></li><li class="subsection"><a href="following-users.html#sec-stats_and_a_follow_form"><span class="number">11.2.2</span> Stats and a follow form</a></li><li class="subsection"><a href="following-users.html#sec-following_and_followers_pages"><span class="number">11.2.3</span> Following and followers pages</a></li><li class="subsection"><a href="following-users.html#sec-a_working_follow_button_the_standard_way"><span class="number">11.2.4</span> A working follow button the standard way</a></li><li class="subsection"><a href="following-users.html#sec-a_working_follow_button_with_ajax"><span class="number">11.2.5</span> A working follow button with Ajax</a></li></ol></li><li class="section"><a href="following-users.html#sec-the_status_feed"><span class="number">11.3</span> The status feed</a></li><li><ol><li class="subsection"><a href="following-users.html#sec-motivation_and_strategy"><span class="number">11.3.1</span> Motivation and strategy</a></li><li class="subsection"><a href="following-users.html#sec-a_first_feed_implementation"><span class="number">11.3.2</span> A first feed implementation</a></li><li class="subsection"><a href="following-users.html#sec-scopes_subselects_and_a_lambda"><span class="number">11.3.3</span> Subselects</a></li><li class="subsection"><a href="following-users.html#sec-the_new_status_feed"><span class="number">11.3.4</span> The new status feed</a></li></ol></li><li class="section"><a href="following-users.html#sec-following_conclusion"><span class="number">11.4</span> Conclusion</a></li><li><ol><li class="subsection"><a href="following-users.html#sec-extensions_to_the_sample_application"><span class="number">11.4.1</span> Extensions to the sample application</a></li><li><ol><li class="subsubsection"><a href="following-users.html#sec-replies">Replies</a></li><li class="subsubsection"><a href="following-users.html#sec-messaging">Messaging</a></li><li class="subsubsection"><a href="following-users.html#sec-follower_notifications">Follower notifications</a></li><li class="subsubsection"><a href="following-users.html#sec-password_reminders">Password reminders</a></li><li class="subsubsection"><a href="following-users.html#sec-signup_confirmation">Signup confirmation</a></li><li class="subsubsection"><a href="following-users.html#sec-rss_feed">RSS feed</a></li><li class="subsubsection"><a href="following-users.html#sec-rest_api">REST API</a></li><li class="subsubsection"><a href="following-users.html#sec-search">Search</a></li></ol></li><li class="subsection"><a href="following-users.html#sec-guide_to_further_resources"><span class="number">11.4.2</span> Guide to further resources</a></li></ol></li><li class="section"><a href="following-users.html#sec-following_exercises"><span class="number">11.5</span> Exercises</a></li></ol></li></ol></div>
<div id="main_content"></div>
<p> <span class="preamble">
<span id="foreword">
<strong> Foreword</strong> <br />
</span>
</span></p>
<p>My former company (CD Baby) was one of the first to loudly switch to Ruby on Rails, and then even more loudly switch back to PHP (Google me to read about the drama). This book by Michael Hartl came so highly recommended that I had to try it, and the <em>Ruby on Rails Tutorial</em> is what I used to switch back to Rails again.</p>
<p>Though I&rsquo;ve worked my way through many Rails books, this is the one that finally made me &ldquo;get&rdquo; it. Everything is done very much &ldquo;the Rails way&rdquo;&mdash;a way that felt very unnatural to me before, but now after doing this book finally feels natural. This is also the only Rails book that does test-driven development the entire time, an approach highly recommended by the experts but which has never been so clearly demonstrated before. Finally, by including Git, GitHub, and Heroku in the demo examples, the author really gives you a feel for what it&rsquo;s like to do a real-world project. The tutorial&rsquo;s code examples are not in isolation.</p>
<p>The linear narrative is such a great format. Personally, I powered through the <em>Rails Tutorial</em> in three long days, doing all the examples and challenges at the end of each chapter. Do it from start to finish, without jumping around, and you&rsquo;ll get the ultimate benefit.</p>
<p>Enjoy!</p>
<p><a href="http://sivers.org/">Derek Sivers</a> (<a href="http://sivers.org/">sivers.org</a>) <br />
<em>Formerly: Founder,</em> <a href="http://www.cdbaby.com/"><em>CD Baby</em></a> <br />
<em>Currently: Founder,</em> <a href="http://thoughts.pro/"><em>Thoughts Ltd.</em></a> <br /></p>
<p> <span class="preamble">
<strong> Acknowledgments</strong> <br />
</span></p>
<p>The <em>Ruby on Rails Tutorial</em> owes a lot to my previous Rails book, <em>RailsSpace</em>, and hence to my coauthor <a href="http://aure.com/">Aurelius Prochazka</a>. I&rsquo;d like to thank Aure both for the work he did on that book and for his support of this one. I&rsquo;d also like to thank Debra Williams Cauley, my editor on both <em>RailsSpace</em> and the <em>Ruby on Rails Tutorial</em>; as long as she keeps taking me to baseball games, I&rsquo;ll keep writing books for her.</p>
<p>I&rsquo;d like to acknowledge a long list of Rubyists who have taught and inspired me over the years: David Heinemeier Hansson, Yehuda Katz, Carl Lerche, Jeremy Kemper, Xavier Noria, Ryan Bates, Geoffrey Grosenbach, Peter Cooper, Matt Aimonetti, Gregg Pollack, Wayne&nbsp;E. Seguin, Amy Hoy, Dave Chelimsky, Pat Maddox, Tom Preston-Werner, Chris Wanstrath, Chad Fowler, Josh Susser, Obie Fernandez, Ian McFarland, Steven Bristol, Wolfram Arnold, Alex Chaffee, Giles Bowkett, Evan Dorn, Long Nguyen, James Lindenbaum, Adam Wiggins, Tikhon Bernstam, Ron Evans, Wyatt Greene, Miles Forrest, the good people at Pivotal Labs, the Heroku gang, the thoughtbot guys, and the GitHub crew. Finally, many, many readers&mdash;far too many to list&mdash;have contributed a huge number of bug reports and suggestions during the writing of this book, and I gratefully acknowledge their help in making it as good as it can&nbsp;be. <br /></p>
<p> <span class="preamble">
<span id="author">
<strong> About the author</strong> <br />
</span>
</span></p>
<p><a href="http://michaelhartl.com/">Michael Hartl</a> is the author of the <a href="http://ruby.railstutorial.org/"><em>Ruby on Rails Tutorial</em></a>, the leading introduction to web development with <a href="http://rubyonrails.org/">Ruby on Rails</a>. His prior experience includes writing and developing <em>RailsSpace</em>, an extremely obsolete Rails tutorial book, and developing Insoshi, a once-popular and now-obsolete social networking platform in Ruby on Rails. In 2011, Michael received a <a href="http://rubyheroes.com/heroes">Ruby Hero Award</a> for his contributions to the Ruby community. He is a graduate of <a href="http://college.harvard.edu/">Harvard College</a>, has a <a href="http://resolver.caltech.edu/CaltechETD:etd-05222003-161626">Ph.D. in Physics</a> from <a href="http://www.caltech.edu/">Caltech</a>, and is an alumnus of the <a href="http://ycombinator.com/">Y&nbsp;Combinator</a> entrepreneur program. <br /></p>
<p> <span id="license" class="preamble">
<strong> Copyright and license</strong> <br />
</span></p>
<p><em>Ruby on Rails Tutorial: Learn Web Devlopment with Rails</em>. Copyright &copy; 2012 by Michael Hartl. All source code in the <em>Ruby on Rails Tutorial</em> is available jointly under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> and the <a href="http://people.freebsd.org/~phk/">Beerware License</a>.</p>
<div class="code"><div class="highlight"><pre>The MIT License
Copyright (c) 2012 Michael Hartl
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the &quot;Software&quot;), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
</pre></div>
</div>
<div class="code"><div class="highlight"><pre>/*
* ----------------------------------------------------------------------------
* &quot;THE BEER-WARE LICENSE&quot; (Revision 42):
* Michael Hartl wrote this code. As long as you retain this notice you
* can do whatever you want with this stuff. If we meet some day, and you think
* this stuff is worth it, you can buy me a beer in return.
* ----------------------------------------------------------------------------
*/
</pre></div>
</div>
<div id="top"></div>
<h1 class="chapter"><a id="sec-5" href="filling-in-the-layout.html#top" class="heading"><span class="number">Chapter 5</span> Filling in the layout</a></h1>
<p>In the process of taking a brief tour of Ruby in <a class="ref" href="rails-flavored-ruby.html#top">Chapter&nbsp;4</a>, we learned about including the application stylesheet into the sample application&mdash;but, as noted in <a class="ref" href="rails-flavored-ruby.html#sec-css_revisited">Section&nbsp;4.3.4</a>, this stylesheet is currently empty. In this chapter, we&rsquo;ll change this by incorporating the <em>Bootstrap</em> framework into our application, and then we&rsquo;ll add some custom styles of our own.<sup class="footnote" id="fnref-5_1"><a href="#fn-5_1">1</a></sup> We&rsquo;ll also start filling in the layout with links to the pages (such as Home and About) that we&rsquo;ve created so far (<a class="ref" href="filling-in-the-layout.html#sec-structure">Section&nbsp;5.1</a>). Along the way, we&rsquo;ll learn about partials, Rails routes, and the asset pipeline, including an introduction to Sass (<a class="ref" href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline">Section&nbsp;5.2</a>). We&rsquo;ll also refactor the tests from <a class="ref" href="static-pages.html#top">Chapter&nbsp;3</a> using the latest RSpec techniques. We&rsquo;ll end by taking a first important step toward letting users sign up to our site.</p>
<div class="label" id="sec-structure"></div>
<h2><a id="sec-5_1" href="filling-in-the-layout.html#sec-structure" class="heading"><span class="number">5.1</span> Adding some structure</a></h2>
<p>The <em>Rails Tutorial</em> is a book on web development, not web design, but it would be depressing to work on an application that looks like <em>complete</em> crap, so in this section we&rsquo;ll add some structure to the layout and give it some minimal styling with CSS. In addition to using some custom CSS rules, we&rsquo;ll make use of <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>, an open-source web design framework from Twitter. We&rsquo;ll also give our <em>code</em> some styling, so to speak, using <em>partials</em> to tidy up the layout once it gets a little cluttered.</p>
<p>When building web applications, it is often useful to get a high-level overview of the user interface as early as possible. Throughout the rest of this book, I will thus often include <em>mockups</em> (in a web context often called <em>wireframes</em>), which are rough sketches of what the eventual application will look like.<sup class="footnote" id="fnref-5_2"><a href="#fn-5_2">2</a></sup> In this chapter, we will principally be developing the static pages introduced in <a class="ref" href="static-pages.html#sec-static_pages">Section&nbsp;3.1</a>, including a site logo, a navigation header, and a site footer. A mockup for the most important of these pages, the Home page, appears in <a class="ref" href="filling-in-the-layout.html#fig-home_page_mockup">Figure&nbsp;5.1</a>. You can see the final result in <a class="ref" href="filling-in-the-layout.html#fig-site_with_footer">Figure&nbsp;5.7</a>. You&rsquo;ll note that it differs in some details&mdash;for example, we&rsquo;ll end up adding a Rails logo on the page&mdash;but that&rsquo;s fine, since a mockup need not be exact.</p>
<div class="label" id="fig-home_page_mockup"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/home_page_mockup_bootstrap.png" alt="home_page_mockup_bootstrap" /></span></div><div class="caption"><span class="header">Figure 5.1: </span><span class="description">A mockup of the sample application&rsquo;s Home page.&nbsp;<a href="http://railstutorial.org/images/figures/home_page_mockup_bootstrap-full.png">(full size)</a></span></div></div>
<p>As usual, if you&rsquo;re using Git for version control, now would be a good time to make a new branch:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> git checkout -b filling-in-layout
</pre></div>
</div>
<div class="label" id="sec-adding_to_the_layout"></div>
<h3><a id="sec-5_1_1" href="filling-in-the-layout.html#sec-adding_to_the_layout" class="heading"><span class="number">5.1.1</span> Site navigation</a></h3>
<p>As a first step toward adding links and styles to the sample application, we&rsquo;ll update the site layout file <code>application.html.erb</code> (last seen in <a class="ref" href="rails-flavored-ruby.html#code-application_layout_full_title">Listing&nbsp;4.3</a>) with additional HTML structure. This includes some additional divisions, some CSS classes, and the start of our site navigation. The full file is in <a class="ref" href="filling-in-the-layout.html#code-layout_new_structure">Listing&nbsp;5.1</a>; explanations for the various pieces follow immediately thereafter. If you&rsquo;d rather not delay gratification, you can see the results in <a class="ref" href="filling-in-the-layout.html#fig-layout_no_logo_or_custom_css">Figure&nbsp;5.2</a>. (<em>Note:</em> it&rsquo;s not (yet) very gratifying.)</p>
<div class="label" id="code-layout_new_structure"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.1.</span> <span class="description">The site layout with added structure. <br /> <code>app/views/layouts/application.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span><span class="cp">&lt;%=</span> <span class="n">full_title</span><span class="p">(</span><span class="k">yield</span><span class="p">(</span><span class="ss">:title</span><span class="p">))</span> <span class="cp">%&gt;</span><span class="nt">&lt;/title&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">stylesheet_link_tag</span> <span class="s2">&quot;application&quot;</span><span class="p">,</span> <span class="ss">media:</span> <span class="s2">&quot;all&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">javascript_include_tag</span> <span class="s2">&quot;application&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">csrf_meta_tags</span> <span class="cp">%&gt;</span>
<span class="c">&lt;!--[if lt IE 9]&gt;</span>
<span class="c"> &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;</span>
<span class="c"> &lt;![endif]--&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar-inner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;sample app&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s2">&quot;logo&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="k">yield</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre></div>
</div></div>
<p>One thing to note immediately is the switch from Ruby&nbsp;1.8&ndash;style hashes to the new Ruby&nbsp;1.9 style (<a class="ref" href="rails-flavored-ruby.html#sec-hashes_and_symbols">Section&nbsp;4.3.3</a>). That is,</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">stylesheet_link_tag</span> <span class="s2">&quot;application&quot;</span><span class="p">,</span> <span class="ss">:media</span> <span class="o">=&gt;</span> <span class="s2">&quot;all&quot;</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>has been replaced with</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">stylesheet_link_tag</span> <span class="s2">&quot;application&quot;</span><span class="p">,</span> <span class="ss">media:</span> <span class="s2">&quot;all&quot;</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>Because the old hash syntax is still common, especially in older applications, it&rsquo;s important to be able to recognize both forms.</p>
<p>Let&rsquo;s look at the other new elements in <a class="ref" href="filling-in-the-layout.html#code-layout_new_structure">Listing&nbsp;5.1</a> from top to bottom. As noted briefly in <a class="ref" href="static-pages.html#sec-static_pages">Section&nbsp;3.1</a>, Rails&nbsp;3 uses HTML5 by default (as indicated by the doctype <code>&lt;!DOCTYPE html&gt;</code>); since the HTML5 standard is relatively new, some browsers (especially older versions Internet Explorer) don&rsquo;t fully support it, so we include some JavaScript code (known as an &ldquo;<a href="http://code.google.com/p/html5shim/">HTML5 shim</a>&rdquo;) to work around the issue:</p>
<div class="code"><div class="highlight"><pre><span class="c">&lt;!--[if lt IE 9]&gt;</span>
<span class="c">&lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;</span>
<span class="c">&lt;![endif]--&gt;</span>
</pre></div>
</div>
<p>The somewhat odd syntax</p>
<div class="code"><div class="highlight"><pre><span class="c">&lt;!--[if lt IE 9]&gt;</span>
</pre></div>
</div>
<p>includes the enclosed line only if the version of Microsoft Internet Explorer&nbsp;(IE) is less than&nbsp;9 (<code>if lt IE 9</code>). The weird <code>[if lt IE 9]</code> syntax is <em>not</em> part of Rails; it&rsquo;s actually a <a href="http://en.wikipedia.org/wiki/Conditional_comment">conditional comment</a> supported by Internet Explorer browsers for just this sort of situation. It&rsquo;s a good thing, too, because it means we can include the HTML5 shim <em>only</em> for IE browsers less than version&nbsp;9, leaving other browsers such as Firefox, Chrome, and Safari unaffected.</p>
<p>The next section includes a <code>header</code> for the site&rsquo;s (plain-text) logo, a couple of divisions (using the <code>div</code> tag), and a list of elements with navigation links:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar-inner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;sample app&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s2">&quot;logo&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre></div>
</div>
<p>Here the <code>header</code> tag indicates elements that should go at the top of the page. We&rsquo;ve given the <code>header</code> tag two <em>CSS classes</em>,<sup class="footnote" id="fnref-5_3"><a href="#fn-5_3">3</a></sup> called <code>navbar</code> and <code>navbar-fixed-top</code>, separated with a space:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
</pre></div>
</div>
<p>All HTML elements can be assigned both classes and <em>ids</em>; these are merely labels, and are useful for styling with CSS (<a class="ref" href="filling-in-the-layout.html#sec-custom_css">Section&nbsp;5.1.2</a>). The main difference between classes and ids is that classes can be used multiple times on a page, but ids can be used only once. In the present case, both of the <code>navbar</code> and <code>navbar-fixed-top</code> classes have special meaning to the Bootstrap framework, which we&rsquo;ll install and use in <a class="ref" href="filling-in-the-layout.html#sec-custom_css">Section&nbsp;5.1.2</a>.</p>
<p>Inside the <code>header</code> tag, we see a couple of <code>div</code> tags:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar-inner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
</pre></div>
</div>
<p>The <code>div</code> tag is a generic division; it doesn&rsquo;t do anything apart from divide the document into distinct parts. In older-style HTML, <code>div</code> tags are used for nearly all site divisions, but HTML5 adds the <code>header</code>, <code>nav</code>, and <code>section</code> elements for divisions common to many applications. In this case, each <code>div</code> has a CSS class as well. As with the <code>header</code> tag&rsquo;s classes, these classes have special meaning to Bootstrap.</p>
<p>After the divs, we encounter some embedded Ruby:</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;sample app&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s2">&quot;logo&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre></div>
</div>
<p>This uses the Rails helper <code>link_to</code> to create links (which we created directly with the anchor tag&nbsp;<code>a</code> in <a class="ref" href="static-pages.html#sec-passing_title_tests">Section&nbsp;3.3.2</a>); the first argument to <code>link_to</code> is the link text, while the second is the URI. We&rsquo;ll fill in the URIs with <em>named routes</em> in <a class="ref" href="filling-in-the-layout.html#sec-named_routes">Section&nbsp;5.3.3</a>, but for now we use the stub URI <code>&rsquo;#&rsquo;</code> commonly used in web design. The third argument is an options hash, in this case adding the CSS&nbsp;id <code>logo</code> to the sample app link. (The other three links have no options hash, which is fine since it&rsquo;s optional.) Rails helpers often take options hashes in this way, giving us the flexibility to add arbitrary HTML options without ever leaving Rails.</p>
<p>The second element inside the divs is a list of navigation links, made using the <em>unordered list</em> tag <code>ul</code>, together with the <em>list item</em> tag <code>li</code>:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre></div>
</div>
<p>The <code>nav</code> tag, though formally unnecessary here, communicates the purpose of the navigation links. The <code>nav</code> and <code>pull-right</code> classes on the <code>ul</code> tag have special meaning to Bootstrap. Once Rails has processed this layout and evaluated the embedded Ruby, the list looks like this:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Help<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Sign in<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre></div>
</div>
<p>The final part of the layout is a <code>div</code> for the main content:</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="k">yield</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre></div>
</div>
<p>As before, the <code>container</code> class has special meaning to Bootstrap. As we learned in <a class="ref" href="static-pages.html#sec-layouts">Section&nbsp;3.3.4</a>, the <code>yield</code> method inserts the contents of each page into the site layout.</p>
<p>Apart from the site footer, which we&rsquo;ll add in <a class="ref" href="filling-in-the-layout.html#sec-partials">Section&nbsp;5.1.3</a>, our layout is now complete, and we can look at the results by visiting the Home page. To take advantage of the upcoming style elements, we&rsquo;ll add some extra elements to
the <code>home.html.erb</code> view (<a class="ref" href="filling-in-the-layout.html#code-signup_button">Listing&nbsp;5.2</a>).</p>
<div class="label" id="code-signup_button"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.2.</span> <span class="description">The Home page with a link to the signup page. <br /> <code>app/views/static_pages/home.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;center hero-unit&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Welcome to the Sample App<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>
This is the home page for the
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://railstutorial.org/&quot;</span><span class="nt">&gt;</span>Ruby on Rails Tutorial<span class="nt">&lt;/a&gt;</span>
sample application.
<span class="nt">&lt;/h2&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign up now!&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span><span class="p">,</span> <span class="ss">class:</span> <span class="s2">&quot;btn btn-large btn-primary&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="n">image_tag</span><span class="p">(</span><span class="s2">&quot;rails.png&quot;</span><span class="p">,</span> <span class="ss">alt:</span> <span class="s2">&quot;Rails&quot;</span><span class="p">),</span> <span class="s1">&#39;http://rubyonrails.org/&#39;</span> <span class="cp">%&gt;</span>
</pre></div>
</div></div>
<p>In preparation for adding users to our site in <a class="ref" href="sign-up.html#top">Chapter&nbsp;7</a>, the first <code>link_to</code> creates a stub link of the form</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-large btn-primary&quot;</span><span class="nt">&gt;</span>Sign up now!<span class="nt">&lt;/a&gt;</span>
</pre></div>
</div>
<p>In the <code>div</code> tag, the <code>hero-unit</code> CSS class has a special meaning to Bootstrap, as do the <code>btn</code>, <code>btn-large</code>, and <code>btn-primary</code> classes in the signup button.</p>
<p>The second <code>link_to</code> shows off the <code>image_tag</code> helper, which takes as arguments the path to an image and an optional options hash, in this case setting the <code>alt</code> attribute of the image tag using symbols. To make this clearer, let&rsquo;s look at the HTML this tag produces:<sup class="footnote" id="fnref-5_4"><a href="#fn-5_4">4</a></sup></p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">&quot;Rails&quot;</span> <span class="na">src=</span><span class="s">&quot;/assets/rails.png&quot;</span> <span class="nt">/&gt;</span>
</pre></div>
</div>
<p>The <code>alt</code> attribute is what will be displayed if there is no image, and it is also what will be displayed by screen readers for the visually impaired. Although people are sometimes sloppy about including the <code>alt</code> attribute for images, it is in fact required by the HTML standard. Luckily, Rails includes a default <code>alt</code> attribute; if you don&rsquo;t specify the attribute in the call to <code>image_tag</code>, Rails just uses the image filename (minus extension). In this case, though, we&rsquo;ve set the <code>alt</code> text explicitly in order to capitalize &ldquo;Rails&rdquo;.</p>
<p>Now we&rsquo;re finally ready to see the fruits of our labors (<a class="ref" href="filling-in-the-layout.html#fig-layout_no_logo_or_custom_css">Figure&nbsp;5.2</a>). Pretty underwhelming, you say? Perhaps so. Happily, though, we&rsquo;ve done a good job of giving our HTML elements sensible classes, which puts us in a great position to add style to the site with CSS.</p>
<p>By the way, you might be surprised to discover that the <code>rails.png</code> image actually exists. Where did it come from? It&rsquo;s included for free with every new Rails application, and you will find it in <code>app/assets/images/rails.png</code>. Because we used the <code>image_tag</code> helper, Rails finds it automatically using the asset pipeline (<a class="ref" href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline">Section&nbsp;5.2</a>).</p>
<div class="label" id="fig-layout_no_logo_or_custom_css"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/layout_no_logo_or_custom_css_bootstrap.png" alt="layout_no_logo_or_custom_css_bootstrap" /></span></div><div class="caption"><span class="header">Figure 5.2: </span><span class="description">The Home page (<a href="http://localhost:3000/static_pages/home">/static_pages/home</a>) with no custom CSS.&nbsp;<a href="http://railstutorial.org/images/figures/layout_no_logo_or_custom_css_bootstrap-full.png">(full size)</a></span></div></div>
<div class="label" id="sec-custom_css"></div>
<h3><a id="sec-5_1_2" href="filling-in-the-layout.html#sec-custom_css" class="heading"><span class="number">5.1.2</span> Bootstrap and custom CSS</a></h3>
<p>In <a class="ref" href="filling-in-the-layout.html#sec-adding_to_the_layout">Section&nbsp;5.1.1</a>, we associated many of the HTML elements with CSS classes, which gives us considerable flexibility in constructing a layout based on CSS. As noted in <a class="ref" href="filling-in-the-layout.html#sec-adding_to_the_layout">Section&nbsp;5.1.1</a>, many of these classes are specific to <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>, a framework from Twitter that makes it easy to add nice web design and user interface elements to an HTML5 application. In this section, we&rsquo;ll combine Bootstrap with some custom CSS rules to start adding some style to the sample application.</p>
<p>Our first step is to add Bootstrap, which in Rails applications can be accomplished with the <tt>bootstrap-sass</tt> gem, as shown in <a class="ref" href="filling-in-the-layout.html#code-bootstrap_sass">Listing&nbsp;5.3</a>. The Bootstrap framework natively uses the <a href="http://lesscss.org/">LESS CSS</a> language for making dynamic stylesheets, but the Rails asset pipeline supports the (very similar) Sass language by default (<a class="ref" href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline">Section&nbsp;5.2</a>), so <tt>bootstrap-sass</tt> converts LESS to Sass and makes all the necessary Bootstrap files available to the current application.<sup class="footnote" id="fnref-5_5"><a href="#fn-5_5">5</a></sup></p>
<div class="label" id="code-bootstrap_sass"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.3.</span> <span class="description">Adding the <tt>bootstrap-sass</tt> gem to the <code>Gemfile</code>.</span> </div>
<div class="code"><div class="highlight"><pre><span class="n">source</span> <span class="s1">&#39;https://rubygems.org&#39;</span>
<span class="n">gem</span> <span class="s1">&#39;rails&#39;</span><span class="p">,</span> <span class="s1">&#39;3.2.8&#39;</span>
<span class="n">gem</span> <span class="s1">&#39;bootstrap-sass&#39;</span><span class="p">,</span> <span class="s1">&#39;2.0.4&#39;</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
</pre></div>
</div></div>
<p>To install Bootstrap, we run <code>bundle install</code> as usual:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle install
</pre></div>
</div>
<p>Then restart the web server to incorporate the changes into the development application. (On most systems, restarting the server will involve pressing <tt>Ctrl-C</tt> and then running <code>rails server</code>.)</p>
<p>The first step in adding custom CSS to our application is to create a file to contain it:</p>
<div class="code"><div class="highlight"><pre><span class="go">app/assets/stylesheets/custom.css.scss</span>
</pre></div>
</div>
<p>(Use your text editor or IDE to create the new file.) Here both the directory name and filename are important. The directory</p>
<div class="code"><div class="highlight"><pre><span class="go">app/assets/stylesheets</span>
</pre></div>
</div>
<p>is part of the asset pipeline (<a class="ref" href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline">Section&nbsp;5.2</a>), and any stylesheets in this directory will automatically be included as part of the <code>application.css</code> file included in the site layout. Furthermore, the filename <code>custom.css.scss</code> includes the <code>.css</code> extension, which indicates a CSS file, and the <code>.scss</code> extension, which indicates a &ldquo;Sassy CSS&rdquo; file and arranges for the asset pipeline to process the file using Sass. (We won&rsquo;t be using Sass until <a class="ref" href="filling-in-the-layout.html#sec-sass">Section&nbsp;5.2.2</a>, but it&rsquo;s needed now for the <tt>bootstrap-sass</tt> gem to work its magic.)</p>
<p>After creating the file for custom CSS, we can use the <code>@import</code> function to include Bootstrap, as shown in <a class="ref" href="filling-in-the-layout.html#code-bootstrap_css">Listing&nbsp;5.4</a>.</p>
<div class="label" id="code-bootstrap_css"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.4.</span> <span class="description">Adding Bootstrap CSS. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">@import</span> <span class="s2">&quot;bootstrap&quot;</span><span class="p">;</span>
</pre></div>
</div></div>
<p>This one line includes the entire Bootstrap CSS framework, with the result shown in in <a class="ref" href="filling-in-the-layout.html#fig-sample_app_only_bootstrap">Figure&nbsp;5.3</a>. (You may have to use <tt>Ctrl-C</tt> restart the local web server.) The placement of the text isn&rsquo;t good and the logo doesn&rsquo;t have any style, but the colors and signup button look promising.</p>
<div class="label" id="fig-sample_app_only_bootstrap"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/sample_app_only_bootstrap.png" alt="sample_app_only_bootstrap" /></span></div><div class="caption"><span class="header">Figure 5.3: </span><span class="description">The sample application with Bootstrap CSS.&nbsp;<a href="http://railstutorial.org/images/figures/sample_app_only_bootstrap-full.png">(full size)</a></span></div></div>
<p>Next we&rsquo;ll add some CSS that will be used site-wide for styling the layout and each individual page, as shown in <a class="ref" href="filling-in-the-layout.html#code-universal_css">Listing&nbsp;5.5</a>. There are quite a few rules in <a class="ref" href="filling-in-the-layout.html#code-universal_css">Listing&nbsp;5.5</a>; to get a sense of what a CSS rule does, it&rsquo;s often helpful to comment it out using CSS comments, i.e., by putting it inside <code>/* &hellip; */</code>, and seeing what changes.
The result of the CSS in <a class="ref" href="filling-in-the-layout.html#code-universal_css">Listing&nbsp;5.5</a> is shown in <a class="ref" href="filling-in-the-layout.html#fig-sample_app_universal">Figure&nbsp;5.4</a>.</p>
<div class="label" id="code-universal_css"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.5.</span> <span class="description">Adding CSS for some universal styling applying to all pages. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">@import</span> <span class="s2">&quot;bootstrap&quot;</span><span class="p">;</span>
<span class="cm">/* universal */</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="na">overflow-y</span><span class="o">:</span> <span class="no">scroll</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span> <span class="p">{</span>
<span class="na">overflow</span><span class="o">:</span> <span class="no">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">textarea</span> <span class="p">{</span>
<span class="na">resize</span><span class="o">:</span> <span class="n">vertical</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.center</span> <span class="p">{</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.center</span> <span class="nt">h1</span> <span class="p">{</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div></div>
<div class="label" id="fig-sample_app_universal"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/sample_app_universal.png" alt="sample_app_universal" /></span></div><div class="caption"><span class="header">Figure 5.4: </span><span class="description">Adding some spacing and other universal styling.&nbsp;<a href="http://railstutorial.org/images/figures/sample_app_universal-full.png">(full size)</a></span></div></div>
<p>Note that the CSS in <a class="ref" href="filling-in-the-layout.html#code-universal_css">Listing&nbsp;5.5</a> has a consistent form. In general, CSS rules refer either to a class, an id, an HTML tag, or some combination thereof, followed by a list of styling commands. For example,</p>
<div class="code"><div class="highlight"><pre><span class="nt">body</span> <span class="p">{</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>puts 60&nbsp;pixels of padding at the top of the page. Because of the <code>navbar-fixed-top</code> class in the <code>header</code> tag, Bootstrap fixes the navigation bar to the top of the page, so the padding serves to separate the main text from the navigation. Meanwhile, the CSS in the rule</p>
<div class="code"><div class="highlight"><pre><span class="nc">.center</span> <span class="p">{</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>associates the <code>center</code> class with the <code>text-align: center</code> property. In other words, the dot <code>.</code> in <code>.center</code> indicates that the rule styles a class. (As we&rsquo;ll see in <a class="ref" href="filling-in-the-layout.html#code-logo_css">Listing&nbsp;5.7</a>, the pound sign <code>#</code> identifies a rule to style a CSS <em>id</em>.) This means that elements inside any tag (such as a <code>div</code>) with class <code>center</code> will be centered on the page. (We saw an example of this class in <a class="ref" href="filling-in-the-layout.html#code-signup_button">Listing&nbsp;5.2</a>.)</p>
<p>Although Bootstrap comes with CSS rules for nice typography, we&rsquo;ll also add some custom rules for the appearance of the text on our site, as shown in <a class="ref" href="filling-in-the-layout.html#code-typography_css">Listing&nbsp;5.6</a>. (Not all of these rules apply to the Home page, but each rule here will be used at some point in the sample application.) The result of <a class="ref" href="filling-in-the-layout.html#code-typography_css">Listing&nbsp;5.6</a> is shown in <a class="ref" href="filling-in-the-layout.html#fig-sample_app_typography">Figure&nbsp;5.5</a>.</p>
<div class="label" id="code-typography_css"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.6.</span> <span class="description">Adding CSS for nice typography. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">@import</span> <span class="s2">&quot;bootstrap&quot;</span><span class="p">;</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="o">/*</span> <span class="nt">typography</span> <span class="o">*/</span>
<span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-2</span><span class="kt">px</span><span class="p">;</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">normal</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.1</span><span class="kt">em</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div></div>
<div class="label" id="fig-sample_app_typography"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/sample_app_typography.png" alt="sample_app_typography" /></span></div><div class="caption"><span class="header">Figure 5.5: </span><span class="description">Adding some typographic styling.&nbsp;<a href="http://railstutorial.org/images/figures/sample_app_typography-full.png">(full size)</a></span></div></div>
<p>Finally, we&rsquo;ll add some rules to style the site&rsquo;s logo, which simply consists of the text &ldquo;sample app&rdquo;. The CSS in <a class="ref" href="filling-in-the-layout.html#code-logo_css">Listing&nbsp;5.7</a> converts the text to uppercase and modifies its size, color, and placement. (We&rsquo;ve used a CSS&nbsp;id because we expect the site logo to appear on the page only once, but you could use a class instead.)</p>
<div class="label" id="code-logo_css"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.7.</span> <span class="description">Adding CSS for the site logo. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">@import</span> <span class="s2">&quot;bootstrap&quot;</span><span class="p">;</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="o">/*</span> <span class="nt">header</span> <span class="o">*/</span>
<span class="nn">#logo</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-right</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-transform</span><span class="o">:</span> <span class="no">uppercase</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">bold</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#logo</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-decoration</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div></div>
<p>Here <code>color: #fff</code> changes the color of the logo to white. HTML colors can be coded with three pairs of base-16 (hexadecimal) numbers, one each for the primary colors red, green, and blue (in that order). The code <code>#ffffff</code> maxes out all three colors, yielding pure white, and <code>#fff</code> is a shorthand for the full <code>#ffffff</code>. The CSS standard also defines a large number of synonyms for common <a href="http://www.w3schools.com/html/html_colornames.asp">HTML colors</a>, including <code>white</code> for <code>#fff</code>. The result of the CSS in <a class="ref" href="filling-in-the-layout.html#code-logo_css">Listing&nbsp;5.7</a> is shown in <a class="ref" href="filling-in-the-layout.html#fig-sample_app_logo">Figure&nbsp;5.6</a>.</p>
<div class="label" id="fig-sample_app_logo"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/sample_app_logo.png" alt="sample_app_logo" /></span></div><div class="caption"><span class="header">Figure 5.6: </span><span class="description">The sample app with nicely styled logo.&nbsp;<a href="http://railstutorial.org/images/figures/sample_app_logo-full.png">(full size)</a></span></div></div>
<div class="label" id="sec-partials"></div>
<h3><a id="sec-5_1_3" href="filling-in-the-layout.html#sec-partials" class="heading"><span class="number">5.1.3</span> Partials</a></h3>
<p>Although the layout in <a class="ref" href="filling-in-the-layout.html#code-layout_new_structure">Listing&nbsp;5.1</a> serves its purpose, it&rsquo;s getting a little cluttered. The HTML shim takes up three lines and uses weird IE-specific syntax, so it would be nice to tuck it away somewhere on its own. In addition, the header HTML forms a logical unit, so it should all be packaged up in one place. The way to achieve this in Rails is to use a facility called <em>partials</em>. Let&rsquo;s first take a look at what the layout looks like after the partials are defined (<a class="ref" href="filling-in-the-layout.html#code-layout_with_partials">Listing&nbsp;5.8</a>).</p>
<div class="label" id="code-layout_with_partials"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.8.</span> <span class="description">The site layout with partials for the stylesheets and header. <br /> <code>app/views/layouts/application.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span><span class="cp">&lt;%=</span> <span class="n">full_title</span><span class="p">(</span><span class="k">yield</span><span class="p">(</span><span class="ss">:title</span><span class="p">))</span> <span class="cp">%&gt;</span><span class="nt">&lt;/title&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">stylesheet_link_tag</span> <span class="s2">&quot;application&quot;</span><span class="p">,</span> <span class="ss">media:</span> <span class="s2">&quot;all&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">javascript_include_tag</span> <span class="s2">&quot;application&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">csrf_meta_tags</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/shim&#39;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/header&#39;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="k">yield</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre></div>
</div></div>
<p>In <a class="ref" href="filling-in-the-layout.html#code-layout_with_partials">Listing&nbsp;5.8</a>, we&rsquo;ve replaced the HTML shim stylesheet lines with a single call to a Rails helper called <code>render</code>:</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/shim&#39;</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>The effect of this line is to look for a file called <code>app/views/layouts/_shim.html.erb</code>, evaluate its contents, and insert the results into the view.<sup class="footnote" id="fnref-5_6"><a href="#fn-5_6">6</a></sup> (Recall that <tt class="verb">&lt;%= ... %&gt;</tt> is the embedded Ruby syntax needed to evaluate a Ruby expression and then insert the results into the template.) Note the leading underscore on the filename <code>_shim.html.erb</code>; this underscore is the universal convention for naming partials, and among other things makes it possible to identify all the partials in a directory at a glance.</p>
<p>Of course, to get the partial to work, we have to fill it with some content; in the case of the shim partial, this is just the three lines of shim code from <a class="ref" href="filling-in-the-layout.html#code-layout_new_structure">Listing&nbsp;5.1</a>; the result appears in <a class="ref" href="filling-in-the-layout.html#code-stylesheets_partial">Listing&nbsp;5.9</a>.</p>
<div class="label" id="code-stylesheets_partial"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.9.</span> <span class="description">A partial for the HTML shim. <br /> <code>app/views/layouts/_shim.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="c">&lt;!--[if lt IE 9]&gt;</span>
<span class="c">&lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;</span>
<span class="c">&lt;![endif]--&gt;</span>
</pre></div>
</div></div>
<p>Similarly, we can move the header material into the partial shown in <a class="ref" href="filling-in-the-layout.html#code-header_partial">Listing&nbsp;5.10</a> and insert it into the layout with another call to <code>render</code>.</p>
<div class="label" id="code-header_partial"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.10.</span> <span class="description">A partial for the site header. <br /> <code>app/views/layouts/_header.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar-inner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;sample app&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s2">&quot;logo&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre></div>
</div></div>
<p>Now that we know how to make partials, let&rsquo;s add a site footer to go along with the header. By now you can probably guess that we&rsquo;ll call it <code>_footer.html.erb</code> and put it in the layouts directory (<a class="ref" href="filling-in-the-layout.html#code-footer_partial">Listing&nbsp;5.11</a>).<sup class="footnote" id="fnref-5_7"><a href="#fn-5_7">7</a></sup></p>
<div class="label" id="code-footer_partial"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.11.</span> <span class="description">A partial for the site footer. <br /> <code>app/views/layouts/_footer.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;footer</span> <span class="na">class=</span><span class="s">&quot;footer&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;small&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://railstutorial.org/&quot;</span><span class="nt">&gt;</span>Rails Tutorial<span class="nt">&lt;/a&gt;</span>
by Michael Hartl
<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;About&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Contact&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://news.railstutorial.org/&quot;</span><span class="nt">&gt;</span>News<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</pre></div>
</div></div>
<p>As with the header, in the footer we&rsquo;ve used <code>link_to</code> for the internal links to the About and Contact pages and stubbed out the URIs with <code>&rsquo;#&rsquo;</code> for now. (As with <code>header</code>, the <code>footer</code> tag is new in HTML5.)</p>
<p>We can render the footer partial in the layout by following the same pattern as the stylesheets and header partials (<a class="ref" href="filling-in-the-layout.html#code-layout_with_footer">Listing&nbsp;5.12</a>).</p>
<div class="label" id="code-layout_with_footer"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.12.</span> <span class="description">The site layout with a footer partial. <br /> <code>app/views/layouts/application.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span><span class="cp">&lt;%=</span> <span class="n">full_title</span><span class="p">(</span><span class="k">yield</span><span class="p">(</span><span class="ss">:title</span><span class="p">))</span> <span class="cp">%&gt;</span><span class="nt">&lt;/title&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">stylesheet_link_tag</span> <span class="s2">&quot;application&quot;</span><span class="p">,</span> <span class="ss">media:</span> <span class="s2">&quot;all&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">javascript_include_tag</span> <span class="s2">&quot;application&quot;</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">csrf_meta_tags</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/shim&#39;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/header&#39;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="k">yield</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s1">&#39;layouts/footer&#39;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre></div>
</div></div>
<p>Of course, the footer will be ugly without some styling (<a class="ref" href="filling-in-the-layout.html#code-footer_css">Listing&nbsp;5.13</a>). The results appear in <a class="ref" href="filling-in-the-layout.html#fig-site_with_footer">Figure&nbsp;5.7</a>.</p>
<div class="label" id="code-footer_css"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.13.</span> <span class="description">Adding the CSS for the site footer. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="o">/*</span> <span class="nt">footer</span> <span class="o">*/</span>
<span class="nt">footer</span> <span class="p">{</span>
<span class="na">margin-top</span><span class="o">:</span> <span class="mi">45</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<span class="na">border-top</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="mh">#eaeaea</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span> <span class="nt">a</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#555</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#222</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span> <span class="nt">small</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span> <span class="nt">ul</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">right</span><span class="p">;</span>
<span class="na">list-style</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">footer</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-left</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div></div>
<div class="label" id="fig-site_with_footer"></div>
<div class="figure"><div class="center"><span class="graphic"><img src="images/figures/site_with_footer_bootstrap.png" alt="site_with_footer_bootstrap" /></span></div><div class="caption"><span class="header">Figure 5.7: </span><span class="description">The Home page (<a href="http://localhost:3000/static_pages/home">/static_pages/home</a>) with an added footer.&nbsp;<a href="http://railstutorial.org/images/figures/site_with_footer_bootstrap-full.png">(full size)</a></span></div></div>
<div class="label" id="sec-sass_and_the_asset_pipeline"></div>
<h2><a id="sec-5_2" href="filling-in-the-layout.html#sec-sass_and_the_asset_pipeline" class="heading"><span class="number">5.2</span> Sass and the asset pipeline</a></h2>
<p>One of the most notable differences between Rails&nbsp;3.0 and more recent versions is the asset pipeline, which significantly improves the production and management of static assets such as CSS, JavaScript, and images. This section gives a high-level overview of the asset pipeline and then shows how to use a remarkable tool for making CSS called <em>Sass</em>, now included by default as part of the asset pipeline.</p>
<div class="label" id="sec-the_asset_pipeline"></div>
<h3><a id="sec-5_2_1" href="filling-in-the-layout.html#sec-the_asset_pipeline" class="heading"><span class="number">5.2.1</span> The asset pipeline</a></h3>
<p>The asset pipeline involves lots of changes under Rails&rsquo; hood, but from the perspective of a typical Rails developer there are three principal features to understand: asset directories, manifest files, and preprocessor engines.<sup class="footnote" id="fnref-5_8"><a href="#fn-5_8">8</a></sup> Let&rsquo;s consider each in turn.</p>
<h4><a id="sec-5_2_1_1" href="filling-in-the-layout.html#sec-5_2_1_1" class="heading">Asset directories</a></h4>
<p>In versions of Rails before 3.0 (including 3.0 itself), static assets lived in the <code>public/</code> directory, as follows:</p>
<ul>
<li><code>public/stylesheets</code></li>
<li><code>public/javascripts</code></li>
<li><code>public/images</code></li>
</ul>
<p>Files in these directories are (even post-3.0) automatically served up via requests to http://example.com/stylesheets, etc.</p>
<p>Starting in Rails 3.1, there are <em>three</em> canonical directories for static assets, each with its own purpose:</p>
<ul>
<li><code>app/assets</code>: assets specific to the present application</li>
<li><code>lib/assets</code>: assets for libraries written by your dev team</li>
<li><code>vendor/assets</code>: assets from third-party vendors</li>
</ul>
<p>As you might guess, each of these directories has a subdirectory for each asset class, e.g.,</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> ls app/assets/
<span class="go">images javascripts stylesheets</span>
</pre></div>
</div>
<p>At this point, we&rsquo;re in a position to understand the motivation behind the location of the <code>custom.css.scss</code> file in <a class="ref" href="filling-in-the-layout.html#sec-custom_css">Section&nbsp;5.1.2</a>: <code>custom.css.scss</code> is specific to the sample application, so it goes in <code>app/assets/stylesheets</code>.</p>
<h4><a id="sec-5_2_1_2" href="filling-in-the-layout.html#sec-5_2_1_2" class="heading">Manifest files</a></h4>
<p>Once you&rsquo;ve placed your assets in their logical locations, you can use <em>manifest files</em> to tell Rails (via the <a href="https://github.com/sstephenson/sprockets">Sprockets</a> gem) how to combine them to form single files. (This applies to CSS and JavaScript but not to images.) As an example, let&rsquo;s take a look at the default manifest file for app stylesheets (<a class="ref" href="filling-in-the-layout.html#code-app_css_manifest">Listing&nbsp;5.14</a>).</p>
<div class="label" id="code-app_css_manifest"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.14.</span> <span class="description">The manifest file for app-specific CSS. <br /> <code>app/assets/stylesheets/application.css</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="cm">/*</span>
<span class="cm"> * This is a manifest file that&#39;ll automatically include all the stylesheets</span>
<span class="cm"> * available in this directory and any sub-directories. You&#39;re free to add</span>
<span class="cm"> * application-wide styles to this file and they&#39;ll appear at the top of the</span>
<span class="cm"> * compiled file, but it&#39;s generally better to create a new file per style </span>
<span class="cm"> * scope.</span>
<span class="cm"> *= require_self</span>
<span class="cm"> *= require_tree . </span>
<span class="cm">*/</span>
</pre></div>
</div></div>
<p>The key lines here are actually CSS comments, but they are used by Sprockets to include the proper files:</p>
<div class="code"><div class="highlight"><pre><span class="cm">/*</span>
<span class="cm"> .</span>
<span class="cm"> .</span>
<span class="cm"> .</span>
<span class="cm"> *= require_self</span>
<span class="cm"> *= require_tree . </span>
<span class="cm">*/</span>
</pre></div>
</div>
<p>Here</p>
<div class="code"><div class="highlight"><pre><span class="go">*= require_tree .</span>
</pre></div>
</div>
<p>ensures that all CSS files in the <code>app/assets/stylesheets</code> directory (including the tree subdirectories) are included into the application CSS. The line</p>
<div class="code"><div class="highlight"><pre><span class="go">*= require_self</span>
</pre></div>
</div>
<p>ensures that CSS in <code>application.css</code> is also included.</p>
<p>Rails comes with sensible default manifest files, and in the <em>Rails Tutorial</em> we won&rsquo;t need to make any changes, but the <a href="http://guides.rubyonrails.org/asset_pipeline.html">Rails Guides entry on the asset pipeline</a> has more detail if you need it.</p>
<h4><a id="sec-5_2_1_3" href="filling-in-the-layout.html#sec-5_2_1_3" class="heading">Preprocessor engines</a></h4>
<p>After you&rsquo;ve assembled your assets, Rails prepares them for the site template by running them through several preprocessing engines and using the manifest files to combine them for delivery to the browser. We tell Rails which processor to use using filename extensions; the three most common cases are <code>.scss</code> for Sass, <code>.coffee</code> for CoffeeScript, and <code>.erb</code> for embedded Ruby (ERb). We first covered ERb in <a class="ref" href="static-pages.html#sec-embedded_ruby">Section&nbsp;3.3.3</a>, and cover Sass in <a class="ref" href="filling-in-the-layout.html#sec-sass">Section&nbsp;5.2.2</a>. We won&rsquo;t be needing CoffeeScript in this tutorial, but it&rsquo;s an elegant little language that compiles to JavaScript. (The <a href="http://railscasts.com/episodes/267-coffeescript-basics">RailsCast on CoffeeScript basics</a> is a good place to start.)</p>
<p>The preprocessor engines can be chained, so that</p>
<p><code>foobar.js.coffee</code></p>
<p>gets run through the CoffeeScript processor, and</p>
<p><code>foobar.js.erb.coffee</code></p>
<p>gets run through both CoffeeScript and ERb (with the code running from right to left, i.e., CoffeeScript first).</p>
<h4><a id="sec-5_2_1_4" href="filling-in-the-layout.html#sec-5_2_1_4" class="heading">Efficiency in production</a></h4>
<p>One of the best things about the asset pipeline is that it automatically results in assets that are optimized to be efficient in a production application. Traditional methods for organizing CSS and JavaScript involve splitting functionality into separate files and using nice formatting (with lots of indentation). While convenient for the programmer, this is inefficient in production; including multiple full-sized files can significantly slow page-load times (one of the most important factors affecting the quality of the user experience). With the asset pipeline, in production all the application stylesheets get rolled into one CSS file (<code>application.css</code>), all the application JavaScript code gets rolled into one JavaScript file (<code>javascripts.js</code>), and all such files (including those in <code>lib/assets</code> and <code>vendor/assets</code>) are <em>minified</em> to remove the unnecessary whitespace that bloats file size. As a result, we get the best of both worlds: multiple nicely formatted files for programmer convenience, with single optimized files in production.</p>
<div class="label" id="sec-sass"></div>
<h3><a id="sec-5_2_2" href="filling-in-the-layout.html#sec-sass" class="heading"><span class="number">5.2.2</span> Syntactically awesome stylesheets</a></h3>
<p><em>Sass</em> is a language for writing stylesheets that improves on CSS in many ways. In this section, we cover two of the most important improvements, <em>nesting</em> and <em>variables</em>. (A third technique, <em>mixins</em>, is introduced in <a class="ref" href="sign-up.html#sec-rails_environments">Section&nbsp;7.1.1</a>.)</p>
<p>As noted briefly in <a class="ref" href="filling-in-the-layout.html#sec-custom_css">Section&nbsp;5.1.2</a>, Sass supports a format called SCSS (indicated with a <code>.scss</code> filename extension), which is a strict superset of CSS itself; that is, SCSS only <em>adds</em> features to CSS, rather than defining an entirely new syntax.<sup class="footnote" id="fnref-5_9"><a href="#fn-5_9">9</a></sup> This means that every valid CSS file is also a valid SCSS file, which is convenient for projects with existing style rules. In our case, we used SCSS from the start in order to take advantage of Bootstrap. Since the Rails asset pipeline automatically uses Sass to process files with the <code>.scss</code> extension, the <code>custom.css.scss</code> file will be run through the Sass preprocessor before being packaged up for delivery to the browser.</p>
<h4><a id="sec-5_2_2_1" href="filling-in-the-layout.html#sec-5_2_2_1" class="heading">Nesting</a></h4>
<p>A common pattern in stylesheets is having rules that apply to nested elements. For example, in <a class="ref" href="filling-in-the-layout.html#code-universal_css">Listing&nbsp;5.5</a> we have rules both for <code>.center</code> and for <code>.center h1</code>:</p>
<div class="code"><div class="highlight"><pre><span class="nc">.center</span> <span class="p">{</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.center</span> <span class="nt">h1</span> <span class="p">{</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>We can replace this in Sass with</p>
<div class="code"><div class="highlight"><pre><span class="nc">.center</span> <span class="p">{</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Here the nested <code>h1</code> rule automatically inherits the <code>.center</code> context.</p>
<p>There&rsquo;s a second candidate for nesting that requires a slightly different syntax. In <a class="ref" href="filling-in-the-layout.html#code-logo_css">Listing&nbsp;5.7</a>, we have the code</p>
<div class="code"><div class="highlight"><pre><span class="nn">#logo</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-right</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-transform</span><span class="o">:</span> <span class="no">uppercase</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">bold</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#logo</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-decoration</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Here the logo id <code>#logo</code> appears twice, once by itself and once with the <code>hover</code> attribute (which controls its appearance when the mouse pointer hovers over the element in question). In order to nest the second rule, we need to reference the parent element <code>#logo</code>; in SCSS, this is accomplished with the ampersand character&nbsp;<code>&amp;</code> as follows:</p>
<div class="code"><div class="highlight"><pre><span class="nn">#logo</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-right</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-transform</span><span class="o">:</span> <span class="no">uppercase</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">bold</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
<span class="na">text-decoration</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Sass changes <code>&amp;:hover</code> into <code>#logo:hover</code> as part of converting from SCSS to CSS.</p>
<p>Both of these nesting techniques apply to the footer CSS in <a class="ref" href="filling-in-the-layout.html#code-footer_css">Listing&nbsp;5.13</a>, which can be transformed into the following:</p>
<div class="code"><div class="highlight"><pre><span class="nt">footer</span> <span class="p">{</span>
<span class="na">margin-top</span><span class="o">:</span> <span class="mi">45</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<span class="na">border-top</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="mh">#eaeaea</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#555</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#222</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt">small</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">ul</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">right</span><span class="p">;</span>
<span class="na">list-style</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="nt">li</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-left</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Converting <a class="ref" href="filling-in-the-layout.html#code-footer_css">Listing&nbsp;5.13</a> by hand is a good exercise, and you should verify that the CSS still works properly after the conversion.</p>
<h4><a id="sec-5_2_2_2" href="filling-in-the-layout.html#sec-5_2_2_2" class="heading">Variables</a></h4>
<p>Sass allows us to define <em>variables</em> to eliminate duplication and write more expressive code. For example, looking at <a class="ref" href="filling-in-the-layout.html#code-typography_css">Listing&nbsp;5.6</a> and <a class="ref" href="filling-in-the-layout.html#code-footer_css">Listing&nbsp;5.13</a>, we see that there are repeated references to the same color:</p>
<div class="code"><div class="highlight"><pre><span class="nt">h2</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nt">footer</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>In this case, <code>#999</code> is a light gray, and we can give it a name by defining a variable as follows:</p>
<div class="code"><div class="highlight"><pre><span class="nv">$lightGray</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
</pre></div>
</div>
<p>This allows us to rewrite our SCSS like this:</p>
<div class="code"><div class="highlight"><pre><span class="nv">$lightGray</span><span class="o">:</span> <span class="mh">#999</span><span class="p">;</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$lightGray</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nt">footer</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$lightGray</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Because variable names such as <code>$lightGray</code> are more descriptive than <code>#999</code>, it&rsquo;s often useful to define variables even for values that aren&rsquo;t repeated. Indeed, the Bootstrap framework defines a large number of variables for colors, available online on the <a href="http://bootstrapdocs.com/v2.0.4/docs/less.html">Bootstrap page of LESS variables</a>. That page defines variables using LESS, not Sass, but the <tt>bootstrap-sass</tt> gem provides the Sass equivalents. It is not difficult to guess the correspondence; where LESS uses an &ldquo;at&rdquo; sign&nbsp;<code>@</code>, Sass uses a dollar sign&nbsp;<code>$</code>. Looking the Bootstrap variable page, we see that there is a variable for light gray:</p>
<div class="code"><div class="highlight"><pre> <span class="k">@grayLight</span><span class="nd">:</span> <span class="nn">#999</span><span class="o">;</span>
</pre></div>
</div>
<p>This means that, via the <tt>bootstrap-sass</tt> gem, there should be a corresponding SCSS variable <code>$grayLight</code>. We can use this to replace our custom variable, <code>$lightGray</code>, which gives</p>
<div class="code"><div class="highlight"><pre><span class="nt">h2</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$grayLight</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nc">.</span>
<span class="nt">footer</span> <span class="p">{</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">.</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$grayLight</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Applying the Sass nesting and variable definition features to the full SCSS file gives the file in <a class="ref" href="filling-in-the-layout.html#code-refactored_scss">Listing&nbsp;5.15</a>. This uses both Sass variables (as inferred from the Bootstrap LESS variable page) and built-in named colors (i.e., <code>white</code> for <code>#fff</code>). Note in particular the dramatic improvement in the rules for the <code>footer</code> tag.</p>
<div class="label" id="code-refactored_scss"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.15.</span> <span class="description">The initial SCSS file converted to use nesting and variables. <br /> <code>app/assets/stylesheets/custom.css.scss</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">@import</span> <span class="s2">&quot;bootstrap&quot;</span><span class="p">;</span>
<span class="cm">/* mixins, variables, etc. */</span>
<span class="nv">$grayMediumLight</span><span class="o">:</span> <span class="mh">#eaeaea</span><span class="p">;</span>
<span class="cm">/* universal */</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="na">overflow-y</span><span class="o">:</span> <span class="no">scroll</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">section</span> <span class="p">{</span>
<span class="na">overflow</span><span class="o">:</span> <span class="no">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">textarea</span> <span class="p">{</span>
<span class="na">resize</span><span class="o">:</span> <span class="n">vertical</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.center</span> <span class="p">{</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="cm">/* typography */</span>
<span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">3</span><span class="kt">em</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-2</span><span class="kt">px</span><span class="p">;</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">margin-bottom</span><span class="o">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
<span class="na">text-align</span><span class="o">:</span> <span class="no">center</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">normal</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$grayLight</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">p</span> <span class="p">{</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.1</span><span class="kt">em</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* header */</span>
<span class="nn">#logo</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-right</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.7</span><span class="kt">em</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
<span class="na">text-transform</span><span class="o">:</span> <span class="no">uppercase</span><span class="p">;</span>
<span class="na">letter-spacing</span><span class="o">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
<span class="na">font-weight</span><span class="o">:</span> <span class="no">bold</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
<span class="na">text-decoration</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="cm">/* footer */</span>
<span class="nt">footer</span> <span class="p">{</span>
<span class="na">margin-top</span><span class="o">:</span> <span class="mi">45</span><span class="kt">px</span><span class="p">;</span>
<span class="na">padding-top</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
<span class="na">border-top</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nv">$grayMediumLight</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$grayLight</span><span class="p">;</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$gray</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$grayDarker</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt">small</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">ul</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">right</span><span class="p">;</span>
<span class="na">list-style</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="nt">li</span> <span class="p">{</span>
<span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
<span class="na">margin-left</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div></div>
<p>Sass gives us even more ways to simplify our stylesheets, but the code in <a class="ref" href="filling-in-the-layout.html#code-refactored_scss">Listing&nbsp;5.15</a> uses the most important features and gives us a great start. See the <a href="http://sass-lang.com/">Sass website</a> for more details.</p>
<div class="label" id="sec-layout_links"></div>
<h2><a id="sec-5_3" href="filling-in-the-layout.html#sec-layout_links" class="heading"><span class="number">5.3</span> Layout links</a></h2>
<p>Now that we&rsquo;ve finished a site layout with decent styling, it&rsquo;s time to start filling in the links we&rsquo;ve stubbed out with <code>&rsquo;#&rsquo;</code>. Of course, we could hard-code links like</p>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/static_pages/about&quot;</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;</span>
</pre></div>
</div>
<p>but that isn&rsquo;t the Rails Way. For one, it would be nice if the URI for the about page were /about rather than /static_pages/about; moreover, Rails conventionally uses <em>named routes</em>, which involves code like</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;About&quot;</span><span class="p">,</span> <span class="n">about_path</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>This way the code has a more transparent meaning, and it&rsquo;s also more flexible since we can change the definition of <code>about_path</code> and have the URI change everywhere <code>about_path</code> is used.</p>
<p>The full list of our planned links appears in <a class="ref" href="filling-in-the-layout.html#table-url_mapping">Table&nbsp;5.1</a>, along with their mapping to URIs and routes. We&rsquo;ll implement all but the last one by the end of this chapter. (We&rsquo;ll make the last one in <a class="ref" href="sign-in-sign-out.html#top">Chapter&nbsp;8</a>.)</p>
<div class="label" id="table-url_mapping"></div>
<div class="table"><div class="center">
<table class="tabular"><tr><th class="align_left"><strong>Page</strong></th><th class="align_left"><strong>URI</strong></th><th class="align_right"><strong>Named route</strong></th></tr><tr class="top_bar"><td class="align_left">Home</td><td class="align_left">/</td><td class="align_right"><code>root_path</code></td></tr><tr><td class="align_left">About</td><td class="align_left">/about</td><td class="align_right"><code>about_path</code></td></tr><tr><td class="align_left">Help</td><td class="align_left">/help</td><td class="align_right"><code>help_path</code></td></tr><tr><td class="align_left">Contact</td><td class="align_left">/contact</td><td class="align_right"><code>contact_path</code></td></tr><tr><td class="align_left">Sign up</td><td class="align_left">/signup</td><td class="align_right"><code>signup_path</code></td></tr><tr><td class="align_left">Sign in</td><td class="align_left">/signin</td><td class="align_right"><code>signin_path</code></td></tr></table></div><div class="caption"><span class="header">Table 5.1: </span><span class="description">Route and URI mapping for site links.</span></div></div>
<p>Before moving on, let&rsquo;s add a Contact page (left as an exercise in <a class="ref" href="static-pages.html#top">Chapter&nbsp;3</a>). The test appears as in <a class="ref" href="filling-in-the-layout.html#code-contact_page_test">Listing&nbsp;5.16</a>, which simply follows the model last seen in <a class="ref" href="static-pages.html#code-pages_controller_spec_title">Listing&nbsp;3.18</a>. Note that, as in the application code, in <a class="ref" href="filling-in-the-layout.html#code-contact_page_test">Listing&nbsp;5.16</a> we&rsquo;ve switched to Ruby&nbsp;1.9&ndash;style hashes.</p>
<div class="label" id="code-contact_page_test"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.16.</span> <span class="description">Tests for a Contact page. <br /> <code>spec/requests/static_pages_spec.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nb">require</span> <span class="s1">&#39;spec_helper&#39;</span>
<span class="n">describe</span> <span class="s2">&quot;Static pages&quot;</span> <span class="k">do</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="n">describe</span> <span class="s2">&quot;Contact page&quot;</span> <span class="k">do</span>
<span class="n">it</span> <span class="s2">&quot;should have the h1 &#39;Contact&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="s1">&#39;/static_pages/contact&#39;</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;Contact&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should have the title &#39;Contact&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="s1">&#39;/static_pages/contact&#39;</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span>
<span class="ss">text:</span> <span class="s2">&quot;Ruby on Rails Tutorial Sample App | Contact&quot;</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></div>
</div></div>
<p>You should verify that these tests fail:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle <span class="nb">exec </span>rspec spec/requests/static_pages_spec.rb
</pre></div>
</div>
<p>The application code parallels the addition of the About page in <a class="ref" href="static-pages.html#sec-adding_a_page">Section&nbsp;3.2.2</a>: first we update the routes (<a class="ref" href="filling-in-the-layout.html#code-contact_route">Listing&nbsp;5.17</a>), then we add a <code>contact</code> action to the StaticPages controller (<a class="ref" href="filling-in-the-layout.html#code-contact_action">Listing&nbsp;5.18</a>), and finally we create a Contact view (<a class="ref" href="filling-in-the-layout.html#code-contact_view">Listing&nbsp;5.19</a>).</p>
<div class="label" id="code-contact_route"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.17.</span> <span class="description">Adding a route for the Contact page. <br /> <code>config/routes.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="ss">SampleApp::Application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
<span class="n">get</span> <span class="s2">&quot;static_pages/home&quot;</span>
<span class="n">get</span> <span class="s2">&quot;static_pages/help&quot;</span>
<span class="n">get</span> <span class="s2">&quot;static_pages/about&quot;</span>
<span class="n">get</span> <span class="s2">&quot;static_pages/contact&quot;</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="k">end</span>
</pre></div>
</div></div>
<div class="label" id="code-contact_action"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.18.</span> <span class="description">Adding an action for the Contact page. <br /> <code>app/controllers/static_pages_controller.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="k">class</span> <span class="nc">StaticPagesController</span> <span class="o">&lt;</span> <span class="no">ApplicationController</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="k">def</span> <span class="nf">contact</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></div>
</div></div>
<div class="label" id="code-contact_view"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.19.</span> <span class="description">The view for the Contact page. <br /> <code>app/views/static_pages/contact.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%</span> <span class="n">provide</span><span class="p">(</span><span class="ss">:title</span><span class="p">,</span> <span class="s1">&#39;Contact&#39;</span><span class="p">)</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;h1&gt;</span>Contact<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>
Contact Ruby on Rails Tutorial about the sample app at the
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://railstutorial.org/contact&quot;</span><span class="nt">&gt;</span>contact page<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/p&gt;</span>
</pre></div>
</div></div>
<p>Now make sure that the tests pass:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle <span class="nb">exec </span>rspec spec/requests/static_pages_spec.rb
</pre></div>
</div>
<div class="label" id="sec-route_tests"></div>
<h3><a id="sec-5_3_1" href="filling-in-the-layout.html#sec-route_tests" class="heading"><span class="number">5.3.1</span> Route tests</a></h3>
<p>With the work we&rsquo;ve done writing integration test for the static pages, writing tests for the routes is simple: we just replace each occurrence of a hard-coded address with the desired named route from <a class="ref" href="filling-in-the-layout.html#table-url_mapping">Table&nbsp;5.1</a>. In other words, we change</p>
<div class="code"><div class="highlight"><pre><span class="n">visit</span> <span class="s1">&#39;/static_pages/about&#39;</span>
</pre></div>
</div>
<p>to</p>
<div class="code"><div class="highlight"><pre><span class="n">visit</span> <span class="n">about_path</span>
</pre></div>
</div>
<p>and so on for the other pages. The result appears in <a class="ref" href="filling-in-the-layout.html#code-route_tests">Listing&nbsp;5.20</a>.</p>
<div class="label" id="code-route_tests"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.20.</span> <span class="description">Tests for the named routes. <br /> <code>spec/requests/static_pages_spec.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nb">require</span> <span class="s1">&#39;spec_helper&#39;</span>
<span class="n">describe</span> <span class="s2">&quot;Static pages&quot;</span> <span class="k">do</span>
<span class="n">describe</span> <span class="s2">&quot;Home page&quot;</span> <span class="k">do</span>
<span class="n">it</span> <span class="s2">&quot;should have the h1 &#39;Sample App&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">root_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;Sample App&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should have the base title&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">root_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span>
<span class="ss">text:</span> <span class="s2">&quot;Ruby on Rails Tutorial Sample App&quot;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should not have a custom page title&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">root_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should_not</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;| Home&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="n">describe</span> <span class="s2">&quot;Help page&quot;</span> <span class="k">do</span>
<span class="n">it</span> <span class="s2">&quot;should have the h1 &#39;Help&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">help_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;Help&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should have the title &#39;Help&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">help_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span>
<span class="ss">text:</span> <span class="s2">&quot;Ruby on Rails Tutorial Sample App | Help&quot;</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="n">describe</span> <span class="s2">&quot;About page&quot;</span> <span class="k">do</span>
<span class="n">it</span> <span class="s2">&quot;should have the h1 &#39;About&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">about_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;About Us&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should have the title &#39;About Us&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">about_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span>
<span class="ss">text:</span> <span class="s2">&quot;Ruby on Rails Tutorial Sample App | About Us&quot;</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="n">describe</span> <span class="s2">&quot;Contact page&quot;</span> <span class="k">do</span>
<span class="n">it</span> <span class="s2">&quot;should have the h1 &#39;Contact&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">contact_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,</span> <span class="ss">text:</span> <span class="s1">&#39;Contact&#39;</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">&quot;should have the title &#39;Contact&#39;&quot;</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">contact_path</span>
<span class="n">page</span><span class="o">.</span><span class="n">should</span> <span class="n">have_selector</span><span class="p">(</span><span class="s1">&#39;title&#39;</span><span class="p">,</span>
<span class="ss">text:</span> <span class="s2">&quot;Ruby on Rails Tutorial Sample App | Contact&quot;</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></div>
</div></div>
<p>As usual, you should check that the tests are now red:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle <span class="nb">exec </span>rspec spec/requests/static_pages_spec.rb
</pre></div>
</div>
<p>By the way, if the code in <a class="ref" href="filling-in-the-layout.html#code-route_tests">Listing&nbsp;5.20</a> strikes you as repetitive and verbose, you&rsquo;re not alone. We&rsquo;ll refactor this mess into a beautiful jewel in <a class="ref" href="filling-in-the-layout.html#sec-pretty_rspec">Section&nbsp;5.3.4</a>.</p>
<div class="label" id="sec-rails_routes"></div>
<h3><a id="sec-5_3_2" href="filling-in-the-layout.html#sec-rails_routes" class="heading"><span class="number">5.3.2</span> Rails routes</a></h3>
<p>Now that we have tests for the URIs we want, it&rsquo;s time to get them to work. As noted in <a class="ref" href="static-pages.html#sec-static_pages_with_rails">Section&nbsp;3.1.2</a>, the file Rails uses for URI mappings is <code>config/routes.rb</code>. If you take a look at the default routes file, you&rsquo;ll see that it&rsquo;s quite a mess, but it&rsquo;s a useful mess&mdash;full of commented-out example route mappings. I suggest reading through it at some point, and I also suggest taking a look at the <a href="http://guides.rubyonrails.org/routing.html">Rails Guides article &ldquo;Rails Routing from the outside in&rdquo;</a> for a much more in-depth treatment of routes.</p>
<p>To define the named routes, we need to replace rules such as</p>
<div class="code"><div class="highlight"><pre><span class="n">get</span> <span class="s1">&#39;static_pages/help&#39;</span>
</pre></div>
</div>
<p>with</p>
<div class="code"><div class="highlight"><pre><span class="n">match</span> <span class="s1">&#39;/help&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#help&#39;</span>
</pre></div>
</div>
<p>This arranges both for a valid page at <code>/help</code> and a named route called <code>help_path</code> that returns the path to that page. (Actually, using <code>get</code> in place of <code>match</code> gives the same named routes, but using <code>match</code> is more conventional.)</p>
<p>Applying this pattern to the other static pages gives <a class="ref" href="filling-in-the-layout.html#code-static_page_routes">Listing&nbsp;5.21</a>. The only exception is the Home page, which we&rsquo;ll take care of in <a class="ref" href="filling-in-the-layout.html#code-root_route">Listing&nbsp;5.23</a>.</p>
<div class="label" id="code-static_page_routes"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.21.</span> <span class="description">Routes for static pages. <br /> <code>config/routes.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="ss">SampleApp::Application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
<span class="n">match</span> <span class="s1">&#39;/help&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#help&#39;</span>
<span class="n">match</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#about&#39;</span>
<span class="n">match</span> <span class="s1">&#39;/contact&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#contact&#39;</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="k">end</span>
</pre></div>
</div></div>
<p>If you read the code in <a class="ref" href="filling-in-the-layout.html#code-static_page_routes">Listing&nbsp;5.21</a> carefully, you can probably figure out what it does; for example, you can see that</p>
<div class="code"><div class="highlight"><pre><span class="n">match</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#about&#39;</span>
</pre></div>
</div>
<p>matches <code>&rsquo;/about&rsquo;</code> and routes it to the <code>about</code> action in the StaticPages controller. Before, this was more explicit: we used</p>
<div class="code"><div class="highlight"><pre><span class="n">get</span> <span class="s1">&#39;static_pages/about&#39;</span>
</pre></div>
</div>
<p>to get to the same place, but <code>/about</code> is more succinct. In addition, as mentioned above, the code <code>match &rsquo;/about&rsquo;</code> also automatically creates <em>named routes</em> for use in the controllers and views:</p>
<div class="code"><div class="highlight"><pre><span class="n">about_path</span> <span class="o">=&gt;</span> <span class="s1">&#39;/about&#39;</span>
<span class="n">about_url</span> <span class="o">=&gt;</span> <span class="s1">&#39;http://localhost:3000/about&#39;</span>
</pre></div>
</div>
<p>Note that <code>about_url</code> is the <em>full</em> URI http://localhost:3000/about (with <code>localhost:3000</code> being replaced with the domain name, such as <code>example.com</code>, for a fully deployed site). As discussed in <a class="ref" href="filling-in-the-layout.html#sec-layout_links">Section&nbsp;5.3</a>, to get just /about, you use <code>about_path</code>. In the <em>Rails Tutorial</em>, we&rsquo;ll follow the common convention of using the <code>path</code> form except when doing redirects, where we&rsquo;ll use the <code>url</code> form. This is because after redirects the HTTP standard technically requires a full URI, although in most browsers it will work either way.</p>
<p>With these routes now defined, the tests for the Help, About, and Contact pages should pass:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle <span class="nb">exec </span>rspec spec/requests/static_pages_spec.rb
</pre></div>
</div>
<p>This leaves the test for the Home page as the last one to fail.</p>
<p>To establish the route mapping for the Home page, we <em>could</em> use code like this:</p>
<div class="code"><div class="highlight"><pre><span class="n">match</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#home&#39;</span>
</pre></div>
</div>
<p>This is unnecessary, though; Rails has special instructions for the root URI&nbsp;/ (&ldquo;slash&rdquo;) located lower down in the file (<a class="ref" href="filling-in-the-layout.html#code-root_route_hint">Listing&nbsp;5.22</a>).</p>
<div class="label" id="code-root_route_hint"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.22.</span> <span class="description">The commented-out hint for defining the root route. <br /> <code>config/routes.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="ss">SampleApp::Application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="c1"># You can have the root of your site routed with &quot;root&quot;</span>
<span class="c1"># just remember to delete public/index.html.</span>
<span class="c1"># root :to =&gt; &quot;welcome#index&quot;</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="k">end</span>
</pre></div>
</div></div>
<p>Using <a class="ref" href="filling-in-the-layout.html#code-root_route_hint">Listing&nbsp;5.22</a> as a model, we arrive at <a class="ref" href="filling-in-the-layout.html#code-root_route">Listing&nbsp;5.23</a> to route the root URI&nbsp;/ to the Home page.</p>
<div class="label" id="code-root_route"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.23.</span> <span class="description">Adding a mapping for the root route. <br /> <code>config/routes.rb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="ss">SampleApp::Application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
<span class="n">root</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#home&#39;</span>
<span class="n">match</span> <span class="s1">&#39;/help&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#help&#39;</span>
<span class="n">match</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#about&#39;</span>
<span class="n">match</span> <span class="s1">&#39;/contact&#39;</span><span class="p">,</span> <span class="ss">to:</span> <span class="s1">&#39;static_pages#contact&#39;</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="o">.</span>
<span class="k">end</span>
</pre></div>
</div></div>
<p>This code maps the root URI&nbsp;/ to /static_pages/home, and also gives URI helpers as follows:</p>
<div class="code"><div class="highlight"><pre><span class="n">root_path</span> <span class="o">=&gt;</span> <span class="s1">&#39;/&#39;</span>
<span class="n">root_url</span> <span class="o">=&gt;</span> <span class="s1">&#39;http://localhost:3000/&#39;</span>
</pre></div>
</div>
<p>We should also heed the comment in <a class="ref" href="filling-in-the-layout.html#code-root_route_hint">Listing&nbsp;5.22</a> and delete <code>public/index.html</code> to prevent Rails from rendering the default page (<a class="ref" href="beginning.html#fig-riding_rails_31">Figure&nbsp;1.3</a>) when we visit&nbsp;/. You can of course simply remove the file by trashing it, but if you&rsquo;re using Git for version control there&rsquo;s a way to tell Git about the removal at the same time using <code>git rm</code>:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> git rm public/index.html
</pre></div>
</div>
<p>You may recall from <a class="ref" href="beginning.html#sec-git_commands">Section&nbsp;1.3.5</a> that we used the Git command <code>git commit -a -m "Message"</code>, with flags for &ldquo;all changes&rdquo; (<code>-a</code>) and a message (<code>-m</code>). As shown above, Git also lets us roll the two flags into one using <code>git commit -am "Message"</code>.</p>
<p>With that, all of the routes for static pages are working, and the tests should pass:</p>
<div class="code"><div class="highlight"><pre><span class="gp">$</span> bundle <span class="nb">exec </span>rspec spec/requests/static_pages_spec.rb
</pre></div>
</div>
<p>Now we just have to fill in the links in the layout.</p>
<div class="label" id="sec-named_routes"></div>
<h3><a id="sec-5_3_3" href="filling-in-the-layout.html#sec-named_routes" class="heading"><span class="number">5.3.3</span> Named routes</a></h3>
<p>Let&rsquo;s put the named routes created in <a class="ref" href="filling-in-the-layout.html#sec-rails_routes">Section&nbsp;5.3.2</a> to work in our layout. This will entail filling in the second arguments of the <code>link_to</code> functions with the proper named routes. For example, we&rsquo;ll convert</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;About&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>to</p>
<div class="code"><div class="highlight"><pre><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;About&quot;</span><span class="p">,</span> <span class="n">about_path</span> <span class="cp">%&gt;</span>
</pre></div>
</div>
<p>and so on.</p>
<p>We&rsquo;ll start in the header partial, <code>_header.html.erb</code> (<a class="ref" href="filling-in-the-layout.html#code-header_partial_links">Listing&nbsp;5.24</a>), which has links to the Home and Help pages. While we&rsquo;re at it, we&rsquo;ll follow a common web convention and link the logo to the Home page as well.</p>
<div class="label" id="code-header_partial_links"></div>
<div class="codelisting">
<div class="listing"><span class="header">Listing 5.24.</span> <span class="description">Header partial with links. <br /> <code>app/views/layouts/_header.html.erb</code></span> </div>
<div class="code"><div class="highlight"><pre><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar-inner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;sample app&quot;</span><span class="p">,</span> <span class="n">root_path</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s2">&quot;logo&quot;</span> <span class="cp">%&gt;</span>
<span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav pull-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Home&quot;</span><span class="p">,</span> <span class="n">root_path</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Help&quot;</span><span class="p">,</span> <span class="n">help_path</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;</span><span class="cp">&lt;%=</span> <span class="n">link_to</span> <span class="s2">&quot;Sign in&quot;</span><span class="p">,</span> <span class="s1">&#39;#&#39;</span> <span class="cp">%&gt;</span><span class="nt">&lt;/li&gt;</span>
&