• Skeleton Grid • Marionette Grid • Item Grid •

00 • Skeleton Grid • Marionette Grid • Item Grid • .scss

// -------------------------------------------------------------------
// About
// -------------------------------------------------------------------
// Grid Skeleton: http://getskeleton.com/
// Our old montereybayaquarium.org site was built using skeleton. When we 
// migrated from our old system to our new sitecore CMS, we used bourbon/neat to 
// write a Skeleton class framework to complement our existing styles.
//
// Unfortunately, this meant taking advantage of new features and writing responsive 
// code requred us to create custom one-off classes using sass, bourbon, and neat, 
// and while this is technically feasible, it also meant code blot and inconsistent 
// components.
//
// Drawing from practical experience coding a responsive, mobile first website, I 
// created marionette, a responsive add-on to skeleton that adds class-based overrides
// to Skeleton and allows for a lot more control. The second need we had was a
// responsive framework to display items in horizontal rows. While we had a few custom
// item grids that had been created, these were all inconsistent with each other,
// and also suffered from bloat and unnecessary redundancy.
//
// Out of that need, Item Grid was conceived. It starts as a one-item column, and,
// breakpoint by breakpoint, can grow to span as many 

01_grid-settings.scss

// ------------------------------------------------------------
// Omega Reset Helpers
// http://joshfry.me/notes/omega-reset-for-bourbon-neat/#update_your_grid_settings
// ------------------------------------------------------------

$column: golden-ratio(1em, 2) !default; // Column width
$gutter: golden-ratio(1em, 2) !default; // Gutter between each two columns

$fg-column: $column;
$fg-gutter: $gutter;

// ------------------------------------------------------------
// Grid Container max-width
// http://neat.bourbon.io/docs/#max-width
// ------------------------------------------------------------

$max-width: em(1200);

// ---------------------------------------------------------------------------
// Grid Skeleton and Marionette lists and variables
// ------------------------------------------------------------
$column-pairs: ( (one, 1), (two, 2), (three, 3), (four, 4), (five, 5), (six, 6), (seven, 7), (eight, 8), (nine, 9), (ten, 10), (eleven, 11), (twelve, 12) );
$fraction-classes: half, one-third, two-thirds, one-fifth, two-fifth, two-fifths, three-fifth, three-fifths, four-fifth, four-fifths;
$fraction-columns: ( (half, 6), (one-third, 4), (two-thirds, 8), (one-fifth, 2.4), (two-fifth, 4.8), (two-fifths, 4.8), (three-fifth, 7.2), (three-fifths, 7.2), (four-fifth, 9.6), (four-fifths, 9.6) );

// Grid Skeleton/Marionette Variables
// ------------------------------------------------------------
// When using column gutters, use the flex-gutter() neat function. For example:
// margin-bottom: flex-gutter();
// margin-right: flex-gutter();
// padding: flex-gutter();
// ---------------------------------------------------------------------------
$base-padding: em(24);

$box-padding: $base-padding;

02_grid-skeleton.scss

// -------------------------------------------------------------------
// Skeleton Grid
// -------------------------------------------------------------------
// See documentation at http://montereybayaquarium.org/styleguide/grid-skeleton

/*
  1 - Semantic classes for auto-clearing floats
  2 - Add class .omega to the last item in each row
  3 - Add margin bottom to container columns
*/
/* 1 */ .row, .group, .cf {
  @include clearfix;
}
/* 2 */
// We previously tried to move this to the bottom to remove the necessity for the !important flag, but that had unintended consequences on some form and other layout bugs. Important flag is actually necessary here.
.omega {
  margin-right: 0 !important;
}

/* 3 */
.container, .row, .group, .cf {
  .column, .columns {
    margin-bottom: .5em;
  }
}


// ---------------------------------------------------------------------
// Lists
// ---------------------------------------------------------------------
// $column-pairs, $fraction-classes and $fraction-columns are defined in _grid-settings.scss 

