export const maps = `
<h1>MAPS</h1>
<p style="width:70%;">When using a color more than once, store it in a variable with a meaningful name representing the
    color.</p>
<p style="width:70%;">Maps should be written as follows:</p>
<ul>
    <li>Space after the colon (:).</li>
    <li>Opening brace (() on the same line as the colon (:).</li>
    <li><strong>Quoted keys</strong> if they are strings (which represents 99% of the cases).</li>
    <li>Each key/value pair on its own new line.</li>
    <li>Comma (,) at the end of each key/value.</li>
    <li>Trailing comma (,) on last item to make it easier to add, remove or reorder items.</li>
    <li>Closing brace ()) on its own new line.</li>
    <li>No space or new line between closing brace ()) and semi-colon (;).</li>
</ul>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 70%; ">
    <pre>
// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );
    </pre>
</div>
`;
