@getbase/base/less/grid.less

A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.

@import "_mixins";

// Rows
.row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-left: -@grid-gutter;
  margin-right: -@grid-gutter;
}
// Columns
.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 {
  flex: 0 0 auto;
  padding-left: @grid-gutter;
  padding-right: @grid-gutter;
}

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

.breakpoint(m, {
  // Rows (Medium Devices)
  .row-m {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-left: -@grid-gutter;
    margin-right: -@grid-gutter;
  }
  // Columns (Medium Devices)
  .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 {
    flex: 0 0 auto;
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
  }

  // Columns (Medium Devices)
  .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 {
    flex: 0 0 (6 / 12) * 100%;
    max-width: (6 / 12) * 100%;
  }
  .col-1-3-m {
    flex: 0 0 (4 / 12) * 100%;
    max-width: (4 / 12) * 100%;
  }
  .col-2-3-m {
    flex: 0 0 (8 / 12) * 100%;
    max-width: (8 / 12) * 100%;
  }
  .col-1-4-m {
    flex: 0 0 (3 / 12) * 100%;
    max-width: (3 / 12) * 100%;
  }
  .col-3-4-m {
    flex: 0 0 (9 / 12) * 100%;
    max-width: (9 / 12) * 100%;
  }
  .col-1-5-m {
    flex: 0 0 (2.4 / 12) * 100%;
    max-width: (2.4 / 12) * 100%;
  }
  .col-2-5-m {
    flex: 0 0 (4.8 / 12) * 100%;
    max-width: (4.8 / 12) * 100%;
  }
  .col-3-5-m {
    flex: 0 0 (7.2 / 12) * 100%;
    max-width: (7.2 / 12) * 100%;
  }
  .col-4-5-m {
    flex: 0 0 (9.6 / 12) * 100%;
    max-width: (9.6 / 12) * 100%;
  }
  .col-full-m {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
});

.breakpoint(l, {
  // Rows (Large Devices)
  .row-l {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-left: -@grid-gutter;
    margin-right: -@grid-gutter;
  }
  // Columns (Large Devices)
  .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 {
    flex: 0 0 auto;
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
  }

  // Columns (Large Devices)
  .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 {
    flex: 0 0 (6 / 12) * 100%;
    max-width: (6 / 12) * 100%;
  }
  .col-1-3-l {
    flex: 0 0 (4 / 12) * 100%;
    max-width: (4 / 12) * 100%;
  }
  .col-2-3-l {
    flex: 0 0 (8 / 12) * 100%;
    max-width: (8 / 12) * 100%;
  }
  .col-1-4-l {
    flex: 0 0 (3 / 12) * 100%;
    max-width: (3 / 12) * 100%;
  }
  .col-3-4-l {
    flex: 0 0 (9 / 12) * 100%;
    max-width: (9 / 12) * 100%;
  }
  .col-1-5-l {
    flex: 0 0 (2.4 / 12) * 100%;
    max-width: (2.4 / 12) * 100%;
  }
  .col-2-5-l {
    flex: 0 0 (4.8 / 12) * 100%;
    max-width: (4.8 / 12) * 100%;
  }
  .col-3-5-l {
    flex: 0 0 (7.2 / 12) * 100%;
    max-width: (7.2 / 12) * 100%;
  }
  .col-4-5-l {
    flex: 0 0 (9.6 / 12) * 100%;
    max-width: (9.6 / 12) * 100%;
  }
  .col-full-l {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
});

.breakpoint(xl, {
  // Rows (Extra Large Devices)
  .row-xl {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-left: -@grid-gutter;
    margin-right: -@grid-gutter;
  }
  // Columns (Extra Large Devices)
  .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 {
    flex: 0 0 auto;
    padding-left: @grid-gutter;
    padding-right: @grid-gutter;
  }

  // Columns (Extra Large Devices)
  .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 {
    flex: 0 0 (6 / 12) * 100%;
    max-width: (6 / 12) * 100%;
  }
  .col-1-3-xl {
    flex: 0 0 (4 / 12) * 100%;
    max-width: (4 / 12) * 100%;
  }
  .col-2-3-xl {
    flex: 0 0 (8 / 12) * 100%;
    max-width: (8 / 12) * 100%;
  }
  .col-1-4-xl {
    flex: 0 0 (3 / 12) * 100%;
    max-width: (3 / 12) * 100%;
  }
  .col-3-4-xl {
    flex: 0 0 (9 / 12) * 100%;
    max-width: (9 / 12) * 100%;
  }
  .col-1-5-xl {
    flex: 0 0 (2.4 / 12) * 100%;
    max-width: (2.4 / 12) * 100%;
  }
  .col-2-5-xl {
    flex: 0 0 (4.8 / 12) * 100%;
    max-width: (4.8 / 12) * 100%;
  }
  .col-3-5-xl {
    flex: 0 0 (7.2 / 12) * 100%;
    max-width: (7.2 / 12) * 100%;
  }
  .col-4-5-xl {
    flex: 0 0 (9.6 / 12) * 100%;
    max-width: (9.6 / 12) * 100%;
  }
  .col-full-xl {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
});