// ---------------------------------------------------------------------
// Grid Skeleton mixin
// ---------------------------------------------------------------------
// Stack columns below 720px by default... This means both phablet and tablet breakpoints are normally stacked.
//
// ...or provide a custom breakpoint like this:
//
// .grid-skeleton-demo {
//   @include skeleton-grid(30em);
// }
//
// @include skeleton-grid() is currently used by membership forms.
// A 45em breakpoint was too wide, so we used 30em instead.
//
// -------------------------------------------------------------------

@mixin skeleton-grid($skeleton-grid-breakpoint) {
  @include media($skeleton-grid-breakpoint) {
    // Base Grid
    //.one.column, .one.columns, .span1
    @each $number, $num in $column-pairs {
      .#{$number}.column, .#{$number}.columns, .span#{$num} {
        @include span-columns($num);
        clear: none;
      }
    }

    .twelve.column, .twelve.columns, .span12 {
      @include omega();
    }
    // .two-third.column, .two-third.columns, .two-third
    @each $fraction, $column in $fraction-columns {
      .#{$fraction}.column, .#{$fraction}.columns {
        @include span-columns($column);
        clear: none;
      }
    }
    // Push
    // .offset-by-one, .push1
    @each $number, $num in $column-pairs {
      .offset-by-#{$number}, .push#{$num}, .push-#{$num} {
        @include shift($num);
      }
    }
    // Pull
    // .pull1
    @for $shift from 1 through 12 {
      .pull#{$shift}, .pull-#{$shift} {
        @include shift(-$shift);
      }
    }
  }
}

// Initialize Skeleton grid on the body
// -------------------------------------------------------------------

body {
  @include skeleton-grid(45em);
}

03_grid_marionette.scss

// Grid Marionette
// Created by Kevin Garcia
// Updated 2/25/2016 by Kevin Garcia
// This create additional responsive classes that apply to specific
// breakpoints only, as well as adds utility visibility classes that
// extend the default skeleton grid.
//
// In a nutshell, Marionette adds breakpoint-specific functionality that complements and extends skeleton.
//
// See documentation at http://montereybayaquarium.org/styleguide/grid-marionette
// -------------------------------------------------------------------


// -------------------------------------------------------------------
// Lists
// Marionette lists are dependent on _grid-skeleton lists. 
// -------------------------------------------------------------------

// -------------------------------------------------------------------
// Mixins
// -------------------------------------------------------------------

@mixin generate-fractions($breakpoint-class, $fraction, $math) {
  //.mobi-one-third.column, .mobi-one-third.columns, .mobi-one-third
  .#{$breakpoint-class}-#{$fraction}.column, .#{$breakpoint-class}-#{$fraction}.columns, .#{$breakpoint-class}-#{$fraction} {
    @include span-columns ($math);
    display: block;
    clear: none;
  }
}

