|
@@ -0,0 +1,49 @@
|
|
|
|
+// http://www.thesassway.com/intermediate/simple-grid-mixins
|
|
|
|
+
|
|
|
|
+$default_gap: 1em;
|
|
|
|
+$default_sum: 12;
|
|
|
|
+
|
|
|
|
+@mixin row() {
|
|
|
|
+ font-size: 0;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+%col-reset {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ white-space:normal;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
|
|
|
|
+ @extend %col-reset;
|
|
|
|
+ padding-left: $gap*$offset;
|
|
|
|
+ padding-right: $gap;
|
|
|
|
+ &:last-child{padding-right: 0;}
|
|
|
|
+ margin-left: percentage(($col/$sum)*$offset);
|
|
|
|
+
|
|
|
|
+ @media only screen and (min-width: 768px) {
|
|
|
|
+ width: percentage($col/$sum);
|
|
|
|
+ vertical-align: $align;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.row{
|
|
|
|
+ @include row;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@for $c from 1 through $default_sum {
|
|
|
|
+ .col-#{$c} {
|
|
|
|
+ @include col($c);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@for $c from 1 through $default_sum - 1 {
|
|
|
|
+ @for $o from 1 through $default_sum - $c {
|
|
|
|
+ .col-#{$c}-offset-#{$o} {
|
|
|
|
+ @include col($c, $o);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|