Page Layouts
‹ BackThe 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:
<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
.
<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 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> <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.