css/sass/partials/_common/_grid.scss
/*-----------------------------------*\
$TOAST-GRID
An insane grid.
You'd be mad to use it.
Usage
=====
Assuming default values:
<div class="grid">
<div class="grid__col grid__col--1-of-2">
A half-width column.
</div>
<div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
A quarter, pulled left by its own width. You get this, right?
</div>
</div>
Customisation
=============
$grid-namespace and $grid-column-namespace
adjusts the class names for the grid. With
default values, grid wrappers have a class
of '.grid' and columns '.grid__col'.
$col-groups(n) adjusts column divisions.
For example, $col-groups(12) will produce
a 12-column grid. $col-groups(3,6,8)
will produce a 3-, 6-, and 8-column grid.
$gutter-width is—you guessed it—the gutter
width. Accepts any unit.
That's it. Have fun.
\*-----------------------------------*/
// Namespaces
// This stops me from being overzealous with enforcing classes
$DE-grid-namespace: "grid" !default;
$DE-grid-column-namespace: "grid__col" !default;
// $col-groups are the column groups you want
// For example, $col-groups: (3, 4, 5) will output:
// .grid__col--n-of-3, .grid__col--n-of-4, [...]
$DE-col-groups: (2, 3, 4, 5, 6, 8, 12) !default;
// Gutter width
$DE-gutter-width: 20px !default;
// Breakpoints
$DE-breakpoint-medium: 1500px !default;
$DE-breakpoint-small: 768px !default;
.#{$DE-grid-namespace} {
list-style: none;
margin-left: -$DE-gutter-width;
> %span-all { width: percentage(1/1); }
> %one-half { width: percentage(1/2); }
> %one-third { width: percentage(1/3); }
> %two-thirds { width: percentage(2/3); }
> %one-quarter { width: percentage(1/4); }
> %two-quarters { width: percentage(2/4); }
> %three-quarters { width: percentage(3/4); }
> %push-span-all { margin-left: percentage(1/1); }
> %push-one-half { margin-left: percentage(1/2); }
> %push-one-third { margin-left: percentage(1/3); }
> %push-two-thirds { margin-left: percentage(2/3); }
> %push-one-quarter { margin-left: percentage(1/4); }
> %push-two-quarters { margin-left: percentage(2/4); }
> %push-three-quarters { margin-left: percentage(3/4); }
> %pull-span-all { margin-left: -(percentage(1/1)); }
> %pull-one-half { margin-left: -(percentage(1/2)); }
> %pull-one-third { margin-left: -(percentage(1/3)); }
> %pull-two-thirds { margin-left: -(percentage(2/3)); }
> %pull-one-quarter { margin-left: -(percentage(1/4)); }
> %pull-two-quarters { margin-left: -(percentage(2/4)); }
> %pull-three-quarters { margin-left: -(percentage(3/4)); }
// For each of our column groups...
@each $group in $DE-col-groups {
// For each column width from 1 to the column group...
@for $i from 1 through $group {
> .#{$DE-grid-column-namespace}--#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %three-quarters;
} @else {
width: percentage($i/$group);
}
}
> .#{$DE-grid-column-namespace}--push-#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %push-span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %push-one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %push-one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %push-two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %push-one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %push-two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %push-three-quarters;
} @else {
margin-left: percentage($i/$group);
}
}
> .#{$DE-grid-column-namespace}--pull-#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %pull-span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %pull-one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %pull-one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %pull-two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %pull-one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %pull-two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %pull-three-quarters;
} @else {
margin-left: -(percentage($i/$group));
}
}
} // end @for
} // end @each
// All direct descendents of .grid get treated the same way.
// This might be overkill for some, but it's a time-saver for me.
.#{$DE-grid-column-namespace} {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: $DE-gutter-width;
vertical-align: top;
@media (max-width: $DE-breakpoint-medium) {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}
@media (max-width: $DE-breakpoint-medium) and (min-width: $DE-breakpoint-small) {
&[class*="#{$DE-grid-column-namespace}--m-"] {
display: inline-block;
margin-right: -.24em;
}
&.#{$DE-grid-column-namespace}--m-1-of-2 {
width: percentage(1/2);
}
&.#{$DE-grid-column-namespace}--m-1-of-3 {
width: percentage(1/3);
}
&.#{$DE-grid-column-namespace}--m-2-of-3 {
width: percentage(2/3);
}
&.#{$DE-grid-column-namespace}--m-1-of-4 {
width: percentage(1/4);
}
&.#{$DE-grid-column-namespace}--m-2-of-4 {
width: percentage(1/2);
}
&.#{$DE-grid-column-namespace}--m-3-of-4 {
width: percentage(3/4);
}
}
@media (max-width: $DE-breakpoint-small) {
&[class*="#{$DE-grid-column-namespace}--s-"] {
display: inline-block;
margin-right: -.24em;
}
&.#{$DE-grid-column-namespace}--s-1-of-2 {
width: percentage(1/2);
}
&.#{$DE-grid-column-namespace}--s-1-of-3 {
width: percentage(1/3);
}
&.#{$DE-grid-column-namespace}--s-2-of-3 {
width: percentage(2/3);
}
&.#{$DE-grid-column-namespace}--s-1-of-4 {
width: percentage(1/4);
}
&.#{$DE-grid-column-namespace}--s-2-of-4 {
width: percentage(1/2);
}
&.#{$DE-grid-column-namespace}--s-3-of-4 {
width: percentage(3/4);
}
}
}
// Centers the column in the grid and clears the row of all other columns
.#{$DE-grid-column-namespace}--centered {
display: block;
margin-left: auto;
margin-right: auto;
}
// Displays the column as the first in its row
.#{$DE-grid-column-namespace}--d-first {
float: left;
}
// Displays the column as the last in its row
.#{$DE-grid-column-namespace}--d-last {
float: right;
}
// Removes gutters from the columns
&.grid--no-gutter {
margin-left: 0;
width: 100%;
.#{$DE-grid-column-namespace} {
padding-left: 0;
}
.#{$DE-grid-column-namespace}--span-all {
margin-left: 0;
width: 100%;
}
}
// Align column to the bottom.
.#{$DE-grid-column-namespace}--ab {
vertical-align: bottom;
}
// Align column to the middle.
.#{$DE-grid-column-namespace}--am {
vertical-align: middle;
}
}