Skip to main content

What are "layouts" and "r:yield"?

Layouts are a new way of organizing your theme. The concept was born from the structure of Rails application. The goal is to modularize your code and keep it DRY'er

To better understand the layouts concept, let's examine Slate themes are structured.

In Slate, we split up partials with a _header.rhtml, _masthead.rhtml, _navigation.rhtml, and index.rhtml/ backpage.rhtml. _header.rhtml houses most of our code for our <head>. Often, our _header.rhtml file would open the <head>tag, but not close it. This can lead to questions like, "Where is the closing <head> tag? Why don't tags open and close in the same file?"

Enter layouts.

Layouts allow us to have a central place to open and close tags and keep everything modularized in one file. Layouts allow the flexibility to include partials (other modularized bits of code) and to yield content into other parts of the document where we see fit.

What is <r:yield />?

<r:yield /> is where a template gets rendered and inserted into your document. For example, all the code in backpage.html will be inserted wherever your <r:yield /> tag is.

How is <r:yield /> different than a partial?

<r:yield /> allows you to select a template—like Backpage or Frontpage—to use through the UI. A partial grabs a unique file containing a single set of code.

At the end of the day, layouts are just a different approach to making themes. Layouts will make more sense to you after you build a couple themes. My guess is, after you have familiarized yourself with the concept, you'll enjoy the new structure. You'll also notice how much less repeated code exists between templates (backpage.html, for example) using layouts.

Last updated on June 15, 2018.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email for help or use the form on the request help page.