Skip to content

Instantly share code, notes, and snippets.

@ThatGuyCND
Last active December 23, 2015 09:49
Show Gist options
  • Save ThatGuyCND/6616872 to your computer and use it in GitHub Desktop.
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!
@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