Created
December 11, 2012 20:10
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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