Layout

                <div class="grid">
  <div class="grid--12-col">12</div>
</div>

<div class="grid">
  <div class="grid--11-col">11</div>
  <div class="grid--1-col">1</div>
</div>

<div class="grid">
  <div class="grid--10-col">10</div>
  <div class="grid--2-col">2</div>
</div>

<div class="grid">
  <div class="grid--9-col">9</div>
  <div class="grid--3-col">3</div>
</div>

<div class="grid">
  <div class="grid--8-col">8</div>
  <div class="grid--4-col">4</div>
</div>

<div class="grid">
  <div class="grid--7-col">7</div>
  <div class="grid--5-col">5</div>
</div>

<div class="grid">
  <div class="grid--6-col">6</div>
  <div class="grid--6-col">6</div>
</div>

<div class="grid">
  <div class="grid--4-col">4</div>
  <div class="grid--4-col">4</div>
  <div class="grid--4-col">4</div>
</div>

<div class="grid">
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
</div>

              

                <div class="grid container">
  <div class="grid--12-col">12</div>
</div>

<div class="grid container">
  <div class="grid--11-col">11</div>
  <div class="grid--1-col">1</div>
</div>

<div class="grid container">
  <div class="grid--10-col">10</div>
  <div class="grid--2-col">2</div>
</div>

<div class="grid container">
  <div class="grid--9-col">9</div>
  <div class="grid--3-col">3</div>
</div>

<div class="grid container">
  <div class="grid--8-col">8</div>
  <div class="grid--4-col">4</div>
</div>

<div class="grid container">
  <div class="grid--7-col">7</div>
  <div class="grid--5-col">5</div>
</div>

<div class="grid container">
  <div class="grid--6-col">6</div>
  <div class="grid--6-col">6</div>
</div>

<div class="grid container">
  <div class="grid--4-col">4</div>
  <div class="grid--4-col">4</div>
  <div class="grid--4-col">4</div>
</div>

<div class="grid container">
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
  <div class="grid--3-col">3</div>
</div>

              

                <div class="grid container grid--xs-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid container grid--sm-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid container grid--md-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid container grid--md-3-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid container grid--lg-3-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid container grid--sm-2-cols grid--md-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid container grid--md-2-cols grid--lg-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid container grid--xs-2-cols grid--xl-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

              

                <div class="grid grid--dynamic">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid--xs-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid grid--sm-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid grid--md-2-cols">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid grid--md-3-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid--lg-3-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid--sm-2-cols grid--md-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid grid--md-2-cols grid--lg-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid grid--xs-2-cols grid--xl-4-cols">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

              

                <div class="page">
  <header>[header]</header>
  <main class="page__middle {{ modifier_class }}">[middle]</main>
  <footer>[footer]</footer>
</div>

              

                <div class="page__content {{ modifier_class }}">
  {% if reverse_markup %}
    <div class="page__sidebar">
      {% block sidebar %}2{% endblock %}
    </div>
  {% endif %}
  <div class="page__sections {{ content_class }}">
    {% block content %}1{% endblock %}
  </div>
  {% if not reverse_markup %}
    <div class="page__sidebar">
      {% block sidebar %}2{% endblock %}
    </div>
  {% endif %}
</div>

              

                <section class="section {{ modifier_class }}">
  {% block background %}{% endblock %}
  <div class="section__content {{ layout_class }}">
    {% block content %}
      <div class="vertical-flow">
      <h2>Key feature or Section Name</h2>
      <p>A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
      <a class="button button--primary" href="#">Learn more</a>
      </div>
    {% endblock %}
  </div>
</section>

              

                <section class="section stack section--has-background {{ modifier_class }}">
  {% block background %}
    <figure class="background--image" role="presentation">
      <img src="https://picsum.photos/id/56/1642/560?grayscale" alt="">
    </figure>
  {% endblock %}
  <div class="section__content {{ layout_class|default('section--l') }}">
    {% block content %}
      <div class="vertical-flow">
      <h2>Key feature or Section Name</h2>
      <p>A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
      <a class="button button--primary" href="#">Learn more</a>
      </div>
    {% endblock %}
  </div>
</section>

              

                <section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>first section has top and bottom spacing</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section with normal flow</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section with normal flow</p>
  </div>
</section>
<section class="section section--group background--alt">
  <div class="section__content {{ layout_class }}">
    <p>certain sections can be</p>
  </div>
</section>
<section class="section section--group background--alt">
  <div class="section__content {{ layout_class }}">
    <p>grouped togther as siblings</p>
  </div>
</section>
<section class="section section--group background--alt">
  <div class="section__content {{ layout_class }}">
    <p>with their own spacing rules</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section on it's own has top and bottom spacing</p>
  </div>
</section>
<section class="section section--flow section--group background--alt">
  <div class="section__content {{ layout_class }}">
    <p>groups can be combined with flow</p>
  </div>
</section>
<section class="section section--flow section--group background--alt">
  <div class="section__content {{ layout_class }}">
    <p>for standard spacing</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section after group own has top and bottom spacing</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section with normal flow</p>
  </div>
</section>
<section class="section section--flow background--alt">
  <div class="section__content {{ layout_class }}">
    <p>section with background that breaks the flow, also has top and bottom spacing</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section after background own has top and bottom spacing</p>
  </div>
</section>
<section class="section section--flow">
  <div class="section__content {{ layout_class }}">
    <p>section with normal flow</p>
  </div>
</section>

              

                <section class="section section--xl background--alt">
  <div class="section__content vertical-flow {{ layout_class }}">
    <h2>Section Extra Large</h2>
    <p>Extra Large spacing at the section level. Use the <code>section--xl</code> class to apply this spacing to the outter section.</p>
    <a class="button button--primary" href="#">Learn more</a>
  </div>
</section>
<section class="section section--l">
  <div class="section__content vertical-flow {{ layout_class }}">
    <h2>Section Large</h2>
    <p>Large spacing at the section level. Use the <code>section--l</code> class to apply this spacing to the outter section.</p>
    <a class="button button--primary" href="#">Learn more</a>
  </div>
</section>
<section class="section section--m background--alt">
  <div class="section__content vertical-flow {{ layout_class }}">
    <h2>Section Medium</h2>
    <p>Medium spacing at the section level. Use the <code>section--m</code> class to apply this spacing to the outter section.</p>
    <a class="button button--primary" href="#">Learn more</a>
  </div>
</section>
<section class="section section--s">
  <div class="section__content vertical-flow {{ layout_class }}">
    <h2>Section Small</h2>
    <p>Small spacing at the section level. Use the <code>section--s</code> class to apply this spacing to the outter section.</p>
    <a class="button button--primary" href="#">Learn more</a>
  </div>
</section>