Breakpoints

We use a breakpoint syste, kindly borrowed from Bootstrap 4. Global breakpoint sizes can be modified via variables.

Breakpoint sizes

0px - breakpoint-xs
340px - breakpoint-sm
480px - breakpoint-md
640px - breakpoint-lg
920px - breakpoint-xl
1400px - breakpoint-xxl

Site max-width: 1400px

Usage in SCSS

Using a mobile first appraoch, we should typically use up breakpoints


            @include media-breakpoint-up(xs) { ... } 

            @include media-breakpoint-up(sm) { ... } 

            @include media-breakpoint-up(md) { ... } 

            @include media-breakpoint-up(lg) { ... } 

            @include media-breakpoint-up(xl) { ... } 

            @include media-breakpoint-up(xxl) { ... }

Example


        @include media-breakpoint-up(xs) {
            .class {
                display: none;
            }
        }

Or we can use the following if need be


        @include media-breakpoint-down(lg) { ... } 

        @include media-breakpoint-only(xxl) { ... } 

        @include media-breakpoint-between(md, xl) { ... }

Containers & Sections

Containers and sections allow us to implement consistent, maintainable layout for content. As the grid provides consistency to layout horizontally, these provide consistent vertical layout.

Note: Callouts and grids used in these examples are for presentation purposes only.

pageContainer

    
        All page content sites inside this container, excluding the site header and footer.
    

      <!-- pageContainer creates consistent spacing for content below the header and above the footer -->
<div class="pageContainer">
    <section class="Callout Callout--light">
        All page content sites inside this container, excluding the site header and footer.
    </section>
</div>
    

container

    Content centered within the pageContainer and constrained to the site max-width of 1200px.

      <div class="container">
    Content centered within the pageContainer and constrained to the site max-width of 1200px.
</div>

<!-- Common usage with the grid -->
<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <div class="Callout Callout--light"></div>
        </div>
        <div class="col-sm-4">
            <div class="Callout Callout--light"></div>
        </div>
    </div>
</div>
    

sections

        A standard section of content. margin-bottom spaces it from following elements.
    

        A section with increased margin-bottom, typically for greater content sections.
    

        A section with with a line break between it and following elements.
    

        section-break also works with section-lg for greater spacing.
    

        We may also decide remove that padding at the bottom, typically if there's another element defining that space.
    

        Center all inline elements within the section.
    

    We can apply our standard light grey background with section-light. Use section-distinct to apply padding to any section.

    Or our standard dark grey background. Use section-reverse to make text white.

    We can also use the brand primary green background.

        Section distinct can also be used with a background image. Section-overlay must also be used with background-images.
    

      <div class="section">
    <div class="Callout Callout--light">
        A standard section of content. margin-bottom spaces it from following elements.
    </div>
</div>

<div class="section-lg">
    <div class="Callout Callout--light">
        A section with increased margin-bottom, typically for greater content sections.
    </div>
</div>

<div class="section section-break">
    <div class="Callout Callout--light">
        A section with with a line break between it and following elements.
    </div>
</div>

<div class="section-lg section-break">
    <div class="Callout Callout--light">
        section-break also works with section-lg for greater spacing.
    </div>
</div>

<div class="section section-break section-break-tight">
    <div class="Callout Callout--light">
        We may also decide remove that padding at the bottom, typically if there's another element defining that space.
    </div>
</div>

<div class="section-centered">
    <div class="Callout Callout--light">
        Center all inline elements within the section.
    </div>
</div>

<div class="section-light section-distinct">
    We can apply our standard light grey background with section-light. Use section-distinct to apply padding to any section.
</div>

<div class="section-dark section-reverse section-distinct">
    Or our standard dark grey background. Use section-reverse to make text white.
</div>

<div class="section-primary section-distinct">
    We can also use the brand primary green background.
</div>

<div class="section-overlay section-reverse section-distinct" style="background-image: url('http://placekitten.com/1400/300');">
    <!-- Obviously, don't inline styles in your markup -->
    <div class="section-overlay-content">
        Section distinct can also be used with a background image. Section-overlay must also be used with background-images.
    </div>
</div>
    

Grid

The grid defines consistent, horizontal layout and spacing for content and modules. Unusually, the grid is a six column layout, as opposed to the more common 12.

Note: the sections and Callouts used in these examples are for presentation purposes only.

Basic grid implementation

      <div class="row section">
    <div class="col-sm-2">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-4">
        <div class="Callout Callout--light"></div>
    </div>
</div>

<div class="row section">
    <div class="col-sm-3">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout Callout--light"></div>
    </div>
</div>

<div class="row section">
    <div class="col-sm-5">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Responsive grid row, aligned to global breakpoints

      <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Centered grid columns

      <div class="row center-sm">
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Spaced columns

      <div class="row col-spaced">
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Grid nesting

      <div class="row">
    <div class="col-sm-4">
        <div class="Callout Callout--light">
            <div class="row">
                <div class="col-sm-2">
                    <div class="Callout Callout--secondary"></div>
                </div>
                <div class="col-sm-4">
                    <div class="Callout Callout--secondary"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Callout Callout--light">
            <div class="row">
                <div class="col-sm-3">
                    <div class="Callout Callout--secondary"></div>
                </div>
                <div class="col-sm-3">
                    <div class="Callout Callout--secondary"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    

