KNACSS/styl/grids/_grillade.styl

/* ---------------------------------- */
/* ==Grillade : Simple Grid System    */
/* ---------------------------------- */
/* Doc : http://grillade.knacss.com */
// gutter values for grid layouts. Unit can be: %, px, em, rem
grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
// IEfixing, see
// https://github.com/alsacreations/KNACSS/issues/133;
iefix = 0.01px

tiny         = 543px
small        = 767px
medium       = 991px
large        = 1199px
extra-large  = 1439px

displayFlex()
  display: -webkit-box
  display: -ms-flexbox
  display: flex

@media (min-width: tiny + 1)
  [class*=" grid-"]
  [class^="grid-"]
    displayFlex()
    -webkit-box-orient: horizontal
    -webkit-box-direction: normal
    flex-direction: row
    flex-wrap: wrap
    & > *
      box-sizing: border-box
      min-width: 0
      min-height: 0

// Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); }
grid(grid-number = 1, own-gutter = 0)
  & > *
    width: calc(100% / grid-number - iefix)

  for key, size in grid-gutters
    &.has-gutter{key}
      margin-right: -(size / 2)
      margin-left: -(size / 2)
      & > *
        width: calc(100% / grid-number - size - iefix)
        margin-right size / 2
        margin-left size / 2

  if own-gutter != 0
    margin-right: own-gutter / 2
    margin-left: own-gutter / 2

// Mono-line grid constructor (.grid)
@media (min-width: tiny + 1)
  .grid
  .grid--reverse
    displayFlex()
    & > *
      flex: 1 1 0%
      box-sizing: border-box
      min-width: 0
      min-height: 0

    for key, size in grid-gutters
      &.has-gutter{key} > * + *
        margin-left: size - iefix

// Constructing grids : will be compiled in CSS
@media (min-width: tiny + 1)
  for i in 2..12
    grid-selector = 'grid-%s' % i
    [class*={grid-selector}] > *
      grid(i, 0)

.push {
  margin-left: auto !important;
}

.pull {
  margin-right: auto !important;
}

