Example layout

example layout

// from BREAKPOINTS partial

$smartphone-portrait: 320px 960px
$smartphone-landscape: 480px 960px
$tablet-portrait: 550px 960px
$tablet-landscape: 750px 960px
$desktop: 960px

// Max-width queries, only use when necessary: 
$smartphone-portrait-max: max-width 320px
$smartphone-landscape-max: max-width 480px
$tablet-portrait-max: max-width 550px
$tablet-landscape-max: max-width 750px



// LAYOUT
$grids: 24
$gutters: 10px
$output: 'float'

.l-page
  max-width: 915px
  margin: 0 auto

.l-main
  background: white
  clear: both
  padding: 10px
  +clearfix

.l-content
  +grid-span(24, 1)
  +breakpoint($tablet-landscape)
    +grid-span(12, 1)
  +breakpoint($desktop)
    +grid-span(16, 1)

.l-region--sidebar-second
  +grid-span(24, 1)
  +breakpoint($tablet-landscape)
    +grid-span(12, 13)
  +breakpoint($desktop)
    +grid-span(8, 17)