Search⌘ K
AI Features
Home
Courses
Agile Web Development Using Rails 6

Adding the Page Layout

Understand how to create a standard page layout in a Rails application by modifying the application layout file. Learn to use Rails helper methods like stylesheet_link_tag, javascript_pack_tag, and csrf_meta_tags. Explore how Sass improves CSS management with nesting and media queries for responsive, mobile-first design. Gain skills to customize layouts affecting the whole site and deliver a better user experience across devices.

We'll cover the following...

The pages in a typical website often share a similar layout. The designer will have created a standard template that’s used when content is placed. Our job is to modify this page to add decoration to each of the store pages.

So far, we’ve made only minimal changes to application.html.erb. Namely, we’ve added a class attribute in the previous lesson. Because this file is the layout used for all views for all controllers that don’t otherwise provide a layout, we can change the look and feel of the entire site by editing one file. That makes it feel a little better to put a placeholder page layout in for now. We can always update it later.

Let’s update this file to define a banner and a sidebar:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Pragprog Books Online Store</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all',
                            'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <header class="main">
      <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
      <h1><%= @page_title %></h1>
    </header>
    <section class="content">
      <nav class="side_nav">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="#">Questions</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <main class='<%= controller.controller_name %>'>
        <%= yield %>
      </main>
    </section>
  </body>
</html>

Apart from the usual HTML pieces, this layout has three Rails-specific items. The Rails stylesheet_link_tag() helper method generates a <link> tag to our application’s stylesheet and specifies an ...