menu

DESIGN SYSTEM

Layout

BREAKPOINTS

These are the new SASS variables for media query breakpoints. These variables are defined in assets/stylesheets/_grid-settings.scss

SASS Variable Minimum Width Device
$screen-xs 320px mobile phones
$screen-sm 600px tablets and ipads
$screen-md 1020px ipad pros and small laptops
$screen-lg 1440px laptops and small desktops
$screen-xl 1920px desktops
$screen-xxl 2400px large desktops and mac

    div.element {
        @include media($screen-md) {
            width: 300px;
        }
        @include media($screen-xl) {
            width: 600px;
        }
    }
    
RESPONSIVE ELEMENTS

You can show or hide an element on mobile and desktop by adding class name "mobile-hide" or "mobile-show" to any element

.mobile-hide hides an element for all screens narrower than 700px. .mobile-show shows an element for all screens wider than 700px

This div is only visible on screens wider than 700px

This div is only visible on screens narrower than 700px


    <div class="mobile-hide bg-nannas-car-blue responsive-example">
        <h3 class="txt-white">This div is only visible on screens wider than 700px</h3>
    </div>

    <div class="mobile-show bg-tiffany-teal responsive-example">
        <h3 class="txt-white">This div is only visible on screens narrower than 700px</h3>
    </div>
    
GRID

This is using Flexbox Grid - a grid system based on the flex display property. Flexbox Grid has responsive modifiers that enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg, xl & xxl viewport widths.

.col-xs-12
.col-xs-12 / col-sm-6
.col-xs-12 / col-sm-6
.col-xs-12 / col-sm-4
.col-xs-12 / col-sm-4
.col-xs-12 / col-sm-4
.col-xs-12 / col-md-6 / col-lg-6 / col-xl-3
.col-xs-12 / col-md-6 / col-lg-6 / col-xl-3
.col-xs-12 / col-md-6 / col-lg-6 / col-xl-3
.col-xs-12 / col-md-6 / col-lg-6 / col-xl-3
.col-xs-6 / col-sm-4 / col-lg-2
.col-xs-6 / col-sm-4 / col-lg-2
.col-xs-6 / col-sm-4 / col-lg-2
.col-xs-6 / col-sm-4 / col-lg-2
.col-xs-6 / col-sm-4 / col-lg-2
.col-xs-6 / col-sm-4 / col-lg-2
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1
.col-lg-3 / col-xl-2 / col-xxl-1

    <div class="flexbox-row">
        <div class="col-xs-12">
            <div class="bg-compassion-blue box">.col-xs-12</div>
        </div>
    </div>
    <div class="flexbox-row">
        <div class="col-xs-6"><div class="bg-neighbours-pool box">.col-xs-6</div></div>
        <div class="col-xs-6"><div class="bg-neighbours-pool box">.col-xs-6</div></div>
    </div>
    <div class="flexbox-row">
        <div class="col-xs-12 col-sm-4"><div class="bg-nannas-car-blue txt-white box">.col-xs-12 / col-sm-4</div></div>
        <div class="col-xs-12 col-sm-4"><div class="bg-nannas-car-blue txt-white box">.col-xs-12 / col-sm-4</div></div>
        <div class="col-xs-12 col-sm-4"><div class="bg-nannas-car-blue txt-white box">.col-xs-12 / col-sm-4</div></div>
    </div>
    
CONTENT CONTAINERS

.content.narrow max-width: 700px

.content.slightly-less-narrow max-width: 800px

.content.wide max-width: 1400px

.content.wider max-width: 1800px

.content.full max-width: 100% of parent container


    <div class="content narrow container-example bg-cool-grey txt-shady-navy">
        <p>.content.narrow</p>
    </div>
    <div class="content slightly-less-narrow container-example bg-cool-grey txt-shady-navy">
        <p>.content.slightly-less-narrow</p>
    </div>
    <div class="content wide container-example bg-cool-grey txt-shady-navy">
        <p>.content.wide</p>
    </div>
    <div class="content wider container-example bg-cool-grey txt-shady-navy">
        <p>.content.wider</p>
    </div>
    <div class="content full container-example bg-cool-grey txt-shady-navy">
        <p>.content.full</p>
    </div>