blexar/src/stylus/grid/column.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.column
  flex: 1 0
  padding-right: $gutter
  padding-left: $gutter

  &[class*='is-tablet-'],
  &[class*='is-desktop-'],
  &[class*='is-widescreen-'],
  &[class*='is-ultrawide-']
    flex: 1 0 100%
    // we used min-width insted of width
    // to stop FireFox default behavoir
    // when content is bigger than column
    min-width: 100%

  for $n in (0 .. $columns)
    &.is-{$n},
    &.is-mobile-{$n}
      flex: 0 0 ($n / $columns * 100) %
      min-width: ($n / $columns * 100) %

    &.is-offset-{$n},
    &.is-offset-mobile-{$n}
      margin-{$dir-start}: ($n / $columns * 100) %

  +tablet()
    for $n in (0 .. $columns)
      &.is-tablet-{$n}
        flex: 0 0 ($n / $columns * 100) %
        min-width: ($n / $columns * 100) %

      &.is-offset-tablet-{$n}
        margin-{$dir-start}: ($n / $columns * 100) %

  +desktop()
    for $n in (0 .. $columns)
      &.is-desktop-{$n}
        flex: 0 0 ($n / $columns * 100) %
        min-width: ($n / $columns * 100) %

      &.is-offset-desktop-{$n}
        margin-{$dir-start}: ($n / $columns * 100) %

  +widescreen()
    for $n in (0 .. $columns)
      &.is-widescreen-{$n}
        flex: 0 0 ($n / $columns * 100) %
        min-width: ($n / $columns * 100) %

      &.is-offset-widescreen-{$n}
        margin-{$dir-start}: ($n / $columns * 100) %

  +ultrawide()
    for $n in (0 .. $columns)
      &.is-ultrawide-{$n}
        flex: 0 0 ($n / $columns * 100) %
        min-width: ($n / $columns * 100) %

      &.is-offset-ultrawide-{$n}
        margin-{$dir-start}: ($n / $columns * 100) %

  &.is-middle
    align-self: center

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

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

  >.row
    margin: 0 ($gutter * -1)
    min-width: 'calc(100% + %s)' % ($gutter * 2)