Flex-based grid

gistfile1.txt

// -------------------------------------
//   Base
// -------------------------------------

.g
  display: flex
  margin-left: -$b-space
  flex-wrap: wrap

.g-b
  flex: none 1
  padding-left: $b-space
  width: 100%

// -------------------------------------
//   Gutters
// -------------------------------------

// ----- None ----- //

.g--f
  margin-left: 0
  > .g-b
    padding-left: 0

// ----- Small ----- //

.g--s
  margin-left: -$b-space-s
  > .g-b
    padding-left: $b-space-s

// -------------------------------------
//   Setup
// -------------------------------------

=g-device-type($namespace: '')

  @each $unit in $g-columns
    @for $column from 1 to $unit + 1
      .g-b--#{$namespace}#{$column}of#{$unit}
        flex: $column 1
        min-width: percentage($column / $unit)

      @for $division from 1 to $unit
        @if $column % $division == 0 and $unit % $division == 0
          .g-b--#{$namespace}#{$column / $division}of#{$unit / $division}
            @extend .g-b--#{$namespace}#{$column}of#{$unit}

// -------------------------------------
//   Creation
// -------------------------------------

+g-device-type()

@each $device in $g-defaults
  @media screen and (min-width: nth($device, 2))
    +g-device-type("#{nth($device, 1)}--")