_l-grid.scss

/* ============================================================================
   @LAYOUT -> GRID
   ========================================================================= */


/**
 * A powerful fluid and nestable mobile first grid system.
 *
 * Combine with the viewport specific width classes found in Utilities ->
 * Widths which all feed from the width settings set here: Core -> Settings ->
 * Widths to apply grid widths at specific viewports, for example:
 *
   <div class="l-grid__item  u-one-half-from-lap u-one-third-from-desk">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it becomes 50% wide, or it is on a desktop device,
 * at which point it becomes 33.333% width. See breakpoints set here: Core ->
 * Settings -> Breakpoints.
 *
 * N.B. grid systems should be thought of as shelves. They contain content but
 * are not content in themselves. You put up your shelves then fill them with
 * your stuff. By setting up our grids separately to our components you can
 * move components around a lot more easily than if they had dimensions
 * applied to them; this makes our front-ends a lot more adaptable and quick
 * to work with.
 *
 * N.B. you should never apply any styles to a grid item, they are for layout
 * purposes only. Apply styling to content inside a grid item.
 *
 * @markup
   <div class="l-grid [modifier(s)]">
     <div class="l-grid__item  u-one-half"> [...] </div>
     <div class="l-grid__item  u-one-half"> [...] </div>
   </div>

   <div class="l-grid [modifier(s)]">
     <div class="l-grid__item  u-one-third"> [...] </div>
     <div class="l-grid__item  u-one-third"> [...] </div>
     <div class="l-grid__item  u-one-third"> [...] </div>
   </div>
 *
 * @demo
 * http://codepen.io/chris-pearce/full/emQqxo
 *
 * @credit
 * https://github.com/csswizardry/csswizardry-grids/blob/master/csswizardry-grids.scss
 */


/**
 * Settings.
 */

/**
 * Gutter sizes.
 */

$l-grid-gutter-base:            $spacing-base !default;

$l-grid-gutter-tiny:            $spacing-third !default;

$l-grid-gutter-small:           $spacing-half !default;

$l-grid-gutter-large:           $spacing-base-plus-half !default;

$l-grid-gutter-huge:            $spacing-double !default;

/**
 * Box sizing.
 *
 * Here we set a variable assuming that `box-sizing: border-box;` is not set
 * globally. If it has been previously been defined, the following variable
 * will be overridden and will be set to `true`.
 */

$apply-friendly-box-model:      false !default;


/**
 * Grid container.
 *
 * 1. Negative `margin-left` to negate the columns gutters.
 * 2. So it can work on inline elements e.g. `span`.
 * 3. Dirty hack to remove browser generated whitespace between elements that
 *    render as `display: inline-block`.
 */

.l-grid {
  @include to-rem(margin-left, -$l-grid-gutter-base); // [1]
  display: block; // [2]
  font-size: 0; // [3]
}


  /**
   * 1. Cause columns to stack side-by-side.
   * 2. Space columns apart.
   * 3. Full-width unless told to behave otherwise.
   * 4. Align columns to the top of each other.
   * 5. Reset font size to be the global default.
   * 6. Required to combine fluid widths and fixed gutters.
   */

  .l-grid__item {
    display: inline-block; // [1]
    @include to-rem(padding-left, $l-grid-gutter-base); // [2]
    width: 100%; // [3]
    vertical-align: top; // [4]
    @include font-size($font-size); // [5]

    @if $apply-friendly-box-model == false {
      box-sizing: border-box; // [6]
    }
  }


/**
 * Modifiers: gutters.
 */

// Gutterless
.l-grid--gutterless {
  margin-left: 0;

  > .l-grid__item {
    padding-left: 0;
  }
}

// Gutter tiny
.l-grid--gutter-tiny {
  @include to-rem(margin-left, -$l-grid-gutter-tiny);

  > .l-grid__item {
    @include to-rem(padding-left, $l-grid-gutter-tiny);
  }
}

// Gutter small
.l-grid--gutter-small {
  @include to-rem(margin-left, -$l-grid-gutter-small);

  > .l-grid__item {
    @include to-rem(padding-left, $l-grid-gutter-small);
  }
}

// Gutter large
.l-grid--gutter-large {
  @include to-rem(margin-left, -$l-grid-gutter-large);

  > .l-grid__item {
    @include to-rem(padding-left, $l-grid-gutter-large);
  }
}

// Gutter huge
.l-grid--gutter-huge {
  @include to-rem(margin-left, -$l-grid-gutter-huge);

  > .l-grid__item {
    @include to-rem(padding-left, $l-grid-gutter-huge);
  }
}


/**
 * Modifier: reversed.
 *
 * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
 * markup will display in order 4, 3, 2, 1 on your page.
 */

.l-grid--reversed {
  direction: rtl;
  text-align: left;

  > .l-grid__item {
    direction: ltr;
    text-align: left;
  }
}


/**
 * Modifiers: vertical alignments.
 */

// Middle alignment
.l-grid--align-middle > .l-grid__item {
  vertical-align: middle;
}

// Bottom alignment
.l-grid--align-bottom > .l-grid__item {
  vertical-align: bottom;
}


/**
 * Modifiers: horizontal alignments.
 */

// Right alignment
.l-grid--align-right {
  text-align: right;

  > .l-grid__item {
    text-align: left;
  }
}

// Center alignment
.l-grid--align-center {
  text-align: center;

  > .l-grid__item {
    text-align: left;
  }
}


/**
 * Modifier: shrink wrap.
 *
 * Make it be the width of it's content.
 */

.l-grid--shrink-wrap > .l-grid__item {
  width: auto;
}