Last active
December 23, 2015 09:49
-
-
Save ThatGuyCND/6616872 to your computer and use it in GitHub Desktop.
Use Susy in your prototyping tool? Here's a stupid simple Sass mixin for easy content column layouts. just include it and go!
This file contains 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
@for $i from 1 through $total-columns { | |
.col__#{$total-columns}-#{$i} { | |
// Mobile & Tablet: on small and medium screens, all columns are full width | |
@include span-columns($total-columns); | |
// Desktop: when no longer on a medium display, obey column sizes | |
@include respond-to($medium) { | |
@include span-columns($i); | |
} | |
} | |
.col__#{$total-columns} { | |
@include container($total-columns); | |
@include respond-to($medium) { | |
.col-right { | |
@include omega; | |
} | |
} | |
} | |
} | |
/** MARKUP EXAMPLE | |
* div.col__12 > div.col__12-7 + div.col__12-5.col-right | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment