_grid.css.scss

@import 'bourbon';

$visual-grid: true; // Turn on the visual grid overlay

$max-width: 960px;
$grid-columns: 8;

$mobile-size: 480px;
$tablet-size: 768px;
$desktop-size: 960px;

$mobile-breakpoint:            new-breakpoint(max-width $mobile-size 4);
$mobile-landscape-breakpoint:  new-breakpoint(min-width $mobile-size max-width $tablet-size $grid-columns);
$tablet-breakpoint:            new-breakpoint(min-width $tablet-size max-width $desktop-size $grid-columns);
$desktop-breakpoint:           new-breakpoint(min-width $desktop-size $grid-columns);

@import 'neat';

base.css.scss

@import '../common/grid';
@import '../common/variables';
@import '../common/mixins';

.container {
  @include outer-container;
}

@include media($tablet-breakpoint) {
  .container {
    max-width: $tablet-size;
  }
}