Layouts

Layouts

A layout is a mustache template that specifies the markup to be used while rendering a slide deck. Layouts allow a clean separation of content from design, thereby allowing the same markdown document to be rendered using multiple HTML5 frameworks. The best way to understand layouts is to follow a slide through slidify

Slide

--- .class1 #id1 bg:yellow

## Slide Title

Slide Contents

Parsed Slide

$id
[1] "id1"

$bg
[1] "yellow"

$class
[1] "class1"

$header
[1] "<h2>Slide Title</h2>"

$content
[1] "<p>Slide Contents</p>\n"

Layout

<!-- default slide template for the framework io2012 -->
<slide class="{{ class }}" id="{{ id }}" style="background:{{bg}};">
  <hgroup>
    {{{ header }}}
  </hgroup>
  <article>
    {{{ content }}}
  </article>
</slide>

Rendered Slide

<slide class="class1" id="id" style="background:yellow;">
  <hgroup>
    <h2>Slide Title</h2>
  </hgroup>
  <article>
    <p>Slide Contents</p>\n 
  </article>
</slide>

Slidify parses this slide into its constituent elements

Sometimes it takes more than CSS to achieve a certain layout and style for your slide.

For example, suppose you want a two column layout and a red horizontal rule after the title. Here is how you can do it using layouts in slidify.

Define Layout

A layout is just a mustache template. It can use any data parsed by slidify.

<slide class="{{ class }}" id="{{ id }}">
  <hgroup>
    {{{ header }}}
  </hgroup>
  <article>
    <hr noshade size=4 color='red'>  
    {{{ content }}}  
    <div class='left' style='float:left;width:48%'>
     {{{ left }}}
    </div>    
    <div class='right' style='float:right;width:48%'>
     {{{ right }}}
    </div>
  </article>
</slide>

Write Slide

The header and content elements in the template are automatically included in the results of the parser. However, the elements left and right are blocks that need to be specified explicitly in your slide. You can define any portion of your slide as a named block by using *** followed by the block name as shown below.

### Two Column Layout   
This slide has two columns
    
*** left
    
- point 1
- point 2
- point 3
    
*** right

- point 1
- point 2
- point 3

More Uses

Layouts can be used to simplify slide design considerably by recognizing standard layouts. For example, it is easy to provide layouts for the six slide types that Google Docs or Powerpoint provides.

• title-only
• title-and-body
• title-and-two-cols
• title
• caption
• blank

Layout Inheritance

Slidify layouts allow template inheritance. Let us take a simpler example to illustrate the idea. Suppose, you want to add a footer to all slides including a logo. You have two options.

Option 1 would be to rewrite the entire slide template, adding the footer after {{{ content }}}.

<slide class="{{ class }}" id="{{ id }}">
  <hgroup>
    {{{ header }}}
  </hgroup>
  <article>
    {{{ content }}}  
    <footer class = 'logo'>
      <img src = 'path/to/logo'></img>
    </footer>
  </article>
</slide>

There are two reasons this is not efficient. One, it is not DRY and repeats code unnecessarily. Two, when the default layout is modified, you need to manually propagate the changes to ensure that layouts are in sync. This is where template inheritance comes to play.

Note that what you are doing is essentially, replacing the {{{ content }}} portion of the slide layout by {{{ content }}} + footer. The modified layout using inheritance is shown below. The YAML front matter indicates that this template inherits from slide. The body of the layout is used to replace {{{ content }}} in the parent layout, thereby achieving what we wanted.

---
layout: slide
---
{{{ content }}}
<footer class = 'logo'>
  <img src = 'path/to/logo'></img>
</footer>

Layouts with Parameters

Slidify layouts can accept parameters which expands its power. Let us return to the case of two column layouts. Suppose you want slides with different column widths. We can achieve this by rewriting the two column layout using parameters, and then passing them on using slide level metadata. Here are the steps

1. Write Layout

---
layout: slide
---
{{{ content }}}  
<div class='left' style='float:left;width:{{{ w1 }}}'>
 {{{ left }}}
</div>    
<div class='right' style='float:right;width:{{{ w2 }}}'>
 {{{ right }}}
</div>

2. Write Slide

--- &twocol w1:40% w2:60%
### Two Column Layout   
This slide has two columns
    
*** left
    
- point 1
- point 2
- point 3
    
*** right

- point 1
- point 2
- point 3

Note. Slide level metadata are specified as key:value pairs. Commonly specified metadata like id, class and layout can also be identified by prefixing with punctuation marks #, . and & respectively. Spaces can be used ONLY to separate key:value pairs and not within a pair. This is a limitation of the metadata parser and will be relaxed in future versions of slidify

Miscellaneous Uses

The possibilities are endless. For example, if you are teaching a class on statistics, you might have slides that follow a specific pattern like

1. Start with the definition
2. Explain its meaning
3. Provide an example

It is easy to encode such design patterns within a slidify template, which makes it easy to write complex slides in no time.