tinygrid

tinygrid.sass

// tiny grid system
// generates ad-hoc responsive columns
// used along with cask.sass
// proof-of-concept at best

$row-class-name: row !default
$row-gutter: 2rem !default

%column-base
  display: table-cell
  vertical-align: top
  box-sizing: border-box
  padding-left: $row-gutter
  padding-right: $row-gutter
  &:first-child
    padding-left: 0
  &:last-child
    padding-right: 0

= add-row
  .#{$row-class-name}
    display: table
    min-width: 100%
    +clearfix

= add-column($class-name, $full, $mid: false, $narrow: false)
  .#{$row-class-name} > .#{$class-name}
    @extend %column-base
    +responsive(width, $full, $mid, $narrow)
    @if $mid == 100% or $mid == false
      +tablet
        display: block
        padding-left: 0
        padding-right: 0
    @else if $narrow == 100% or $narrow == false
      +mobile
        display: block
        padding-left: 0
        padding-right: 0

// example:

+row
+add-column(half, 50%, 100%)
+add-column(one_third, 33.33%, 100%)
+add-column(two_thirds, 66.66%, 100%)

+add-column(one_fourth, 25%, 50%, 100%)