Page Layouts

‹ Back

The general idea of the application.html.erb layout file is to have a consistent application layout that has a set of areas where content can dynamically appear, then in your view you define which layout gets used by implementing a yield where needed.

Sidebar

You can throw things in to a sidebar layout by using the :sidebar yield:

Panel in sidebar
Content 
<div class="page page__with-sidebar">
  <div class="page--sidebar">
    <div class="panel panel__passive">
      Panel in sidebar
    </div>
  </div>
  <main class="page--main" role="main" id="main">
    Content
  </main>
</div>

<%- content_for :sidebar do -%>
  <div class="panel panel__passive">
    Panel in sidebar
  </div>
<%- end -%>

Content

Sidebar on the right

You can put the content on the right by yielding anything to page_reversed.

Panel in sidebar
Content 
<div class="page page__with-sidebar page__reversed">
  <div class="page--sidebar">
    <div class="panel panel__passive">
      Panel in sidebar
    </div>
  </div>
  <main class="page--main" role="main" id="main">
    Content
  </main>
</div>

<% content_for :page_reversed, true %>
<% content_for :sidebar do %>
  <div class="panel panel__passive">
    Panel in sidebar
  </div>
<% end %>

Content

Full-width

Yield anything to :page_fullwidth to break out of the default padding of the page.

If you know that the site you're building is going to be mostly or always full-width, I'd suggest modifying the behaviour of the is_fullwidth flag in the application template.

There are some handy helper classes that can help in building full-width layouts:

  • layout--container is an out-of-the-box default container.
    This can be used when you have a full-width coloured box with some content inside of it that should align with the rest of the text on the page.
  • section can be used to add a dividers between blocks consecutive sections.
Section one full-width

Section two inside a layout container

Section three full-width 
<div class="section">
  Section one full-width
</div>
<div class="section">
  <div class="layout--container content">
    <p>Section two inside a layout container</p>
  </div>
</div>
<div class="section">
  Section three full-width
</div>

<% content_for :page_fullwidth, true %>

<div class="section homepage--banner">
  Section one full-width
</div>
<div class="section homepage--content">
  <div class="layout--container content">
    <p>Section two inside a layout container</p>
  </div>
</div>
<div class="section homepage--banner">
  Section three full-width
</div>

Ejecting

As per normal rails behaviour, you can eject out of using the application layout by using layout :false at the top-level of your controller if all actions don't require a layout, or by using render layout: false in your controller action.

There is also a modal layout which will render the modal layout around your content. This is used when ajaxing modal content. See the modal section for more.