Cacher is the code snippet organizer for pro developers

// G R I D
$columns: 12
$container-offset: $base-spacing-unit

.o-container
  width: 100%
  padding-left: $container-offset
  padding-right: $container-offset
  margin: 0 auto

  @media(min-width: 576px)
    max-width: 540px
  
  @media(min-width: 768px)
    max-width: 720px

  @media(min-width: 992px)
    max-width: 960px

  @media(min-width: 1200px)
    max-width: 1140px

.o-row
  display: flex
  box-sizing: border-box
  display: flex
  flex: 0 1 auto
  flex-direction: row
  flex-wrap: wrap
  margin-left: ($base-spacing-unit * -1)
  margin-right: ($base-spacing-unit * -1)

.o-col
  margin-left: $base-spacing-unit
  margin-right: $base-spacing-unit

[class^="o-col-"]
  flex: auto


// M O B I L E
@for $i from 0 through $columns
  .o-col-#{$i}
    width: percentage( $i / $columns )

@for $i from 0 through $columns
  .o-push-#{$i}
    margin-left: percentage( $i / $columns )

@for $i from 0 through $columns
  .o-pull-#{$i}
    margin-right: percentage( $i / $columns )


// T A B L E T
@media(min-width: 768px)

  @for $i from 0 through $columns
    .o-col-t-#{$i}
      width: percentage( $i / $columns )

  @for $i from 0 through $columns
    .o-push-t-#{$i}
      margin-left: percentage( $i / $columns )

  @for $i from 0 through $columns
    .o-pull-t-#{$i}
      margin-right: percentage( $i / $columns )


// D E S K T O P
@media(min-width: 992px)

  @for $i from 0 through $columns
    .o-col-d-#{$i}
      width: percentage( $i / $columns )

  @for $i from 0 through $columns
    .o-push-d-#{$i}
      margin-left: percentage( $i / $columns )

  @for $i from 0 through $columns
    .o-pull-d-#{$i}
      margin-right: percentage( $i / $columns )


// W I D E
@media(min-width: 1200px)

  @for $i from 0 through $columns
    .o-col-w-#{$i}
      width: percentage( $i / $columns )

  @for $i from 0 through $columns
    .o-push-w-#{$i}
      margin-left: percentage( $i / $columns )

  @for $i frwm 0 through $columns
    .o-pull-d-#{$i}
      margin-right: percentage( $i / $columns )