i-rubik/src/style/components/grid.styl

A Vue.js 2.0+ UI Components Framework

.content
  flex 1 1 auto
  
.container, .container-fluid
  margin-right auto
  margin-left auto
  flex-basis 100%
  
.container
  padding-left $grid-outer-margin
  padding-right $grid-outer-margin
  
  &-fluid
    padding 0
  
  for width in $container-max-widths
    @media only screen and (min-width: width)
      max-width width
  
.row
  display flex
  flex 0 1 auto
  flex-wrap wrap
  margin-left $grid-gutter-full
  margin-right $grid-gutter-full
  
  &-reverse
    flex-direction row-reverse
    
  &.no-gutter
    .col
      padding-right 0
      padding-left 0
  
  &.row-flex-start
    justify-content flex-start
      
  &.row-flex-end
    justify-content flex-end
    
  &.row-flex-center
    justify-content center
    
  &.row-flex-space-between
    justify-content space-between
   
  &.row-flex-space-around
    justify-content space-around

  &.row-flex-top
    align-items flex-start
  
  &.row-flex-bottom
    align-items flex-end

  &.row-flex-middle
    align-items center

  .col
    padding-right $grid-gutter-half
    padding-left $grid-gutter-half
        
    for size, width in $grid-breakpoints
      &.{size}
        flex-grow 1
        flex-shrink 1
        
      @media only screen and (min-width: width)
        for n in (1..$grid-columns)
          &.{size}{n}
            flex-basis (n / $grid-columns * 100)%
            max-width (n / $grid-columns * 100)%
            
          &.offset-{size}{n}
            margin-left (n / $grid-columns * 100)%
            
.col-placeholder, .placeholder
  flex-grow 1