primarycss.sass

/* just an itch that I needed to scratch -- based off of http://www.primarycss.com/ */

$layout_width = 960px
$header_height = 100px

=column($height, $width)
  :height $height
  :width $width
  float: left

body
  margin-left: auto
  margin-right: auto
  width: $layout_width

/* colorful debugging */

.debug
  header
    background-color: yellow
  .col1
    background-color: red
  .col2
    background-color: blue
  .col3
    background-color: green
  .col4
    background-color: purple
  .col5
    background-color: orange

/* Layout 1 */

.layout1
  header
    width: 100%
    height: $header_height
  .col1, .col2, .col3
    +column(400px, 33.3%)
  .col4, .col5
    display: none

/* Layout 2 */

.layout2
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 30%)
  .col2
    +column(400px, 70%)
  .col3, .col4, .col5
    display: none

/* Layout 3 */

.layout3
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 70%)
  .col2
    +column(400px, 30%)
  .col3, .col4, .col5
    display: none

/* Layout 4 */

.layout4
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 60%)
  .col2, .col3
    +column(400px, 20%)
  .col4, .col5
    display: none

/* Layout 5 */

.layout5
  header
    width: 100%
    height: $header_height
  .col1, .col2
    +column(400px, 20%)
  .col3
    +column(400px, 60%)
  .col4, .col5
    display: none

/* Layout 6 */

.layout6
  header
    width: 100%
    height: $header_height
  .col1, .col2, .col3, .col4
    +column(400px, 25%)
  .col5
    display: none


/* Layout 7 */

.layout7
  header
    width: 100%
    height: $header_height
  .col1, .col3
    +column(400px, 20%)
  .col2
    +column(400px, 60%)
  .col4, .col5
    display: none

/* Layout 8 */

.layout8
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 100%)
  .col2
    +column($header_height, 100%)
  .col3, .col4, .col5
    display: none

/* Layout 9 */

.layout9
  header
    width: 0%
    height: 0px
  .col1, .col3
    +column(800px, 20%)
  .col2
    +column(800px, 60%)
  .col4, .col5
    display: none

/* Layout 10 */

.layout10
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 50%)
  .col2
    +column(400px, 50%)
  .col3, .col4, .col5
    display: none

/* Layout 11 */

.layout11
  header
    width: 100%
    height: $header_height
  .col1
    +column(400px, 50%)
  .col2, .col3, .col4
    +column(400px, 50%)
  .col5
    display: none

/* Layout 12 */

.layout12
  header
    width: 100%
    height: $header_height
  .col1, .col2
    +column(800px, 25%)
  .col3, .col4
    +column(400px, 50%)
  .col5
    display: none

/* Layout 13 */

.layout13
  header
    width: 60%
    height: $header_height
  .col1
    +column(600px, 60%)
  .col2, .col3, .col4, .col5
    display: none

/* Layout 14 */

.layout14
  header
    width: 100%
    height: $header_height
  .col1
    +column(200px, 100%)
  .col2
    +column(600px, 100%)
  .col3
    +column($header_height, 100%)
  .col4, .col5
    display: none

/* Layout 15 */

.layout15
  header
    width: 100%
    height: $header_height
  .col1
    +column(800px, 50%)
  .col2, .col3
    +column(400px, 50%)
  .col4, .col5
    display: none

/* Layout 16 */

.layout16
  header
    width: 100%
    height: $header_height
  .col1
    +column(200px, 100%)
  .col2, .col3, .col4
    +column(600px, 33.3%)
  .col5
    display: none

/* Layout 17 */

.layout17
  header
    width: 100%
    height: $header_height
  .col1
    +column(200px, 33.3%)
  .col2, .col3
    +column(200px, 33.3%)
  .col4
    +column(400px, 100%)
  .col5
    display: none

/* Layout 18 */

.layout18
  header
    width: 100%
    height: $header_height
  .col1
    +column(200px, 30%)
  .col2
    +column(200px, 70%)
  .col3
    +column(400px, 100%)
  .col4, .col5
    display: none

/* Layout 19 */

.layout19
  header
    width: 100%
    height: $header_height
  .col1
    +column(200px, 100%)
  .col2, .col3
    +column(600px, 50%)
  .col4, .col5
    display: none

/* Layout 20 */

.layout20
  header
    width: 100%
    height: $header_height
  .col1, .col2, .col3
    +column(200px, 33.3%)
  .col4, .col5
    +column(400px, 50%)

/* Layout 21 */

.layout21
  header
    width: 100%
    height: $header_height
  .col1
    +column(300px, 100%)
    margin-top: 100px
  .col2, .col3, .col4, .col5
    display: none

/* Layout 22 */

.layout22
  header
    width: 0%
    height: 0px
    display: None
  .col1
    +column(800px, 100%)
  .col2, .col3, .col4, .col5
    display: none