Skip to content

Instantly share code, notes, and snippets.

@mverissimo
Last active March 2, 2017 13:55
Show Gist options
  • Select an option

  • Save mverissimo/227b03158fc015492c63ba255bb26769 to your computer and use it in GitHub Desktop.

Select an option

Save mverissimo/227b03158fc015492c63ba255bb26769 to your computer and use it in GitHub Desktop.
@import "bower_components/susy/sass/susy";
$columns: 12;
$susy:(
columns: $columns,
gutters: 1/5,
container: 960px,
);
.container {
@include container();
position: relative;
}
@for $i from 1 through 12 {
.col-#{$i} {
width: 100%;
}
}
@include media-querie(desktop) {
@for $i from 1 through 12 {
.col-#{$i} {
@include span(#{i} of 12);
}
}
}
@import "bower_components/susy/sass/susy";
$columns: 12;
$susy:(
columns: $columns,
gutters: 1/5,
container: 960px,
);
.container {
@include container();
position: relative;
}
[class*="col-"] {
width: 100%;
}
@include media-querie(desktop) {
@for $i from 1 through 12 {
.col-#{$i} {
@include span(#{i} of 12);
}
}
}
@mixin media-querie($media) {
@if $media == mobile {
@media only screen and (min-width: $bp-mobile) { @content; }
}
@else if $media == tablet {
@media only screen and (min-width: $bp-tablet) { @content; }
}
@else if $media == desktop {
@media only screen and (min-width: $bp-desktop) { @content; }
}
}
<div class="container">
<div class="col-8"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment