export const namingConventions = `
<h1>NAMING CONVENTIONS</h1>
<p style="width:70%;">
  There are a few things you can name in Sass, and it is important to name them well so the whole
  code base looks both consistent and easy to read: </p>
<ul>
  <li>Variables.</li>
  <li>Functions.</li>
  <li>Mixins.</li>
</ul>
<p>
  Regarding variables, functions and mixins, we stick to something very CSS-y: lowercase hyphen-delimited, and above
  all meaningful.</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">

  <pre>
$vertical-rhythm-baseline: 1.5rem;

@mixin size($width, $height: $width) {{'{'}}
  // …
{{'}'}}

@function opposite-direction($direction) {{'{'}}
  // …
{{'}'}}
  </pre>
</div>`;
