formstone/src/less/imports/grid-flex-config.less

Library of modular front end components.

  // Variables

  @fs-grid-mixin-only:      false;

  @fs-grid-class-container: fs-grid;
  @fs-grid-class-row:       fs-row;
  @fs-grid-class-cell:      fs-cell;
  @fs-grid-class-contained: -contained;
  @fs-grid-class-padded:    -padded;
  @fs-grid-class-first:     -first;
  @fs-grid-class-last:      -last;

  @fs-grid-class-all:       fs-all;
  @fs-grid-class-xs:        fs-xs;
  @fs-grid-class-sm:        fs-sm;
  @fs-grid-class-md:        fs-md;
  @fs-grid-class-lg:        fs-lg;
  @fs-grid-class-xl:        fs-xl;

  @fs-grid-columns-sm:      3;
  @fs-grid-columns-md:      6;
  @fs-grid-columns-lg:      12;

  @fs-grid-gutter:          1.0416666666666667%;

  @fs-grid-width-xs:        300px;
  @fs-grid-width-sm:        480px;
  @fs-grid-width-md:        720px;
  @fs-grid-width-lg:        960px;
  @fs-grid-width-xl:        1200px;

  @fs-grid-width-break-xs:  320px;
  @fs-grid-width-break-sm:  500px;
  @fs-grid-width-break-md:  740px;
  @fs-grid-width-break-lg:  980px;
  @fs-grid-width-break-xl:  1220px;

  @fs-grid-mq-max-sm:       ~"max-width: "(@fs-grid-width-break-sm - 1px);
  @fs-grid-mq-max-md:       ~"max-width: "(@fs-grid-width-break-md - 1px);
  @fs-grid-mq-max-lg:       ~"max-width: "(@fs-grid-width-break-lg - 1px);
  @fs-grid-mq-max-xl:       ~"max-width: "(@fs-grid-width-break-xl - 1px);

  @fs-grid-mq-min-sm:       ~"min-width: "(@fs-grid-width-break-sm);
  @fs-grid-mq-min-md:       ~"min-width: "(@fs-grid-width-break-md);
  @fs-grid-mq-min-lg:       ~"min-width: "(@fs-grid-width-break-lg);
  @fs-grid-mq-min-xl:       ~"min-width: "(@fs-grid-width-break-xl);