FlexGrid

FlexGrid.sass

.FlexGrid
  $cols: 16

  display: flex

  &.is-reverse
    flex-direction: row-reverse

  &.is-start
    justify-content: flex-start
    text-align: start

  &.is-center
    justify-content: center
    text-align: center

  &.is-end
    justify-content: flex-end
    text-align: end

  &.is-top
    align-items: flex-start

  &.is-middle
    align-items: center

  &.is-bottom
    align-items: flex-end

  &.is-around
    justify-content: space-around

  &.is-between
    justify-content: space-between

  &.is-first
    order: -1

  &.is-last
    order: 1

  &-col
    flex-grow: 1
    flex-basis: 0
    max-width: 100%

  @for $i from 1 through $cols
    &-col#{$i}
      flex: 0 0 auto

      &.is-offset0
        margin-left: 0

      @for $i from 1 through $cols
        &.is-offset#{$i}
          margin-left: percentage($i / $cols)

  @for $i from 1 through $cols
    &-col#{$i}
      flex-basis: percentage($i / $cols)
      max-width: percentage($i / $cols)