Agile Web Development Using Rails 6/

...

/

Adding the Page Layout

Adding the Page Layout

Learn to design a page layout using a separate stylesheet.

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:

Press + to interact
<!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 ...