template.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= projectName %></title>
    <style><%- codeStyle %><%- tmplStyle %><%- processedCSS %></style>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
  <header>
    <h1><%= projectName %></h1>
  </header>
  <main>
    <div class="section typeset">
      <% maps.forEach(function (map) { %>
        <% if (showCode) { %>
          <div class="box cf">
            <div class="description column column--duo">
                <%- map.html %>
            </div><!-- column -->

            <div class="code column column--duo">
              <pre class="code"><code class="lang-css"><%- map.rule %></code></pre>
            </div><!-- column -->
          </div>
        <% } else { %>
          <!-- Add markup without CSS source code -->
        <% } %>
      <% }) %>

    </div>
  </main>
  <footer class="global-footer">
      <p>Proudly generated with <a href="https://github.com/morishitter/postcss-style-guide" target="_blank">postcss-style-guide</a></p>
  </footer>
</body>
</html>