getbase/less/base/_grid.less

A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small.

// ==========================================================================
// Base – Mobile-First Grid
// ==========================================================================

// Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
.clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; }
.row:before, .row:after { content: ""; display: table; } .row:after { clear: both; }

// Rows
.row {
  position: relative;
  margin-left: -@grid-gutter;
  margin-right: -@grid-gutter;
}
// Medium Device Row
@media only screen and (min-width: @breakpoint-m) {
  .row-m {
    position: relative;
    margin-left: -@grid-gutter-m;
    margin-right: -@grid-gutter-m;
  }
  .clear-m:before, .clear-m:after { content: ""; display: table; } .clear-m:after { clear: both; }
  .row-m:before, .row-m:after { content: ""; display: table; } .row-m:after { clear: both; }
}
// Large Device Row
@media only screen and (min-width: @breakpoint-l) {
  .row-l {
    position: relative;
    margin-left: -@grid-gutter-l;
    margin-right: -@grid-gutter-l;
  }
  .clear-l:before, .clear-l:after { content: ""; display: table; } .clear-l:after { clear: both; }
  .row-l:before, .row-l:after { content: ""; display: table; } .row-l:after { clear: both; }
}
// Extra Large Device Row
@media only screen and (min-width: @breakpoint-xl) {
  .row-xl {
    position: relative;
    margin-left: -@grid-gutter-xl;
    margin-right: -@grid-gutter-xl;
  }
  .clear-xl:before, .clear-xl:after { content: ""; display: table; } .clear-xl:after { clear: both; }
  .row-xl:before, .row-xl:after { content: ""; display: table; } .row-xl:after { clear: both; }
}

// Container
.container, .container-full {
  padding-left: @grid-gutter;
  padding-right: @grid-gutter;
  margin-left: auto;
  margin-right: auto;
}

// Medium Device Container
@media only screen and (min-width: @breakpoint-m) {
  .container { width: @container-m; }
  .container-m, .container-full-m {
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
    margin-left: auto;
    margin-right: auto;
  }
  .container-m { width: @container-m; }
  .container-full-m { width: auto; }
}
// Large Device Container
@media only screen and (min-width: @breakpoint-l) {
  .container { width: @container-l; }
  .container-l, .container-full-l {
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
    margin-left: auto;
    margin-right: auto;
  }
  .container-l { width: @container-l; }
  .container-full-l { width: auto; }
}
// Extra Large Device Container
@media only screen and (min-width: @breakpoint-xl) {
  .container { width: @container-xl; }
  .container-xl, .container-full-xl {
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
    margin-left: auto;
    margin-right: auto;
  }
  .container-xl { width: @container-xl; }
  .container-full-xl { width: auto; }
}

// Mobile-first Grid Columns - Global Rules
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5 {
  padding-left: @grid-gutter;
  padding-right: @grid-gutter;
  position: relative;
  float: @grid-alignment;
}

// Mobile-first Grid
.generate-grid (12);
.generate-grid (@index) when (@index > 0) {
  .generate-grid (@index - 1);
  .col-@{index} {
    width: @index / 12 * 100%;
  }
}
.col-1-2 { width: (6 / 12) * 100%; }
.col-1-3 { width: (4 / 12) * 100%; }
.col-2-3 { width: (8 / 12) * 100%; }
.col-1-4 { width: (3 / 12) * 100%; }
.col-3-4 { width: (9 / 12) * 100%; }
.col-1-5 { width: (2.4 / 12) * 100%; }
.col-2-5 { width: (4.8 / 12) * 100%; }
.col-3-5 { width: (7.2 / 12) * 100%; }
.col-4-5 { width: (9.6 / 12) * 100%; }
.col-full { width: 100%; }

// Mobile Push Offsets
.generate-push-offsets (11);
.generate-push-offsets (@index) when (@index > 0) {
  .generate-push-offsets (@index - 1);
  .push-@{index} {
    @{grid-alignment}: @index / 12 * 100%;
  }
}
.push-1-2 { @{grid-alignment}: (6 / 12) * 100%; }
.push-1-3 { @{grid-alignment}: (4 / 12) * 100%; }
.push-2-3 { @{grid-alignment}: (8 / 12) * 100%; }
.push-1-4 { @{grid-alignment}: (3 / 12) * 100%; }
.push-3-4 { @{grid-alignment}: (9 / 12) * 100%; }
.push-1-5 { @{grid-alignment}: (2.4 / 12) * 100%; }
.push-2-5 { @{grid-alignment}: (4.8 / 12) * 100%; }
.push-3-5 { @{grid-alignment}: (7.2 / 12) * 100%; }
.push-4-5 { @{grid-alignment}: (9.6 / 12) * 100%; }

