Layouts

Use-Cases:

1. SO Two Column

Main Ideas:

1. Introduction
2. Slide Properties
3. Layouts
4. Inheritance
5. Blocks

---

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

Consider a simple slide shown below. There are three elements to this slide

1. --- slide separator
2. {...} slide properties, should be valid yaml
3. ## Slide Title ... slide contents

--- {class: class1, id: id1, bg: yellow}

## Slide Title

Slide Contents

Note: Each slide needs to be preceeded by --- this denotes the beginning of a new slide and the end of the previous slide.

Parsed Slide

Slidify parses this slide as

$id
[1] "id1"

$bg
[1] "yellow"

$class
[1] "class1"

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

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

Layout

The default slide layout used by the io2012 framework is shown below. It is a mustache template with placeholders for the metadata and content elements returned by the parser. The slide element slide$foo is referenced in the template as slide.foo.

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

Rendered Slide

Slidify uses whisker to render the final html by passing the parsed data to the layout file.

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

Customizing Layouts

Sometimes it takes more than CSS to achieve a certain layout and style for your slide. For example, suppose you want a slide with a two column layout and a red horizontal rule after the title. Here is how you can do it using layouts in Slidify. Any layout saved in the assets/layouts folder is automatically read by Slidify

Define Layout

<slide class="{{ slide.class }}" id="{{ slide.id }}">
  <hgroup>
    {{{ slide.header }}}
  </hgroup>
  <article>
    <hr noshade size=4 color='red'>  
    {{{ slide.content }}}  
    <div class='left' style='float:left;width:48%'>
     {{{ slide.left.html }}}
    </div>    
    <div class='right' style='float:right;width:48%'>
     {{{ slide.right.html }}}
    </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. A block is marked using three stars, *** and you can specify its name as a property in the YAML that follows the three stars (Slidify also provides a shortcut for some commonly used properties. E.g. you can replace {name: left} with =left and it will automatically be expanded by Slidify)

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

- point 1
- point 2
- point 3

More Uses

Layouts can be used to simplify slide design considerably and keep things DRY. Slidify ships with 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

Consider the following use-case. Suppose you want to add a footer to all slides including a logo. An obvious way to do it is to rewrite the default slide template, adding the footer after {{{ content }}}, and saving it as slide.html in the assets/layouts folder. Note that user define layouts override system layouts of the same name.

<slide class="{{ slide.class }}" id="{{ slide.id }}">
  <hgroup>
    {{{ slide.header }}}
  </hgroup>
  <article>
    {{{ slide.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 modify the custom layout to ensure that layouts are in sync. This could happen when you decide to use a different HTML5 slide framework, which has a different markup for slides. This is where layout inheritance comes to play.

Note that while defining your custom slide layout, you are essentially replacing the {{{ slide.content }}} placeholder in the slide layout by {{{ slide.content }}} + footer. Slidify provides a mechanism, where layouts can inherit from a parent layout, thereby simplifying the template considerably and keeping thing DRY.

The modified layout for this use-case using inheritance is shown below. The YAML front matter indicates that this template inherits from slide, which is the default slide layout. The body of the layout is used to replace {{{ slide.content }}} in the parent layout, thereby achieving what we wanted.

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

Layouts with Parameters

Slidify layouts can accept arbitrary 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 to the layout using slide level metadata. Here are the steps

Layout

Note that the placeholders w1 and w2 are parameters that control the width of the two columns, and are provided by the slide.

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

Slide

You can include arbitrary metadata for any slide using key:value pairs.

--- &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.