grid.twig
<div class="grid"> <div class="grid__col grid--12-col">12</div> </div> <div class="grid"> <div class="grid__col grid--11-col">11</div> <div class="grid__col grid--1-col">1</div> </div> <div class="grid"> <div class="grid__col grid--10-col">10</div> <div class="grid__col grid--2-col">2</div> </div> <div class="grid"> <div class="grid__col grid--9-col">9</div> <div class="grid__col grid--3-col">3</div> </div> <div class="grid"> <div class="grid__col grid--8-col">8</div> <div class="grid__col grid--4-col">4</div> </div> <div class="grid"> <div class="grid__col grid--7-col">7</div> <div class="grid__col grid--5-col">5</div> </div> <div class="grid"> <div class="grid__col grid--6-col">6</div> <div class="grid__col grid--6-col">6</div> </div> <div class="grid"> <div class="grid__col grid--4-col">4</div> <div class="grid__col grid--4-col">4</div> <div class="grid__col grid--4-col">4</div> </div> <div class="grid"> <div class="grid__col grid--3-col">3</div> <div class="grid__col grid--3-col">3</div> <div class="grid__col grid--3-col">3</div> <div class="grid__col grid--3-col">3</div> </div>
View the Page package on github. .page__middle--contained - Page middle has container max size.
page.twig
<div class="page"> <main class="page__middle {{ modifier_class }}"></main> </div>
Page with sidebar is defined in the page package. View the Page package on github.
page-sidebar.twig
<div class="page__content grid {{ modifier_class }}"> {% if reverse_markup %} <div class="page__sidebar grid__col grid--3-col"> {% block sidebar %}2{% endblock %} </div> {% endif %} <div class="page__sections grid__col grid--8-col {{ content_class }}"> {% block content %}1{% endblock %} </div> {% if not reverse_markup %} <div class="page__sidebar grid__col grid--3-col"> {% block sidebar %}2{% endblock %} </div> {% endif %} </div>
Sections are defined in the Layout package. View the Layout package on github. Sections are containers for other components to be placed in. They look after responsive vertical spacing, max-container-width, background colors, and grid column gap. They act as rows for content.
section.twig
<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 Background is defined in the Layout package. View the Layout package on github. A section with additional background image.
section-background.twig
<section class="section section--l {{ modifier_class }}"> {% block background %} <figure class="section__background" role="presentation"> <img src="https://placeimg.com/1000/800/arch" alt=""> </figure> {% 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>
Sections stacked are defined in the Layout package. View the Layout package on github. Example of multiple sections stacked with alternating background rows.
sections-stacked.twig
<section class="section section--xl background--grey-05"> <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 background--grey-10"> <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--grey-05"> <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 background--grey-10"> <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>