// Mobile Pull Offsets
.generate-pull-offsets (11);
.generate-pull-offsets (@index) when (@index > 0) {
  .generate-pull-offsets (@index - 1);
  .pull-@{index} {
    @{grid-alignment}: -@index / 12 * 100%;
  }
}
.pull-1-2 { @{grid-alignment}: -(6 / 12) * 100%; }
.pull-1-3 { @{grid-alignment}: -(4 / 12) * 100%; }
.pull-2-3 { @{grid-alignment}: -(8 / 12) * 100%; }
.pull-1-4 { @{grid-alignment}: -(3 / 12) * 100%; }
.pull-3-4 { @{grid-alignment}: -(9 / 12) * 100%; }
.pull-1-5 { @{grid-alignment}: -(2.4 / 12) * 100%; }
.pull-2-5 { @{grid-alignment}: -(4.8 / 12) * 100%; }
.pull-3-5 { @{grid-alignment}: -(7.2 / 12) * 100%; }
.pull-4-5 { @{grid-alignment}: -(9.6 / 12) * 100%; }


// Medium Device Grid
@media only screen and (min-width: @breakpoint-m) {
  
  // Medium Device Grid Columns - Global Rules
  .col-1-m,
  .col-2-m,
  .col-3-m,
  .col-4-m,
  .col-5-m,
  .col-6-m,
  .col-7-m,
  .col-8-m,
  .col-9-m,
  .col-10-m,
  .col-11-m,
  .col-12-m,
  .col-1-2-m,
  .col-1-3-m,
  .col-2-3-m,
  .col-1-4-m,
  .col-3-4-m,
  .col-1-5-m,
  .col-2-5-m,
  .col-3-5-m,
  .col-4-5-m {
    padding-left: @grid-gutter-m;
    padding-right: @grid-gutter-m;
    position: relative;
    float: @grid-alignment;
  }

  // Medium Device Grid
  .generate-grid-m (12);
  .generate-grid-m (@index) when (@index > 0) {
    .generate-grid-m (@index - 1);
    .col-@{index}-m {
      width: @index / 12 * 100%;
    }
  }
  .col-1-2-m { width: (6 / 12) * 100%; }
  .col-1-3-m { width: (4 / 12) * 100%; }
  .col-2-3-m { width: (8 / 12) * 100%; }
  .col-1-4-m { width: (3 / 12) * 100%; }
  .col-3-4-m { width: (9 / 12) * 100%; }
  .col-1-5-m { width: (2.4 / 12) * 100%; }
  .col-2-5-m { width: (4.8 / 12) * 100%; }
  .col-3-5-m { width: (7.2 / 12) * 100%; }
  .col-4-5-m { width: (9.6 / 12) * 100%; }
  .col-full-m { width: 100%; }

  // Medium Device Push Offsets
  .generate-push-offsets-m (11);
  .generate-push-offsets-m (@index) when (@index > 0) {
    .generate-push-offsets-m (@index - 1);
    .push-@{index}-m {
      @{grid-alignment}: @index / 12 * 100%;
    }
  }
  .push-1-2-m { @{grid-alignment}: (6 / 12) * 100%; }
  .push-1-3-m { @{grid-alignment}: (4 / 12) * 100%; }
  .push-2-3-m { @{grid-alignment}: (8 / 12) * 100%; }
  .push-1-4-m { @{grid-alignment}: (3 / 12) * 100%; }
  .push-3-4-m { @{grid-alignment}: (9 / 12) * 100%; }
  .push-1-5-m { @{grid-alignment}: (2.4 / 12) * 100%; }
  .push-2-5-m { @{grid-alignment}: (4.8 / 12) * 100%; }
  .push-3-5-m { @{grid-alignment}: (7.2 / 12) * 100%; }
  .push-4-5-m { @{grid-alignment}: (9.6 / 12) * 100%; }

  // Medium Device Pull Offsets
  .generate-pull-offsets-m (11);
  .generate-pull-offsets-m (@index) when (@index > 0) {
    .generate-pull-offsets-m (@index - 1);
    .pull-@{index}-m {
      @{grid-alignment}: -@index / 12 * 100%;
    }
  }
  .pull-1-2-m { @{grid-alignment}: -(6 / 12) * 100%; }
  .pull-1-3-m { @{grid-alignment}: -(4 / 12) * 100%; }
  .pull-2-3-m { @{grid-alignment}: -(8 / 12) * 100%; }
  .pull-1-4-m { @{grid-alignment}: -(3 / 12) * 100%; }
  .pull-3-4-m { @{grid-alignment}: -(9 / 12) * 100%; }
  .pull-1-5-m { @{grid-alignment}: -(2.4 / 12) * 100%; }
  .pull-2-5-m { @{grid-alignment}: -(4.8 / 12) * 100%; }
  .pull-3-5-m { @{grid-alignment}: -(7.2 / 12) * 100%; }
  .pull-4-5-m { @{grid-alignment}: -(9.6 / 12) * 100%; }

}