Matched child heights

            Poutine fam small batch, tbh air plant street art kombucha retro fingerstache semiotics kickstarter hoodie kinfolk tumeric. Truffaut selvage health goth, knausgaard hell of kombucha salvia sartorial you probably haven't heard of them. Fam godard shoreditch bushwick lo-fi banjo PBR&B post-ironic waistcoat blue bottle. Hammock bushwick tote bag, bespoke synth semiotics williamsburg church-key meh lyft succulents.
        

            Poutine fam small batch, tbh air plant street art.
        

      <div class="row">
    <div class="col-sm-3">
        <div class="col-child-align Callout Callout--light">
            Poutine fam small batch, tbh air plant street art kombucha retro fingerstache semiotics kickstarter hoodie kinfolk tumeric. Truffaut selvage health goth, knausgaard hell of kombucha salvia sartorial you probably haven't heard of them. Fam godard shoreditch bushwick lo-fi banjo PBR&B post-ironic waistcoat blue bottle. Hammock bushwick tote bag, bespoke synth semiotics williamsburg church-key meh lyft succulents.
        </div>
    </div>
    <div class="col-sm-3">
        <div class="col-child-align Callout Callout--light">
            Poutine fam small batch, tbh air plant street art.
        </div>
    </div>
</div>
    

Offsets and Alignment

      <div class="section">

    <div class="row">
        <div class="col-sm-1 col-sm-offset-1">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row start-sm">
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row center-sm">
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row end-sm">
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row top-sm">
        <div class="col-sm-3">
            <div class="Callout Callout--light styleguide-gridcontainer"></div>
        </div>
        <div class="col-sm-3">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row middle-sm">
        <div class="col-sm-3">
            <div class="Callout Callout--light styleguide-gridcontainer"></div>
        </div>
        <div class="col-sm-3">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>

<div class="row bottom-sm">
    <div class="col-sm-3">
        <div class="Callout Callout--light styleguide-gridcontainer"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Distribution

      <div class="section">

    <div class="row around-sm">
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
        <div class="col-sm-1">
            <div class="Callout Callout--light"></div>
        </div>
    </div>

</div>

<div class="row between-sm">
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
    <div class="col-sm-1">
        <div class="Callout Callout--light"></div>
    </div>
</div>
    

Ordering

Reorder grid columns or reverse the position of all columns.

Note: custom orgering can be assigned via a layout file or the order property.

                1
            

                2
            

                3: first-sm
            

                1: last-sm
            

                2
            

                3
            

            1
        

            2
        

            3
        

      <div class="section">

    <div class="row">
        <div class="col-sm-2">
            <div class="Callout Callout--light">
                1
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout Callout--light">
                2
            </div>
        </div>
        <div class="col-sm-2 first-sm">
            <div class="Callout Callout--light">
                3: first-sm
            </div>
        </div>
    </div>

</div>
<div class="section">

    <div class="row">
        <div class="col-sm-2 last-sm">
            <div class="Callout Callout--light">
                1: last-sm
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout Callout--light">
                2
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout Callout--light">
                3
            </div>
        </div>
    </div>

</div>

<div class="row reverse">
    <div class="col-sm-2">
        <div class="Callout Callout--light">
            1
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Callout Callout--light">
            2
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Callout Callout--light">
            3
        </div>
    </div>
</div>
    

Media Object

The Media Object: The grandfather of modular CSS

Note: All Callouts and sections are for display purposes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.

      <div class="Callout section">

    <!-- Default -->
    <div class="mediaObject">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/80/100" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
<div class="Callout section">

    <!-- Nested media objects -->
    <div class="mediaObject">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/80/100" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>

            <div clcass="Callout Callout--light">
                <div class="mediaObject">
                    <figure class="mediaObject-figure">
                        <img src="https://placebear.com/50/50" alt="Bear">
                    </figure>
                    <div class="mediaObject-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<div class="Callout section">

    <!-- Reversed order media objects -->
    <div class="mediaObject mediaObject--reverse">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/250/150" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
<div class="Callout section">

    <!-- Vertically centered media objects -->
    <div class="mediaObject mediaObject--center">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/100/150" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
<div class="Callout section">

    <!-- Responsive media object figure and body become full width on small screens -->
    <div class="mediaObject mediaObject--responsive">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/200/120" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
<div class="Callout section">

    <!-- We can still reverse the responsive media object -->
    <div class="mediaObject mediaObject--responsive mediaObject--reverse">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/180/220" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
<div class="Callout section">

    <!-- Stacked media objects -->
    <div class="mediaObject mediaObject--stack">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/250/150" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
        </div>
    </div>

</div>
    

Spacers

Strict note: These classes must only be used for the circumstances prescribed below. Using these classes for section or other spacing is very problematic. - spacer-media: must only be used to create space between an image or graphic element and the content below it

We love kittehs

      <img class="spacer-media" src="https://placekitten.com/350/250" alt="KITTENS!" />
<p>We love kittehs</p>
    