Skip to content

Instantly share code, notes, and snippets.

@jonathanmoore

jonathanmoore/district-slate-grid-example.html

Created May 2, 2017 22:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jonathanmoore/23c18a2a4ccf5bf7da8dd025f1a4d4bc to your computer and use it in GitHub Desktop.
Save jonathanmoore/23c18a2a4ccf5bf7da8dd025f1a4d4bc to your computer and use it in GitHub Desktop.
Download ZIP
Example usage of Shopify's Slate grid in District
Raw
district-slate-grid-example.html
<div class="grid">
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
<p>One Quarter<br>
One Half (large)<br>
One Whole (medium down)</p>
</div>
</div>
@jonathanmoore
Copy link
Author

Basic two column layout that stacks vertically into one column for mobile.

<div class="grid">
  <div class="grid__item one-half small--one-whole">
    <p>One Half<br>
    One Whole (mobile)</p>
  </div>
  <div class="grid__item one-half small--one-whole">
    <p>One Half<br>
    One Whole (mobile)</p>
  </div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment