formstone/src/less/grid.less

Library of modular front end components.

/**
 * @grid
 * @name Grid
 * @description A responsive CSS grid.
 */

@import "imports/utils.less";
@import "imports/grid-flex-config.less";
@import "imports/grid-flex-mixins.less";

// !Reset Box-sizing

* {
  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: inherit;
  }
}

& when not (@fs-grid-mixin-only) {
  .@{fs-grid-class-container} {

    .@{fs-grid-class-row} {

      &:extend(.fs_grid_row all);

      .@{fs-grid-class-row} {
        &:extend(.fs_grid_row_row all);
      }

      [class*="@{fs-grid-class-cell}"][class*="@{fs-grid-class-contained}"] .@{fs-grid-class-row} {
        &:extend(.fs_grid_row_row_contained);
      }

      // !All Cells
      [class*="@{fs-grid-class-cell}"] {
        &:extend(.fs_grid_cell);
      }

      // !Padded Cells
      [class*="@{fs-grid-class-cell}"][class*="@{fs-grid-class-padded}"] {
        &:extend(.fs_grid_cell_padded);
      }

      // !Contained Cells
      [class*="@{fs-grid-class-cell}"][class*="@{fs-grid-class-contained}"] {
        &:extend(.fs_grid_cell_contained);
      }

      // // !First Cells
      // [class*="@{fs-grid-class-cell}"][class*="@{fs-grid-class-first}"] {
      //   &:extend(.fs_grid_cell_first);
      // }
      //
      // // !Last Cells
      // [class*="@{fs-grid-class-cell}"][class*="@{fs-grid-class-last}"] {
      //   &:extend(.fs_grid_cell_last);
      // }

      // !All Sizes
      .fs_grid(@fs-grid-class-all, 0);

      // !Small, 540 (max 740)
      @media screen and (@fs-grid-mq-max-md) {
        .fs_grid(@fs-grid-class-sm, @fs-grid-columns-sm);
      }

      // !Min, 300 (max 500)
      @media screen and (@fs-grid-mq-max-sm) {
        .fs_grid(@fs-grid-class-xs, @fs-grid-columns-sm);
      }

      // !Medium, 6 column, 720 (min 740)
      @media screen and (@fs-grid-mq-min-md) and (@fs-grid-mq-max-lg) {
        .fs_grid(@fs-grid-class-md, @fs-grid-columns-md);
      }

      // !Large, 12 column, 960 (min 980)
      @media screen and (@fs-grid-mq-min-lg) {
        .fs_grid(@fs-grid-class-lg, @fs-grid-columns-lg);
      }

      // !XLarge, 12 column, 1200 (min 1220)
      @media screen and (@fs-grid-mq-min-xl) {
        .fs_grid(@fs-grid-class-xl, @fs-grid-columns-lg);
      }
    }

    // !Full Fluid Grid
    &-fluid .@{fs-grid-class-row} {
      &:extend(.fs_grid_row_fluid);
    }

    // !Full Adaptive Grid
    &-adaptive .@{fs-grid-class-row} {
      &:extend(.fs_grid_row_adaptive);
    }
  }
}

// !Size Based Mixins

.fs_row() {
  &:extend(.fs_grid_row all);
}

.fs_row_row() {
  &:extend(.fs_grid_row_row all);
}

.fs_row_row_contained() {
  &:extend(.fs_grid_row_row_contained all);
}

.fs_row_fluid() {
  &:extend(.fs_grid_row_fluid);
}

.fs_row_fluid_sm() {
  &:extend(.fs_grid_row_fluid);
}

.fs_cell() {
  &:extend(.fs_grid_cell);
}

.fs_cell_padded() {
  &:extend(.fs_grid_cell);
  &:extend(.fs_grid_cell_padded);
}

.fs_cell_contained() {
  &:extend(.fs_grid_cell);
  &:extend(.fs_grid_cell_contained);
}

// !Small, 540 (max 740)
.fs_cell_xs(@count, @total:0) {

  @media screen and (@fs-grid-mq-max-sm) {

    & when (@total = 0) {
      .fs_grid_column(@fs-grid-columns-sm, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column(@total, @fs-grid-gutter, @count);
    }
  }
}

// Push
.fs_push_xs(@count, @total:0) {

  @media screen and (@fs-grid-mq-max-sm) {

    & when (@total = 0) {
      .fs_grid_column_pushed(@fs-grid-columns-sm, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column_pushed(@total, @fs-grid-gutter, @count);
    }
  }
}

// !Min, 300 (max 500)
.fs_cell_sm(@count, @total:0) {

  @media screen and (@fs-grid-mq-max-md) {

    & when (@total = 0) {
      .fs_grid_column(@fs-grid-columns-sm, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column(@total, @fs-grid-gutter, @count);
    }
  }
}

// Push
.fs_push_sm(@count, @total:0) {

  @media screen and (@fs-grid-mq-max-md) {

    & when (@total = 0) {
      .fs_grid_column_pushed(@fs-grid-columns-sm, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column_pushed(@total, @fs-grid-gutter, @count);
    }
  }
}

// !Medium, 6 column, 720 (min 740)
.fs_cell_md(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-md) and (@fs-grid-mq-max-lg) {

    & when (@total = 0) {
      .fs_grid_column(@fs-grid-columns-md, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column(@total, @fs-grid-gutter, @count);
    }
  }
}

// Push
.fs_push_md(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-md) and (@fs-grid-mq-max-lg) {

    & when (@total = 0) {
      .fs_grid_column_pushed(@fs-grid-columns-md, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column_pushed(@total, @fs-grid-gutter, @count);
    }
  }
}

// !Large, 12 column, 960 (min 980)
.fs_cell_lg(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-lg) {

    & when (@total = 0) {
      .fs_grid_column(@fs-grid-columns-lg, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column(@total, @fs-grid-gutter, @count);
    }
  }
}

// Push
.fs_push_lg(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-lg) {

    & when (@total = 0) {
      .fs_grid_column_pushed(@fs-grid-columns-lg, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column_pushed(@total, @fs-grid-gutter, @count);
    }
  }
}

// !XLarge, 12 column, 1200 (min 1220)
.fs_cell_xl(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-xl) {

    & when (@total = 0) {
      .fs_grid_column(@fs-grid-columns-lg, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column(@total, @fs-grid-gutter, @count);
    }
  }
}

// Push
.fs_push_xl(@count, @total:0) {

  @media screen and (@fs-grid-mq-min-xl) {

    & when (@total = 0) {
      .fs_grid_column_pushed(@fs-grid-columns-lg, @fs-grid-gutter, @count);
    }

    & when not (@total = 0) {
      .fs_grid_column_pushed(@total, @fs-grid-gutter, @count);
    }
  }
}