Whitespace helpers

whitespace.styl

$gutter-width = 20
$break-sm = 768
$break-md = 992
$break-lg = 1200
$breakpoints = { 'xs': 0 px, 'sm': $break-sm px, 'md': $break-md px, 'lg': $break-lg px }

for bp in $breakpoints
  for i in (0...10)
    $distance = i * $gutter-width px
    @media (min-width $breakpoints[bp])
      .margin-{i}-{bp}
        margin $distance

      .margin-top-{i}-{bp}
        margin-top $distance

      .margin-right-{i}-{bp}
        margin-right $distance

      .margin-bottom-{i}-{bp}
        margin-bottom $distance

      .margin-left-{i}-{bp}
        margin-left $distance

      .padding-{i}-{bp}
        padding $distance

      .padding-top-{i}-{bp}
        padding-top $distance

      .padding-right-{i}-{bp}
        padding-right $distance

      .padding-bottom-{i}-{bp}
        padding-bottom $distance

      .padding-left-{i}-{bp}
        padding-left $distance

for i in (0...10)
  $distance = i * $gutter-width px

  .margin-{i}
    margin $distance

  .margin-top-{i}
    margin-top $distance

  .margin-right-{i}
    margin-right $distance

  .margin-bottom-{i}
    margin-bottom $distance

  .margin-left-{i}
    margin-left $distance

  .padding-{i}
    padding $distance

  .padding-top-{i}
    padding-top $distance

  .padding-right-{i}
    padding-right $distance

  .padding-bottom-{i}
    padding-bottom $distance

  .padding-left-{i}
    padding-left $distance