// Large Device Grid
@media only screen and (min-width: @breakpoint-l) {
  
  // Large Device Grid Columns - Global Rules
  .col-1-l,
  .col-2-l,
  .col-3-l,
  .col-4-l,
  .col-5-l,
  .col-6-l,
  .col-7-l,
  .col-8-l,
  .col-9-l,
  .col-10-l,
  .col-11-l,
  .col-12-l,
  .col-1-2-l,
  .col-1-3-l,
  .col-2-3-l,
  .col-1-4-l,
  .col-3-4-l,
  .col-1-5-l,
  .col-2-5-l,
  .col-3-5-l,
  .col-4-5-l {
    padding-left: @grid-gutter-l;
    padding-right: @grid-gutter-l;
    position: relative;
    float: @grid-alignment;
  }

  // Large Device Grid
  .generate-grid-l (12);
  .generate-grid-l (@index) when (@index > 0) {
    .generate-grid-l (@index - 1);
    .col-@{index}-l {
      width: @index / 12 * 100%;
    }
  }
  .col-1-2-l { width: (6 / 12) * 100%; }
  .col-1-3-l { width: (4 / 12) * 100%; }
  .col-2-3-l { width: (8 / 12) * 100%; }
  .col-1-4-l { width: (3 / 12) * 100%; }
  .col-3-4-l { width: (9 / 12) * 100%; }
  .col-1-5-l { width: (2.4 / 12) * 100%; }
  .col-2-5-l { width: (4.8 / 12) * 100%; }
  .col-3-5-l { width: (7.2 / 12) * 100%; }
  .col-4-5-l { width: (9.6 / 12) * 100%; }
  .col-full-l { width: 100%; }

  // Large Device Push Offsets
  .generate-push-offsets-l (11);
  .generate-push-offsets-l (@index) when (@index > 0) {
    .generate-push-offsets-l (@index - 1);
    .push-@{index}-l {
      @{grid-alignment}: @index / 12 * 100%;
    }
  }
  .push-1-2-l { @{grid-alignment}: (6 / 12) * 100%; }
  .push-1-3-l { @{grid-alignment}: (4 / 12) * 100%; }
  .push-2-3-l { @{grid-alignment}: (8 / 12) * 100%; }
  .push-1-4-l { @{grid-alignment}: (3 / 12) * 100%; }
  .push-3-4-l { @{grid-alignment}: (9 / 12) * 100%; }
  .push-1-5-l { @{grid-alignment}: (2.4 / 12) * 100%; }
  .push-2-5-l { @{grid-alignment}: (4.8 / 12) * 100%; }
  .push-3-5-l { @{grid-alignment}: (7.2 / 12) * 100%; }
  .push-4-5-l { @{grid-alignment}: (9.6 / 12) * 100%; }

  // Large Device Pull Offsets
  .generate-pull-offsets-l (11);
  .generate-pull-offsets-l (@index) when (@index > 0) {
    .generate-pull-offsets-l (@index - 1);
    .pull-@{index}-l {
      @{grid-alignment}: -@index / 12 * 100%;
    }
  }
  .pull-1-2-l { @{grid-alignment}: -(6 / 12) * 100%; }
  .pull-1-3-l { @{grid-alignment}: -(4 / 12) * 100%; }
  .pull-2-3-l { @{grid-alignment}: -(8 / 12) * 100%; }
  .pull-1-4-l { @{grid-alignment}: -(3 / 12) * 100%; }
  .pull-3-4-l { @{grid-alignment}: -(9 / 12) * 100%; }
  .pull-1-5-l { @{grid-alignment}: -(2.4 / 12) * 100%; }
  .pull-2-5-l { @{grid-alignment}: -(4.8 / 12) * 100%; }
  .pull-3-5-l { @{grid-alignment}: -(7.2 / 12) * 100%; }
  .pull-4-5-l { @{grid-alignment}: -(9.6 / 12) * 100%; }

}

