Middleman cheatsheet

Code samples

Include

syntax: true

Show code for a partial (component)

<% code("html") {partial "/components/buttons/normal-button-button"} %>

Show random code

<% code("html") {"Some random <b>markup</b> with awkward characters like quote marks escaped using \."} %>

Loops

<% for i in 0..99 do %>
  <% id = df_id %>
  <% buttons.push(id) %>
  <button class="button" id="<%= id %>">Off</button>
<% end %>

Iterate through hash

<% ids.sort.each do |id, title| %>
  <section>
    <h2 id="<%= id %>"><%= title %></h2>
    <p><%= lorem.paragraphs(5) %>.</p>
  </section>
<% end %>

Include data from yaml

The yaml files are kept in the data directory at the root of the repo.

<% data.search.results.each do |result| %>
<article class="search-result content-with-meta content-with-meta--break-at-medium">
  <div class="accordion__child content">
    <div class="accordion__toggle" data-accordion-trigger="" tabindex="0" aria-expanded="true">
      <h3 class="accordion__label"><%= result.provider %><span class="course-count"><%= result.courses.count %> <% if result.courses.count == 1 %>course<% else %>courses<% end %></span></h3>
    </div>
    <div class="accordion__inner accordion__inner--plain" data-accordion-state="expanded" aria-hidden="false" role="region">
      <div class="accordion__inner-wrapper">
        <% result.courses.each do |course| %>
        <div class="course-details">
          <div class="search-result__actions">
            <button class="search-result__favourite" title="Favourite this course">Favourite</button>
          </div>
          <a class="course-title" href=><%= result.title %></a>
          <div class="course-qualification"><%= course.qualification %></div>
        </div>
        <% end %>
      </div>
    </div>
  </div>
  <div class="content-with-meta__meta content-with-meta__meta--provider-logo">
    <% if result.logo %><%= tag :img, :src => df_get_build_url + "/images/example/provider-logos/" + result.logo, :alt => "" %><% end %>
  </div>
</article>
<% end %>

Custom functions

<%= df_id %> <%# generate a random id %>

<%= df_content_columns 2 %> <%# output two columns with fake content %>

<%= df_get_jira_tag issue %> <%# reference a Jira ticket %>

<%= html_svg_image(path) %> <%# include an svg in html markup %>

<%= inline_svg_image(path, fill) %> <%# include an encoded svg in CSS %>

Text generators

The following helpers use fixed sets of content which we can use as dummy text. For example, df_words uses a long list of words that starts like this:

"lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "curabitur", "aliquam", "ex", "vitae", "nibh", "pellentesque", "tincidunt", "ut", "in", "justo", "enim", "nunc", "semper"…

We can choose position, quantity or step to give us different but consistent variations.

e.g.

<%= df_words 4 %>

"lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "curabitur", "aliquam", "ex", "vitae", "nibh", "pellentesque", "tincidunt", "ut", "in", "justo", "enim", "nunc", "semper"…

<%= df_words 4, 3 %>

"lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "curabitur", "aliquam", "ex", "vitae", "nibh", "pellentesque", "tincidunt", "ut", "in", "justo", "enim", "nunc", "semper"…

<%= df_words 4, 3, 2 %>

"lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "curabitur", "aliquam", "ex", "vitae", "nibh", "pellentesque", "tincidunt", "ut", "in", "justo", "enim", "nunc", "semper"…

df_words ( position [, quantity ] [, step ] )

<%= df_words position %> <%# output one word from the position in the array, param should be a number %>

<%= df_words 17 %>

<%= df_words position, quantity %> <%# output quantity of words from the position in the array, params should be numbers %>

<%= df_words 15, 8 %>

<%= df_words position, quantity, step %> <%# output quantity of words from the position in the array, step size through the array, params should be numbers %>

<%= df_words 15, 8, 3 %>

df_sentences ( position [, quantity ] [, step ] )

<%= df_sentences position %> <%# output one sentence from the position in the array, param should be a number %>

<%= df_sentences 15 %>

<%= df_sentences position, quantity %> <%# output quantity of sentences from the position in the array, params should be numbers %>

<%= df_sentences 15, 8 %>

<%= df_sentences position, quantity, step %> <%# output quantity of sentences from the position in the array, step size through the array, params should be numbers %>

<%= df_sentences 15, 8, 5 %>

df_phone ( position )

<%= df_phone position %> <%# output one phone number from the position in the array, param should be a number% >

<%= df_phone 15 %>

df_email ( position )

<%= df_email position %> <%# output one email address from the position in the array, param should be a number% >

<%= df_email 2 %>

df_paragraphs ( position [, quantity ] [, step ] )

<%= df_paragraphs position %> <%# output one paraghraph from the position in the array, param should be a number% >

<%= df_paragraphs 2 %>

<%= df_paragraphs position, quantity %> <%# output quantity of paragraphs from the position in the array, params should be numbers %>

<%= df_paragraphs 15, 2 %>

<%= df_paragraphs position, quantity, step %> <%# output quantity of paragraphs from the position in the array, step size through the array, params should be numbers %>

<%= df_paragraphs 15, 3, 5 %>