Extend inuit.css

foundation-grid.scss

// Foundation Grid
//
// A Sticky used on canvases
//
// Markup:
// <div class="row">
//   <div class="small-2 large-4 columns"><div class="kss-example-component">...</div></div>
//   <div class="small-4 large-4 columns"><div class="kss-example-component">...</div></div>
//   <div class="small-6 large-4 columns"><div class="kss-example-component">...</div></div>
// </div>
// <div class="row">
//   <div class="small-3 small-centered columns"><div class="kss-example-component">3 centered</div></div>
// </div>
// <div class="row medium-uncollapse large-collapse">
//   <div class="small-6 columns">
//     <div class="kss-example-component">Removes gutter at large media query</div>
//   </div>
//   <div class="small-6 columns">
//     <div class="kss-example-component">Removes gutter at large media query</div>
//   </div>
// </div>
// <div class="row">
//   <div class="small-10 small-push-2 columns"><div class="kss-example-component">10</div></div>
//   <div class="small-2 small-pull-10 columns"><div class="kss-example-component">2, last</div></div>
// </div>
// <div class="row">
//   <div class="large-1 columns"><div class="kss-example-component">1</div></div>
//   <div class="large-8 large-offset-3 columns"><div class="kss-example-component">8, offset 3</div></div>
// </div>
// <div class="row row__gutter">
//   <div class="large-4 columns"><div class="kss-example-component">1</div></div>
//   <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div>
// </div>
// <div class="row row__gutter--flush">
//   <div class="large-4 columns"><div class="kss-example-component">1</div></div>
//   <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div>
// </div>
// <div class="row row__gutter--medium">
//   <div class="large-4 columns"><div class="kss-example-component">1</div></div>
//   <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div>
// </div>
//
// Styleguide objects.foundation-grid

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

$print-breakpoint: large;

$-zf-zero-breakpoint: small;

$breakpoint-classes: (small medium large);

// Grid

$global-flexbox: false;
$global-width: $inuit-wrapper-width;
$global-left: left;
$global-right: right;

$grid-row-width: $global-width;

$grid-column-count: 12;

$grid-column-gutter: (
  small: 24px,
  medium: 36px,
);

$grid-column-align-edge: true;

$block-grid-max: 8;

@include foundation-grid(
  $row: 'row',
  $column: 'column',
  $column-row: 'column-row',
  $gutter: 'gutter',
  $push: 'push',
  $pull: 'pull',
  $center: 'centered',
  $uncenter: 'uncentered',
  $collapse: 'collapse',
  $uncollapse: 'uncollapse',
  $offset: 'offset',
  $end: 'end',
  $expanded: 'expanded',
  $block: 'block'  
);

.row__gutter {

  > .column,
  > .columns {
    @include grid-col-gutter(24px);
  }
}

.row__gutter--flush {

  > .column,
  > .columns {
    @include grid-col-gutter(0);
  }
}

.row__gutter--medium {

  > .column,
  > .columns {
    @include grid-col-gutter(36px);
  }
}

neat-grid.scss

// Neat Grid
//
// Exmaple for a Neat grid
//
// .o-neat-grid--collapse - Collapse
//
// Markup:
// <div class="o-neat-grid {{modifier_class}}">
//   <div class="o-neat-grid__col"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-desktop-6"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-desktop-6"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-6 u-desktop-6"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-6 u-desktop-3"><div class="kss-example-component">1</div></div>
//   <div class="o-neat-grid__col u-tablet-3 u-tablet-push-3 u-desktop-6 u-desktop-push-3">
//     <div class="kss-example-component">1</div>
//   </div>
//   <div class="o-neat-grid__col u-tablet-only-3"><div class="kss-example-component">1</div></div>
// </div>
//
// Styleguide objects.neat-grid

$neat-grid: (
  columns: 12,
  gutter: 24px,
  media: null,
  color: $strat-blue-40
);

$strat-widths-breakpoint-separator: "-";

.o-neat-grid {
  @include grid-container($neat-grid);

  @if (strat-config(debug) == true) {
    @include grid-visual();
  }
}

  .o-neat-grid__col {
    @include grid-column(12, $neat-grid);
  }


.o-neat-grid--collapse {
  @include grid-collapse;
}

// Responsive Widths
// =============================================================================

@mixin strat-neat-width($breakpoint: null) {
  @for $span from 1 through map-get($neat-grid, columns) {
    .u#{$breakpoint}-#{$span} {
      @include grid-column($span, $neat-grid);
    }
  }
}

@mixin strat-neat-push($breakpoint: null) {
  @for $span from 1 through map-get($neat-grid, columns) {
    .u#{$breakpoint}-push-#{$span} {
      @include grid-push($span, $neat-grid);
    }
  }
}

@mixin strat-neat-shift($breakpoint: null) {
  @for $span from 1 through map-get($neat-grid, columns) {
    .u#{$breakpoint}-shift-#{$span} {
      @include grid-shift($span, $neat-grid);
    }
  }
}

@include strat-neat-width;
@include strat-neat-push;
@include strat-neat-shift;

@if (variable-exists(mq-breakpoints)) {
  @each $bp-from, $bp-value in $mq-breakpoints {
    @debug index($mq-breakpoints, ($bp-from $bp-value));
  }

  @each $bp-from, $bp-value in $mq-breakpoints {
    $index: index($mq-breakpoints, ($bp-from $bp-value));
    $next: $index + 1;
    $bp-until: null;

    @if ($next <= length($mq-breakpoints)) {
      $bp-until: nth(nth($mq-breakpoints, $next), 1);
    }

    @include mq($from: $bp-from) {
      @include strat-neat-width(#{$strat-widths-breakpoint-separator}#{$bp-from});
      @include strat-neat-push(#{$strat-widths-breakpoint-separator}#{$bp-from});
      @include strat-neat-shift(#{$strat-widths-breakpoint-separator}#{$bp-from});
    }

    @if ($bp-until) {
      @include mq($from: $bp-from, $until: $bp-until) {
        @include strat-neat-width(#{$strat-widths-breakpoint-separator}#{$bp-from}-only);
        @include strat-neat-push(#{$strat-widths-breakpoint-separator}#{$bp-from}-only);
        @include strat-neat-shift(#{$strat-widths-breakpoint-separator}#{$bp-from}-only);
      }
    }
  }
}