viur-ignite-css/less/grid.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * GRID
 *
 * A simple way to build responsive columns
 */


@gridSpace: 10px;
@gridColumns: 12;


// wrapper for columns
.grid-row {
  display: flex;
  margin-top: -@gridSpace;
  margin-left: -@gridSpace;
  margin-right: -@gridSpace;
  &:last-child {
    margin-bottom: -@gridSpace;
  }
  &:after {
    clear: both;
  }
}

.grid-col {
  display: block;
  flex: 1 1 auto;
  padding: @gridSpace;
}


// auto generate different column sizes and offsets
.generate-columns(@gridColumns);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .grid-col-@{i} {
    width: (@i * 100% / @n);
    flex: none;
  }
  .offset-is-@{i} {
    margin-left: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.grid-col-half {width: 50%;}
.grid-col-one-third {width: 100 / 3%;}
.grid-col-two-third {width: 100 / 3 * 2%;}
.grid-col-one-quarter {width: 25%;}
.grid-col-three-quarter {width: 75%;}

.offset-is-half {margin-left: 50%;}
.offset-is-one-third {margin-left: 100 / 3%;}
.offset-is-two-third {margin-left: 100 / 3 * 2%;}
.offset-is-one-quarter {margin-left: 25%;}
.offset-is-three-quarter {margin-left: 75%;}


// => Grid Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
  .grid-row {
    display: block;
    margin: 0;
    margin-bottom: @gridSpace;
  }
  .grid-col {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
    margin: 0;
    &:not(:last-child) {
      margin-bottom: @gridSpace;
    }
  }
}

.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}