.item-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.item-last {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

/*[class*="grid-"][class*="--reverse"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}*/

/*@media (min-width: 544px) {
  .full {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 1 - 0.01px);
  }
  .has-gutter .full {
    width: calc(100% / 1 - 1rem - 0.01px);
  }
  .has-gutter-l .full {
    width: calc(100% / 1 - 2rem - 0.01px);
  }
  .has-gutter-xl .full {
    width: calc(100% / 1 - 4rem - 0.01px);
  }
  .one-half {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 2 - 0.01px);
  }
  .has-gutter .one-half {
    width: calc(100% / 2 - 1rem - 0.01px);
  }
  .has-gutter-l .one-half {
    width: calc(100% / 2 - 2rem - 0.01px);
  }
  .has-gutter-xl .one-half {
    width: calc(100% / 2 - 4rem - 0.01px);
  }
  .one-third {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 3 - 0.01px);
  }
  .has-gutter .one-third {
    width: calc(100% / 3 - 1rem - 0.01px);
  }
  .has-gutter-l .one-third {
    width: calc(100% / 3 - 2rem - 0.01px);
  }
  .has-gutter-xl .one-third {
    width: calc(100% / 3 - 4rem - 0.01px);
  }
  .one-quarter {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 4 - 0.01px);
  }
  .has-gutter .one-quarter {
    width: calc(100% / 4 - 1rem - 0.01px);
  }
  .has-gutter-l .one-quarter {
    width: calc(100% / 4 - 2rem - 0.01px);
  }
  .has-gutter-xl .one-quarter {
    width: calc(100% / 4 - 4rem - 0.01px);
  }
  .one-fifth {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 5 - 0.01px);
  }
  .has-gutter .one-fifth {
    width: calc(100% / 5 - 1rem - 0.01px);
  }
  .has-gutter-l .one-fifth {
    width: calc(100% / 5 - 2rem - 0.01px);
  }
  .has-gutter-xl .one-fifth {
    width: calc(100% / 5 - 4rem - 0.01px);
  }
  .one-sixth {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 6 - 0.01px);
  }
  .has-gutter .one-sixth {
    width: calc(100% / 6 - 1rem - 0.01px);
  }
  .has-gutter-l .one-sixth {
    width: calc(100% / 6 - 2rem - 0.01px);
  }
  .has-gutter-xl .one-sixth {
    width: calc(100% / 6 - 4rem - 0.01px);
  }
  .two-thirds {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 3 * 2 - 0.01px);
  }
  .has-gutter .two-thirds {
    width: calc(100% / 3 * 2 - 1rem - 0.01px);
  }
  .has-gutter-l .two-thirds {
    width: calc(100% / 3 * 2 - 2rem - 0.01px);
  }
  .has-gutter-xl .two-thirds {
    width: calc(100% / 3 * 2 - 4rem - 0.01px);
  }
  .three-quarters {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 4 * 3 - 0.01px);
  }
  .has-gutter .three-quarters {
    width: calc(100% / 4 * 3 - 1rem - 0.01px);
  }
  .has-gutter-l .three-quarters {
    width: calc(100% / 4 * 3 - 2rem - 0.01px);
  }
  .has-gutter-xl .three-quarters {
    width: calc(100% / 4 * 3 - 4rem - 0.01px);
  }
  .five-sixths {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 6 * 5 - 0.01px);
  }
  .has-gutter .five-sixths {
    width: calc(100% / 6 * 5 - 1rem - 0.01px);
  }
  .has-gutter-l .five-sixths {
    width: calc(100% / 6 * 5 - 2rem - 0.01px);
  }
  .has-gutter-xl .five-sixths {
    width: calc(100% / 6 * 5 - 4rem - 0.01px);
  }
}*/

/* Responsive Small Breakpoint */
/*
@media (min-width: 544px) and (max-width: 991px) {
  [class*="-small-1"] > * {
    width: calc(100% / 1 - 0.01px);
  }
  [class*="-small-1"].has-gutter > * {
    width: calc(100% / 1 - 1rem - 0.01px);
  }
  [class*="-small-1"].has-gutter-l > * {
    width: calc(100% / 1 - 2rem - 0.01px);
  }
  [class*="-small-1"].has-gutter-xl > * {
    width: calc(100% / 1 - 4rem - 0.01px);
  }
  [class*="-small-2"] > * {
    width: calc(100% / 2 - 0.01px);
  }
  [class*="-small-2"].has-gutter > * {
    width: calc(100% / 2 - 1rem - 0.01px);
  }
  [class*="-small-2"].has-gutter-l > * {
    width: calc(100% / 2 - 2rem - 0.01px);
  }
  [class*="-small-2"].has-gutter-xl > * {
    width: calc(100% / 2 - 4rem - 0.01px);
  }
  [class*="-small-3"] > * {
    width: calc(100% / 3 - 0.01px);
  }
  [class*="-small-3"].has-gutter > * {
    width: calc(100% / 3 - 1rem - 0.01px);
  }
  [class*="-small-3"].has-gutter-l > * {
    width: calc(100% / 3 - 2rem - 0.01px);
  }
  [class*="-small-3"].has-gutter-xl > * {
    width: calc(100% / 3 - 4rem - 0.01px);
  }
  [class*="-small-4"] > * {
    width: calc(100% / 4 - 0.01px);
  }
  [class*="-small-4"].has-gutter > * {
    width: calc(100% / 4 - 1rem - 0.01px);
  }
  [class*="-small-4"].has-gutter-l > * {
    width: calc(100% / 4 - 2rem - 0.01px);
  }
  [class*="-small-4"].has-gutter-xl > * {
    width: calc(100% / 4 - 4rem - 0.01px);
  }
}
*/