// Extra Large Device Grid
@media only screen and (min-width: @breakpoint-xl) {
  
  // Extra Large Device Grid Columns - Global Rules
  .col-1-xl,
  .col-2-xl,
  .col-3-xl,
  .col-4-xl,
  .col-5-xl,
  .col-6-xl,
  .col-7-xl,
  .col-8-xl,
  .col-9-xl,
  .col-10-xl,
  .col-11-xl,
  .col-12-xl,
  .col-1-2-xl,
  .col-1-3-xl,
  .col-2-3-xl,
  .col-1-4-xl,
  .col-3-4-xl,
  .col-1-5-xl,
  .col-2-5-xl,
  .col-3-5-xl,
  .col-4-5-xl {
    padding-left: @grid-gutter-xl;
    padding-right: @grid-gutter-xl;
    position: relative;
    float: @grid-alignment;
  }

  // Extra Large Device Grid
  .generate-grid-xl (12);
  .generate-grid-xl (@index) when (@index > 0) {
    .generate-grid-xl (@index - 1);
    .col-@{index}-xl {
      width: @index / 12 * 100%;
    }
  }
  .col-1-2-xl { width: (6 / 12) * 100%; }
  .col-1-3-xl { width: (4 / 12) * 100%; }
  .col-2-3-xl { width: (8 / 12) * 100%; }
  .col-1-4-xl { width: (3 / 12) * 100%; }
  .col-3-4-xl { width: (9 / 12) * 100%; }
  .col-1-5-xl { width: (2.4 / 12) * 100%; }
  .col-2-5-xl { width: (4.8 / 12) * 100%; }
  .col-3-5-xl { width: (7.2 / 12) * 100%; }
  .col-4-5-xl { width: (9.6 / 12) * 100%; }
  .col-full-xl { width: 100%; }

  // Extra Large Device Push Offsets
  .generate-push-offsets-xl (11);
  .generate-push-offsets-xl (@index) when (@index > 0) {
    .generate-push-offsets-xl (@index - 1);
    .push-@{index}-xl {
      @{grid-alignment}: @index / 12 * 100%;
    }
  }
  .push-1-2-xl { @{grid-alignment}: (6 / 12) * 100%; }
  .push-1-3-xl { @{grid-alignment}: (4 / 12) * 100%; }
  .push-2-3-xl { @{grid-alignment}: (8 / 12) * 100%; }
  .push-1-4-xl { @{grid-alignment}: (3 / 12) * 100%; }
  .push-3-4-xl { @{grid-alignment}: (9 / 12) * 100%; }
  .push-1-5-xl { @{grid-alignment}: (2.4 / 12) * 100%; }
  .push-2-5-xl { @{grid-alignment}: (4.8 / 12) * 100%; }
  .push-3-5-xl { @{grid-alignment}: (7.2 / 12) * 100%; }
  .push-4-5-xl { @{grid-alignment}: (9.6 / 12) * 100%; }

  // Extra Large Device Pull Offsets
  .generate-pull-offsets-xl (11);
  .generate-pull-offsets-xl (@index) when (@index > 0) {
    .generate-pull-offsets-xl (@index - 1);
    .pull-@{index}-xl {
      @{grid-alignment}: -@index / 12 * 100%;
    }
  }
  .pull-1-2-xl { @{grid-alignment}: -(6 / 12) * 100%; }
  .pull-1-3-xl { @{grid-alignment}: -(4 / 12) * 100%; }
  .pull-2-3-xl { @{grid-alignment}: -(8 / 12) * 100%; }
  .pull-1-4-xl { @{grid-alignment}: -(3 / 12) * 100%; }
  .pull-3-4-xl { @{grid-alignment}: -(9 / 12) * 100%; }
  .pull-1-5-xl { @{grid-alignment}: -(2.4 / 12) * 100%; }
  .pull-2-5-xl { @{grid-alignment}: -(4.8 / 12) * 100%; }
  .pull-3-5-xl { @{grid-alignment}: -(7.2 / 12) * 100%; }
  .pull-4-5-xl { @{grid-alignment}: -(9.6 / 12) * 100%; }

}