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

@media (min-width: tiny + 1)
  [class*=" grid-"]
  [class^="grid-"]
    displayFlex()
    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% / %s - %s)' % (grid-number iefix)
   for key, size in grid-gutters
    &.has-gutter{key}
      margin-right -(size / 2)
      margin-left -(size / 2)
      & > *
        width 'calc(100% / %s - %s - %s)' % (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 'calc(%s - %s)' % (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
  flex-direction row-reverse

@media (min-width: tiny + 1)
  flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
  for flow, divider  in flowToDivid
    .{flow}
      flex 0 0 auto
      width 'calc(100% / %s - %s)' % (divider iefix)
      for key, size in grid-gutters
        .has-gutter{key} .{flow}
          width 'calc(100% / %s - %s - %s)' % (divider size iefix)

/* Responsive Small Breakpoint */
@media (min-width: tiny + 1) and (max-width: small)
  for i in 1..4
    index = '-small-%s' % i
    [class*={index}]
      & > *
        width: 'calc(100% / %s - %s)' % (i iefix)
        for key, size in grid-gutters
          &.has-gutter{key} > *
            width: 'calc(100% / %s - %s - %s)' % (i size iefix)