Page Layouts

‹ Back

Page layouts by default live in application.html.erb and will get injected in to the global template.

The general idea of this 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:

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

Content

Sidebar right

You can put the content on the right by changing the yield to :sidebar_right.

Content
Panel in sidebar
<div class="page__with-sidebar-right">
  <div class="page--main">
    Content
  </div>
  <div class="page--sidebar">
    <div class="panel panel__passive">
      Panel in sidebar
    </div>
  </div>
</div>
<%- content_for :sidebar_right do -%>
  <div class="panel panel__passive">
    Panel in sidebar
  </div>
<%- end -%>

Content

Full-width

You can break out of the layout-container by yielding directly to either :above_layout or :below_layout. If you only want a single full-width yield, make sure you don't accidentally yield anything outside of either of those yields otherwise you may end up with a gap where the page layout would normally be.

Anything yielded to the before or after yields will not come with any sort of padding or out of the box styling, it's essentially giving you the keys to building an entirely unique layout for a specific view.

This can be convenient for things like a homepage, where you might have a series of full-width modules running down the page, while your inner pages should be the standard left/right two column layout.

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

<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>
<%- content_for :above_layout do -%>
  <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>
<%- end -%>

Enhancing

As with all things Ornament, you are welcome to enhance this file with more variations that are used when different yields are called. The Ornament defaults aren't always going to 100% match your use-cases, so it's there to be tampered with.

Alternatively you also have the opportunity to implement entirely new layout/*.html.erb files as is the standard Railsy way if that is more your style.