racket/new-racket-web/sass/_grid.scss

/*=================================================

  +++ LE GRID +++
  A Responsive Grid -- Gumby defaults to a standard 960 grid,
  but you can change it to whatever you'd like.

 ==================================================*/

// We're removing the container class in favor
// of adding padding to rows at the $device-width
// breakpoint.

/*.container {
  padding: 0px $gutter-in-px;
}*/

.row {
  width: 100%;
  max-width: $row-max-width;
  min-width: $min-device-width;
  margin: 0 auto;
  @include respond(document-width) {
    padding: 0 $gutter-in-px;
  }
  .row {
    min-width: 0px;
    @include respond(document-width) {
      padding: 0;
    }
  }
}

/* To fix the grid into a different size, set max-width to your desired width */

.column, .columns {
  margin-left: $gutter;
  float: $default-float;
  min-height: 1px;
  @include box-sizing(border-box);
}

.column:first-child, .columns:first-child, .alpha {
  margin-left: 0px;
}

.column.omega, .columns.omega {
  float: $switch-float;
}

// Generate the Grid

/* Column Classes */

// Generate Column Classes
.row {
  @for $i from 1 through $cols{
    @if $i == 1 {
      .one.column {
        width: columns($i);
      }
    }
    .#{number-as-word($i)}.columns {
      width: columns($i);
    }
  }
}

/* Push Classes */

// Generate Push Classes
.row {
  @for $i from 1 through $cols - 1 {
    .push_#{number-as-word($i)} {
      margin-left: push_x($i);
        &:first-child {
        margin-left: push_x($i, true);
      }
    }
  }
}

/* Centered Classes */

// Generate Centered Classes
.row {
  @for $i from 1 through $cols - 1 {
    .#{number-as-word($i)}.centered {
      margin-left: centered($i);
    }
  }
}

/* Hybrid Grid Columns */

// Generate Hybrid Grid Column Classes
.#{number-as-word($hybrid)}.colgrid .row {
  @for $i from 1 through $hybrid{
    @if $i == 1 {
      .one.column {
        width: columns($i, true);
      }
    }
    .#{number-as-word($i)}.columns{
      width: columns($i, true);
    }
  }
}

/* Hybrid Push Classes */

// Generate Hybrid Push Classes
.#{number-as-word($hybrid)}.colgrid .row {
  @for $i from 1 through $hybrid - 1{
    .push_#{number-as-word($i)} {
      margin-left: push_x($i, false, true);
        &:first-child {
        margin-left: push_x($i, true, true);
      }
    }
  }
}

/* Hybrid Centered Classes */

// Generate Centered Classes
.#{number-as-word($hybrid)}.colgrid .row {
  @for $i from 1 through $hybrid - 1 {
    .#{number-as-word($i)}.centered {
      margin-left: centered($i, true);
    }
  }
}

.pull_right { float: right; }

.pull_left { float: left; }

img, object, embed {
  max-width: 100%;
  height: auto;
}

img {
  -ms-interpolation-mode: bicubic;
}

#map_canvas img, .map_canvas img {
  max-width: none !important;
}

/* Tile Grid */

.tiles {
  display: block;
  overflow: hidden;
  > li {
    display: block;
    height: auto;
    float: left;
    padding-bottom:0;
  }
  &.two_up {
    margin-left: -4%;
    > li {
      margin-left: 4%;
      width: 46%;
    }
  }
  &.three_up, &.four_up {
    margin-left: -2%;
  }
  &.three_up > li {
    margin-left: 2%;
    width: 31.3%;
  }
  &.four_up > li {
    margin-left: 2%;
    width: 23%;
  }
  &.five_up {
    margin-left: -1.5%;
    > li {
      margin-left: 1.5%;
      width: 18.5%;
    }
  }
}

/* Nicolas Gallagher's micro clearfix */

.clearfix {
  @include clearfix();
}

.row {
  @include clearfix();
}


// vertically align stuff

.valign {
  display: table;
  width: 100%;
  > div {
    display: table-cell;
    vertical-align: middle;
  }​
  > article {
    display: table-cell;
    vertical-align: middle;
  }
}

/* Mobile */

@include respond(all-phones) {
  body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    width: 100%;
    min-width: 0;
  }
  .container {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .row {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    .row {
      .column, .columns {
        padding: 0;
      }
    }
    .centered {
      margin-left: 0 !important;
    }
  }
  .column, .columns {
    width: auto !important;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .column:last-child, .columns:last-child {
    margin-right: 0;
    float: none;
  }

  [class*="column"] {
    + [class*="column"]:last-child {
      float: none;
    }
    &:before {
      display: table;
    }
    &:after {
      display: table;
      clear: both;
    }
  }
  [class^="push_"],
  [class*="push_"] {
    margin-left: 0 !important;
  }
}