@mixin marionette-grid($breakpoint-class) {
  // Shows conditional classes per breakpoint
  // .show-on-mobi, .column.show-on-mobi, columns.show-on-mobi,
  // .mobi, .column.mobi, .columns.mobi
  .show-on-#{$breakpoint-class}, .column.show-on-#{$breakpoint-class}, .columns.show-on-#{$breakpoint-class},
  .#{$breakpoint-class}, .column.#{$breakpoint-class}, .columns.#{$breakpoint-class} {
    display: block !important; // overrides default Internet Explorer behavior. (see http://caniuse.com/#feat=css-initial-value)
    display: initial !important;
  }
  // Hides conditional classes per breakpoint
  // .hide-on-mobi, .column.hide-on-mobi, .columns.hide-on-mobi
  .hide-on-#{$breakpoint-class}, .column.hide-on-#{$breakpoint-class}, .columns.hide-on-#{$breakpoint-class} {
    display: none !important;
  }
  // Generates fractional CSS for odd column sizes
  @include generate-fractions($breakpoint-class, half, 6);
  @include generate-fractions($breakpoint-class, one-third, 4);
  @include generate-fractions($breakpoint-class, two-thirds, 8);
  @include generate-fractions($breakpoint-class, one-fifth, 2.4);
  @include generate-fractions($breakpoint-class, two-fifth, 4.8);
  @include generate-fractions($breakpoint-class, two-fifths, 4.8);
  @include generate-fractions($breakpoint-class, three-fifth, 7.2);
  @include generate-fractions($breakpoint-class, three-fifths, 7.2);
  @include generate-fractions($breakpoint-class, four-fifth, 9.6);
  @include generate-fractions($breakpoint-class, four-fifths, 9.6);
  // Generates the breakpoint-conditional grid classes
  @for $i from 1 through 12 {
    //.mobi-1, .column.mobi-1, .columns-mobi-1,
    //.mobi-1-omega, .column.mobi-1-omega, .columns.mobi-1-omega
    .#{$breakpoint-class}-#{$i}, .column.#{$breakpoint-class}-#{$i}, .columns.#{$breakpoint-class}-#{$i},
    .#{$breakpoint-class}-#{$i}-omega, .column.#{$breakpoint-class}-#{$i}-omega, .columns.#{$breakpoint-class}-#{$i}-omega {
      @include span-columns($i);
      display: block;
      margin-right: flex-gutter()!important; // woo hoo! 

      &:after {
        clear: none;
        display: none;
      }
    }
  }
  // Generates breakpoint-conditional pull/push classes
  @for $shift from 1 through 12 {
    // .mobi-pull1
    .#{$breakpoint-class}-pull#{$shift}, .#{$breakpoint-class}-pull-#{$shift} {
      @include shift(-$shift);
    }
    // .mobi-push1
    .#{$breakpoint-class}-push#{$shift}, .#{$breakpoint-class}-push-#{$shift} {
      @include shift($shift);
    }
  }
}

@mixin marionette-omega($breakpoint-class) {
  // Generates fractional CSS for odd column size omega classes
  @each $fraction in $fraction-classes {
    //.mobi-one-third.column-omega, .mobi-one-third.columns-omega, .mobi-one-third-omega
    .#{$breakpoint-class}-#{$fraction}.column-omega, .#{$breakpoint-class}-#{$fraction}.columns-omega, .#{$breakpoint-class}-#{$fraction}-omega {
      @include omega();
      margin-right: 0 !important; // This resets the reset so marionette omega classes work properly
    }
  }
  // Generates breakpoint-conditional omega grid classes
  @for $i from 1 through 12 {
    // .mobi-1-omega, .column.mobi-1-omega, .columns.mobi-1-omega
    .#{$breakpoint-class}-#{$i}-omega, .column.#{$breakpoint-class}-#{$i}-omega, .columns.#{$breakpoint-class}-#{$i}-omega {
      @include omega();
      margin-right: 0 !important; // this resets the reset so marionette omega classes work properly // todo: investigate if this can be removed down the road.
    }
  }
}

@mixin marionette {

  @media all and (max-width: em(479px)) {
    @include marionette-grid(mobi);
    @include marionette-omega(mobi);
  }

  @media all and (min-width: em(480px)) and (max-width: em(719px)) {
    @include marionette-grid(phablet);
    @include marionette-omega(phablet);
  }

  @media all and (min-width: em(720px)) and (max-width: em(1039px)) {
    @include marionette-grid(tablet);
    @include marionette-omega(tablet);
  }

  @media all and (min-width: em(1040px)) and (max-width: em(1199px)) {
    @include marionette-grid(desktop);
    @include marionette-omega(desktop);
  }

  @media all and (min-width: em(1200px)) {
    @include marionette-grid(wide);
    @include marionette-omega(wide);
  }
}



