Usage Guidlines

Table of Contents

• Grids

  1. Overview
  2. Flex Grid
  3. Float Grid

• Breakpoints

  1. Overview
  2. Variables
  3. Max Width
  4. Min Width
  5. Max and Min Width
  6. More Options

Grids Overview

Speyside grids can utilize either flex box or floats.

Flex Grid

Create a flex box grid with 4 autosized columns

<div class="grid flex">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Create a flex box grid with 3 autosized columns and 1 column with 50% width

<div class="grid flex">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col-6">
</div>

Create a flex box grid with horizontal gutters

<div class="grid flex gutter-5-h">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Create a flex box grid with vertical gutters

<div class="grid flex gutter-5-v">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Create a flex box grid with vertical and horizontal gutters

<div class="grid flex gutter-5">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Create a flex box grid with collapsed outer margins and horizontal gutters

<div class="grid flex collapse gutter-5-h">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Create a flex box grid with collapsed outer margins and horizontal gutters

<div class="grid flex collapse gutter-5-h">
  <div class="col">
  <div class="col">
  <div class="col">
  <div class="col">
</div>

Float Grid

This featured is not available yet

<div class="grid">
  <div class="col-3">
  <div class="col-3">
  <div class="col-3">
  <div class="col-3">
</div>

Breakpoints Overview

Breakpoints Variables

Add the $breakpoints variable to your class to override the predefined values

$breakpoints: (
  mobile: 768px,
  laptop: 992px,
  desktop: 1200px
);

Max Width

Add a max width breakpoint using a value defined in $breakpoints

.class {
  @include breakpoint(laptop, max) {
    display: block;
  }
}

Or use with a hard-coded value for one-off situations

.class {
  @include breakpoint(1200px, max) {
    display: block;
  }
}

Min Width

Add a min width breakpoint using a value defined in $breakpoints

.class {
  @include breakpoint(laptop, min) {
    display: block;
  }
}

Or use with a hard-coded value for one-off situations

.class {
  @include breakpoint(1200px, min) {
    display: block;
  }
}

Max and Min Width

Add a min and width breakpoint using a value defined in $breakpoints This instance would hide an element on larger mobile devices only

.class {
  @include breakpoint(mobile, min) {
    @include breakpoint(laptop, max) {
      display: none;
    }
  }
}

Or use with hard-coded values for one-off situations

.class {
  @include breakpoint(768px, min) {
    @include breakpoint(1200px, max) {
      display: none;
    }
  }
}

More Options

Target orientation, max-height, and more using a value defined in $breakpoints

.class {
    @include breakpoint(landscape, orientation) {
        display: block;
    }
}

Or use with a hard-coded value for one-off situations

.class {
    @include breakpoint(1200px, orientation) {
        display: block;
    }
}

Let's get crazy

This instance would hide an element on larger mobile devices with a landscape orientation only

.class {
  @include breakpoint(mobile, min) {
    @include breakpoint(laptop, max) {
      @include breakpoint(landscape, orientation) {
        display: none;
      }
    }
  }
}

Or with hard-coded values

.class {
  @include breakpoint(768px, min) {
    @include breakpoint(1200px, max) {
      @include breakpoint(landscape, orientation) {
        display: none;
      }
    }
  }
}