export const cssRuleset = `
<h1>CSS RULESEST</h1>
<p style="width:70%;">How a CSS ruleset should be written:</p>
<ul>
    <li>Related selectors on the same line; unrelated selectors on new lines.</li>
    <li>The opening brace ({{'{'}}) spaced from the last selector by a single space.</li>
    <li>Each declaration on its own new line.</li>
    <li>A space after the colon (:).</li>
    <li>A trailing semi-colon (;) at the end of all declarations.</li>
    <li>The closing brace ({{'}'}}) on its own new line.</li>
    <li>A new line after the closing brace {{'}'}}.</li>
</ul>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
.foo, .foo-bar,
.baz {{'{'}}
  display: block;
  overflow: hidden;
  margin: 0 auto;
{{'}'}}

// Nope
.foo,
.foo-bar, .baz {{'{'}}
    display: block;
    overflow: hidden;
    margin: 0 auto {{'}'}}
    </pre>
</div>
<p style="width:70%;">Adding to those CSS-related guidelines, we want to pay attention to:</p>
<ul>
    <li>Local variables being declared before any declarations, then spaced from declarations by a new line.</li>
    <li>Mixin calls with no @content coming before any declaration.</li>
    <li>Nested selectors always coming after a new line.</li>
    <li>Mixin calls with @content coming after any nested selector.</li>
    <li>No new line before a closing brace ({{'}'}}).</li>
</ul>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo, .foo-bar,
.baz {{'{'}}
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {{'{'}}
    color: red;
  {{'}'}}

  @include respond-to('small') {{'{'}}
    overflow: visible;
  {{'}'}}
{{'}'}}
    </pre>
</div>
`;
