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 approach, 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 decreased margin-bottom, typically for lesser content sections.
    

        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 background.

    Section distinct can also be used with a background image. Section-backdrop 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-sm">
    <div class="Callout Callout--light">
        A section with decreased margin-bottom, typically for lesser content sections.
    </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 background.
</div>

<div class="section-backdrop section-reverse section-distinct bg-mountains">
    Section distinct can also be used with a background image. Section-backdrop must also be used with background-images.
</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="section">
    <div class="row">
        <div class="col-sm-2">
            <div class="Callout"></div>
        </div>
        <div class="col-sm-4">
            <div class="Callout"></div>
        </div>
    </div>
</div>

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

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

Using 12 columns grid

Optionally, you can use 12 columns grid by adding a class of col-range-12 at the top element of columns.

      <div class="section">
    <div class="row col-range-12">
        <div class="col-md-6">
            <div class="Callout"></div>
        </div>
        <div class="col-md-6">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row col-range-12">
        <div class="col-md-4">
            <div class="Callout"></div>
        </div>
        <div class="col-md-4">
            <div class="Callout"></div>
        </div>
        <div class="col-md-4">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row col-range-12">
        <div class="col-md-3">
            <div class="Callout"></div>
        </div>
        <div class="col-md-3">
            <div class="Callout"></div>
        </div>
        <div class="col-md-3">
            <div class="Callout"></div>
        </div>
        <div class="col-md-3">
            <div class="Callout"></div>
        </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"></div>
    </div>
</div>
    

Centered grid columns

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

Vertical columns

      <div class="row vertical">
    <div class="col-sm-2">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
    

Shrink and Grow

            Shrink
        

            Grow
        

      <div class="row">
    <div class="col-sm-shrink-1">
        <div class="Callout">
            Shrink
        </div>
    </div>
    <div class="col-sm-grow-1">
        <div class="Callout">
            Grow
        </div>
    </div>
</div>
    

Gutters x-axis

You can use gutter-x-xs, gutter-x-sm, gutter-x-lg, gutter-x-xl, and gutter-x-xxl.

      <div class="row gutter-x-xs">
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
<div class="row gutter-x-sm">
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
<div class="row gutter-x-lg">
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
<div class="row gutter-x-xl">
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
<div class="row gutter-x-xxl">
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-3">
        <div class="Callout"></div>
    </div>
</div>
    

Gutters y-axis

You can use gutter-y, gutter-y-xs, gutter-y-sm, gutter-y-lg, gutter-y-xl, and gutter-y-xxl.

      <div class="row gutter-y">
    <div class="col-sm-6">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-6">
        <div class="Callout"></div>
    </div>
    <div class="col-sm-6">
        <div class="Callout"></div>
    </div>
</div>
    

Grid nesting

      <div class="row">
    <div class="col-sm-4">
        <div class="Callout">
            <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">
            <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="Callout is-full-height">
            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="Callout is-full-height">
            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"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row start-sm">
        <div class="col-sm-1">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row center-sm">
        <div class="col-sm-1">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row end-sm">
        <div class="col-sm-1">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row top-sm">
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row middle-sm">
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row bottom-sm">
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
        <div class="col-sm-3">
            <div class="Callout"></div>
        </div>
    </div>
</div>
    

Distribution

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

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

Ordering

Reorder grid columns or reverse the position of all columns.

Note: custom ordering 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">
                1
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout">
                2
            </div>
        </div>
        <div class="col-sm-2 first-sm">
            <div class="Callout">
                3: first-sm
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="row">
        <div class="col-sm-2 last-sm">
            <div class="Callout">
                1: last-sm
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout">
                2
            </div>
        </div>
        <div class="col-sm-2">
            <div class="Callout">
                3
            </div>
        </div>
    </div>
</div>

<div class="row reverse">
    <div class="col-sm-2">
        <div class="Callout">
            1
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Callout">
            2
        </div>
    </div>
    <div class="col-sm-2">
        <div class="Callout">
            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.

Lorem ipsum dolor sit amet.

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 Callout--edged 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">
    <!-- Inline media objects -->
    <div class="mediaObject mediaObject--inline">
        <figure class="mediaObject-figure">
            <img src="https://placebear.com/100/150" alt="Bear">
        </figure>
        <div class="mediaObject-body">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>
<div class="Callout section">
    <!-- Vertically centered media objects -->
    <div class="mediaObject mediaObject--middle">
        <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>
    