Skip to content

Instantly share code, notes, and snippets.

@louderthan10
Created November 1, 2017 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save louderthan10/1a4d0967d69b4a001aaf2bb01bb285f0 to your computer and use it in GitHub Desktop.
Save louderthan10/1a4d0967d69b4a001aaf2bb01bb285f0 to your computer and use it in GitHub Desktop.
LT10 SCSS grid system:
@for $i from 1 through 7 {
$width: floor(100 / $i)/100.01;
@media screen and (max-width: #{$screenSmall}) {
.c#{$i}-mb {
width: percentage($width);
float: left;
}
.pushr#{$i}-mb {
margin-right: percentage($width);
}
.pushl#{$i}-mb {
margin-left: percentage($width);
}
}
@media #{$small} {
.c#{$i}-sm,
.c#{$i} {
width: percentage($width);
float: left;
}
.pushr#{$i}-sm,
.pushr#{$i} {
margin-right: percentage($width);
}
.pushl#{$i}-sm,
.pushl#{$i} {
margin-left: percentage($width);
}
}
@media #{$med} {
.c#{$i}-md {
width: percentage($width) !important;
float: left;
}
.pushr#{$i}-md {
margin-right: percentage($width) !important;
}
.pushl#{$i}-md {
margin-left: percentage($width) !important;
}
}
@media #{$large} {
.c#{$i}-lg {
width: percentage($width) !important;
float: left;
}
.pushr#{$i}-lg {
margin-right: percentage($width) !important;
}
.pushl#{$i}-lg {
margin-left: percentage($width) !important;
}
}
@for $j from 1 through $i {
@media screen and (max-width: $screenSmall) {
.c#{$i}x#{$j}-mb {
width: percentage($width * $j);
float: left;
}
.pushr#{$i}x#{$j}-mb {
margin-right: percentage($width * $j);
}
.pushl#{$i}x#{$j}-mb {
margin-left: percentage($width * $j);
}
}
@media #{$small} {
.c#{$i}x#{$j}-sm,
.c#{$i}x#{$j} {
width: percentage($width * $j);
float: left;
}
.pushr#{$i}x#{$j}-sm,
.pushr#{$i}x#{$j} {
margin-right: percentage($width * $j);
}
.pushl#{$i}x#{$j}-sm,
.pushl#{$i}x#{$j} {
margin-left: percentage($width * $j);
}
}
@media #{$med} {
.c#{$i}x#{$j}-md {
width: percentage($width * $j) !important;
float: left;
}
.pushr#{$i}x#{$j}-md {
margin-right: percentage($width * $j) !important;
}
.pushl#{$i}x#{$j}-md {
margin-left: percentage($width * $j) !important;
}
}
@media #{$large} {
.c#{$i}x#{$j}-lg {
width: percentage($width * $j) !important;
float:left;
}
.pushr#{$i}x#{$j}-lg {
margin-right: percentage($width * $j) !important;
}
.pushl#{$i}x#{$j}-lg {
margin-left: percentage($width * $j) !important;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment