Perch Templates for Material Design Lite

Material Design Lite lets you add a Material Design look and feel to your websites. Perch is ideally suited to creating templates for use with this framework.

The Material Design Lite framework requires that you add a lot of classes to your markup as it uses BEM conventions. Therefore to use Material with your CMS you need a CMS that gives you complete control over the markup output, or you’ll find yourself jumping through a lot of hoops.

Perch, and our structured content approach, mean that creating templates for frameworks like Material Design Lite is straightforward. I took one of the example pages, and built Perch Templates for each of the section blocks used.

You can download my templates from GitHub. These will require that you have included the Material Lite CSS and JavaScript in your site.

Read on for some notes on interesting things about these templates, of use whether you are using Material or another similar framework.

Allowing colour selections by content editors

The Media Box template I created has a colour selection for the box with the icon, which is defined by a class added to the markup.

<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--green-100 mdl-color-text--white">
    <i class="material-icons">play_circle_filled</i>
  </header>

If I wanted my content editor to be able to select a colour I might want to give them a predefined list to choose from using a Perch Content Tag with a type of select.

<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--<perch:content id="color" type="select" label="Choose color" options="pink,green,blue" required="true" />-100 mdl-color-text--white">
    <i class="material-icons">play_circle_filled</i>
  </header>

In the Perch Control Panel, when editing this content the editor can choose from the list.

You could do this with any of the classes added that have a distinct set of options to choose from. If the main colour choice might then change which text colour to use, a Perch Conditional tag would let you check to see if the colour was blue – for example – and then set the text colour class to white.

Using template includes to prevent repetition

I’m using template includes here. I’ve created my templates as individual templates in perch/content/material so I could choose them individually for a Region. I might also want to use them in a Perch Blocks template, letting my editor build up a page with any combination of elements. Instead of repeating my individual templates, I just include them.

<perch:blocks>
  <perch:block type="mediabox" label="Media Box">
  	<perch:template path="content/material/media-box.html" />
  </perch:block>

  <perch:block type="listbox" label="List Box">
  	<perch:template path="content/material/list-box.html" />
  </perch:block>

  <perch:block type="textbox" label="Text Box">
  	<perch:template path="content/material/text-box.html" />
  </perch:block>

  <perch:block type="splitbox" label="2 Col full width">
  	<perch:template path="content/material/footer-split.html" />
  </perch:block>
</perch:blocks>

I also use includes to reduce repetition within the templates. Each of my templates can have a small menu of links. This has the same markup in all templates.

I created this menu as a separate small template. I’m using a Repeater to allow the editor to add as many links as they like and putting the surrounding markup between the perch:before and perch:after tags.

The value of the ID and for attribute includes <perch:content id="parent.perch_item_index" type="hidden" /> and
<perch:content id="parent._block_id" type="hidden" /> building up something that should create a unique ID to activate the menu. You could use a slug or allow something to be entered here but it does need to be unique on the page. In order for that tag to work within a variety of contexts we need to add the scope-parent attribute on the repeater.

<perch:repeater id="minimenu" label="Mini Menu" scope-parent="true" />
  <perch:before>
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn_<perch:content id="parent.perch_item_index" type="hidden" /><perch:content id="parent._block_id" type="hidden" />">
    <i class="material-icons">more_vert</i>
    </button>
    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn_<perch:content id="parent.perch_item_index" type="hidden" /><perch:content id="parent._block_id" type="hidden" />">
  </perch:before>

    <li class="mdl-menu__item"><a href="<perch:content type="text" id="menulink" label="Link" />"><perch:content type="text" id="menutext" label="Link text" /></a></li>
  <perch:after>
   </ul>
  </perch:after>
</perch:repeater>

I then just include that as a regular template include in each template that needs the menu.

<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
  <div class="mdl-card mdl-cell mdl-cell--12-col">
    <div class="mdl-card__supporting-text">
      <h4><perch:content id="title" type="text" label="title" required="true" title="true" /></h4>
      <perch:content id="body" type="textarea" label="Body" size="s" required="true" /> 
    </div>
    <div class="mdl-card__actions">
      <a href="<perch:content id="ctalink" type="text" label="Call to action link" required="true" />" class="mdl-button"><perch:content id="ctatext" type="text" label="Call to action text" required="true" /></a>
    </div>
  </div>
  <perch:template path="content/material/mini-menu.html" />
</section>

Take a look at the templates and feel free to use and modify these for your own projects. If you are working with Perch and Material Design Lite or any other framework we’d love to see the templates you create.