// Initialize Marionette grid on the body
// -------------------------------------------------------------------
body {
  
  // Show / Hide Helper Base Classes
  .show-on-mobi, .show-on-phablet, .show-on-tablet, .show-on-desktop, .show-on-wide,
  .mobi, .phablet, .tablet, .desktop, .wide {
    display: none !important;
  }
  
  // Initialize Marionette
  @include marionette;
  
  // Show / Hide Helper Classes per breakpoint
  .show-on-mobile-devices, .show-on-desktop-devices {
      display: none !important;
    }
  
  .hide-on-mobile-devices, .hide-on-desktop-devices {
    display: inline-block !important; // overrides default Internet Explorer behavior. (see http://caniuse.com/#feat=css-initial-value)
    display: initial !important;
  }
  
  // Initialize mobile device show/hide classes
  
  @media all and (max-device-width: em(1039px)) {
    .show-on-mobile-devices {
      display: inline-block !important; // overrides default Internet Explorer behavior. (see http://caniuse.com/#feat=css-initial-value)
      display: initial !important;
    }
  
    .hide-on-mobile-devices {
      display: none !important;
    }
  }
  
  @media all and (min-device-width: em(1040px)) {
    .show-on-desktop-devices {
      display: inline-block !important; // overrides default Internet Explorer behavior. (see http://caniuse.com/#feat=css-initial-value)
      display: initial !important;
    }
  
    .hide-on-desktop-devices {
      display: none !important;
    }
  }
}

04_item_grid.scss

// -------------------------------------------------------------------
// Item Grid
// Created by Kevin Garcia
// Updated 2/25/2016 by Kevin Garcia
// Item grid is a content-agnostic responsive scaffold.
// Used in conjunction with grid-marionette, it allows designers
// to quickly build responsive layouts with many variations.
// See documentation at http://montereybayaquarium.org/styleguide/item-grid
// -------------------------------------------------------------------

$grid-components: (
// $item-name, $cols, $omega, $shift
("1-grid", 12, 1n),
("1-narrow", 10, 1n, 1),
("1-thin", 9, 1n, 1.5), 
("2-grid", 6, 2n), 
("3-grid", 4, 3n), 
("4-grid", 3, 4n), 
("5-grid", 2.4, 5n), 
("6-grid", 2, 6n), 
("7-grid", 1.7142857143, 7n), 
("8-grid", 1.5, 8n) );

@mixin item-grid($breakpoint-class) {
  @each $item-name, $cols, $omega, $shift in $grid-components {
    &.#{$breakpoint-class}-#{$item-name} {
      .grid-item {
        @include span-columns($cols);
        @include omega($omega);

        @if $shift {
          @include shift($shift);
        }
      }
    }
  }
}

@mixin item-reset {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.item-grid {
  $item_vertical_spacing: 1.5em;
  @include item-reset();
  @include clearfix();

  .grid-item {
    @include item-reset();
    margin-bottom: $item_vertical_spacing; // fallback
    margin-bottom: flex-gutter();

    &.orange-box, &.black-box, &.gray-box, &.light-gray-box, &.white-box, &.blue-box, .transparent-box {
      padding: $box-padding;
    }

    &.border {
      border: 1px solid $gray;
    }

    p {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  // Mobile first. Devices up to 29.9375em (479px / 16px ) */
  @media all and (max-width: 29.9375em) {
    @include item-grid(mobi);
  }
  // Phablet - 30em (480px / 16px)  to  44.9365em (719px / 16px) */
  @media all and (min-width: 30em) and (max-width: 44.9375em) {
    @include item-grid(phablet);
  }
  // Tablet - 45em (720px / 16px) to 64.9375em (1039px / 16px) */
  @media all and (min-width: 45em) and (max-width: 64.9375em) {
    @include item-grid(tablet);
  }
  // Standard Desktops - 65em (1040px / 16px) to 74.9365em (1199px / 16px) */
  @media all and (min-width: 65em) and (max-width: 74.9375em) {
    @include item-grid(desktop);
  }
  // Wide displays - 75em (1200px / 16px) and above */
  @media all and (min-width: 75em) {
    @include item-grid(wide);
  }
}