Skip to content

Instantly share code, notes, and snippets.

@hdc
Created December 11, 2012 20:10
Show Gist options
  • Save hdc/4261720 to your computer and use it in GitHub Desktop.
Save hdc/4261720 to your computer and use it in GitHub Desktop.
Trying to get grid classes back from susy depending on the type of grid
<!-- Set up the container to have 8 columns -->
<section class="row-8">
<div class="columns-6">
<!-- Needs to inherit the width of the 6 col container -->
<div class="columns-4">
...Content
</div>
<div class="columns-2">
...Content
</div>
</div>
<div class="columns-2">
...Content
</div>
</section>
.row
+container
position: relative
@extend %clearFix
//+susy-grid-background()
// Loop through each grid number and pull settings
@each $n in 3 $grid3-column-width $grid3-gutter-width $grid3-grid-padding, 4 $grid4-column-width $grid4-gutter-width $grid4-grid-padding, 5 $grid5-column-width $grid5-gutter-width $grid5-grid-padding, 8 $grid8-column-width $grid8-gutter-width $grid8-grid-padding
// set variable of grid total number just used for clarity of code.
$gt: nth($n, 1)
//extend susy settings with each loop setting
+with-grid-settings($gt, nth($n, 2), nth($n, 3), nth($n, 4))
//creates the row-#{number} classes
.row-#{$gt}
// set default column styles
.column, [class*="column-"]
+nth-omega(#{$gt}n)
min-height: 1px
position: relative
// lets you center a column
&.centered
float: none
margin: 0 auto !important
// apply single columns width
.column
+span-columns(1, $gt)
// loop through numbers 2 through total column
// number to generate column-#{number} classes
@for $i from 2 through $gt
.column-#{$i}
+span-columns($i, $gt)
.column-#{$i}-omega
+span-columns($i omega, $gt)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment