front__codeschool-angular-2/app/sass/components/_grid.sass

// *************************************
//
//   Grid
//   -> Based on the following:
//      * https://github.com/necolas/suit-grid
//      * https://github.com/csswizardry/csswizardry-grids
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .g
//   .grid-box[.grid-box-center|1of2|1of3|...]
//   .grid-box[.grid-box-center|1of2|1of3|...]
//   .grid-box[.grid-box-center|1of2|1of3|...]
//   .grid-box[.grid-box-center|1of2|1of3|...]
//
// *************************************

// -------------------------------------
//   Base
// -------------------------------------

#{$g-selector}grid
  @extend %group
  display: block
  margin-left: -$g-gutter / 2
  margin-right: -$g-gutter / 2

#{$g-selector}grid-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  float: left
  margin: 0
  padding-left: $g-gutter / 2
  padding-right: $g-gutter / 2
  width: 100%

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Center ----- //

#{$g-selector}grid-box-center
  display: block
  float: none
  margin: 0 auto

// -------------------------------------
//   Setup
// -------------------------------------

=device-type($namespace: '')

  // ----- One Part ----- //

  #{$g-selector}grid-box-#{$namespace}1of1
    width: 100%

  // ----- Two Parts ----- //

  #{$g-selector}grid-box-#{$namespace}1of2
    width: 50%

  // ----- Three Parts ----- //

  @if $g-columns >= 3
    #{$g-selector}grid-box-#{$namespace}1of3
      width: 33.333%
    #{$g-selector}grid-box-#{$namespace}2of3
      width: 66.666%

  // ----- Four Parts ----- //

  @if $g-columns >= 4
    #{$g-selector}grid-box-#{$namespace}1of4
      width: 25%
    #{$g-selector}grid-box-#{$namespace}2of4
      @extend #{$g-selector}grid-box-#{$namespace}1of2
    #{$g-selector}grid-box-#{$namespace}3of4
      width: 75%

// -------------------------------------
//   Creation
// -------------------------------------

+device-type()

@each $device in $g-defaults
  @media screen and (min-width: nth($device, 2))
    +device-type("#{nth($device, 1)}--")