Permalink
Fetching contributors…
Cannot retrieve contributors at this time
314 lines (258 sloc) 9.91 KB
// scss-lint:disable SelectorDepth
/// Global namespace for grid object
/// @access public
/// @group grid
/// @type string
$DBgrid-namespace: "o-grid" !default;
/// Global namespace for grid column object
/// @access public
/// @group grid
/// @type string
$DBgrid-column-namespace: "o-grid__col" !default;
/// Global column divisions of the grid
/// @example scss
/// $DBcol-groups(12) will produce a 12-column grid.
/// @example scss
/// $DBcol-groups(3,6,8) will produce a 3-, 6-, and 8-column grid.
/// @example scss
/// $DBcol-groups: (3, 4, 5) will output: .grid__col--n-of-3, .grid__col--n-of-4, [...]
/// @access public
/// @group grid
/// @type list
$DBcol-groups: (2, 3, 4, 6, 12) !default;
/// Global grid gutter width. Accepts any unit.
/// @access public
/// @group grid
/// @type number
$DBgutter-width: 20px !default;
/// Global medium breakpoint value
/// @access public
/// @group grid
/// @type number
$DBbreakpoint-medium: 750px !default;
/// Global small breakpoint value
/// @access public
/// @group grid
/// @type number
$DBbreakpoint-small: 550px !default;
/// Grid system adapted from [Daniel Eden's Toast](http://daneden.github.io/Toast/)
/// @example html - 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>
/// @access public
/// @group grid
/// @todo consider abstracting out breaking point logic
/// @param {string} grid-namespace [$DBgrid-namespace] - Local grid namespace
/// @param {string} grid-column-namespace [$DBgrid-column-namespace] - Local column namespace
/// @param {list} col-groups [$DBcol-groups] - Local colum groups
/// @param {number} gutter-width [$DBgutter-width] - Local gutter width
/// @param {number} breakpoint-medium [$DBbreakpoint-medium] - Local breakpoint medium
/// @param {number} breakpoint-small [$DBbreakpoint-smal] - Local breakpoint small
@mixin grid(
$grid-namespace: $DBgrid-namespace,
$grid-column-namespace: $DBgrid-column-namespace,
$col-groups: $DBcol-groups,
$gutter-width: $DBgutter-width,
$breakpoint-medium: $DBbreakpoint-medium,
$breakpoint-small: $DBbreakpoint-small
) {
.#{$grid-namespace} {
list-style: none;
margin-left: -$DBgutter-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 $DBcol-groups {
// For each column width from 1 to the column group...
@for $i from 1 through $group {
$relation: ($i / $group);
.#{$grid-column-namespace}--#{$i}-of-#{$group} {
@if $relation == 1 {
@extend %span-all;
} @else if $relation == 1 {
@extend %one-half;
} @else if $relation == (1 / 3) {
@extend %one-third;
} @else if $relation == (2 / 3) {
@extend %two-thirds;
} @else if $relation == (1 / 4) {
@extend %one-quarter;
} @else if $relation == (2 / 4) {
@extend %two-quarters;
} @else if $relation == (3 / 4) {
@extend %three-quarters;
} @else {
width: percentage($i / $group);
}
}
.#{$grid-column-namespace}--push-#{$i}-of-#{$group} {
@if $relation == 1 {
@extend %push-span-all;
} @else if $relation == (1 / 2) {
@extend %push-one-half;
} @else if $relation == (1 / 3) {
@extend %push-one-third;
} @else if $relation == (2 / 3) {
@extend %push-two-thirds;
} @else if $relation == (1 / 4) {
@extend %push-one-quarter;
} @else if $relation == (2 / 4) {
@extend %push-two-quarters;
} @else if $relation == (3 / 4) {
@extend %push-three-quarters;
} @else {
margin-left: percentage($i / $group);
}
}
.#{$grid-column-namespace}--pull-#{$i}-of-#{$group} {
@if $relation == 1 {
@extend %pull-span-all;
} @else if $relation == (1 / 2) {
@extend %pull-one-half;
} @else if $relation == (1 / 3) {
@extend %pull-one-third;
} @else if $relation == (2 / 3) {
@extend %pull-two-thirds;
} @else if $relation == (1 / 4) {
@extend %pull-one-quarter;
} @else if $relation == (2 / 4) {
@extend %pull-two-quarters;
} @else if $relation == (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 its a time-saver for me.
.#{$grid-column-namespace} {
box-sizing: border-box;
display: inline-block;
margin-right: -0.24em;
min-height: 1px;
padding-left: $DBgutter-width;
vertical-align: top;
// Remove whitespace offset when there is no whitespace
.#{$grid-namespace}--nowhitespace &,
[data-reactid] & {
margin-right: 0;
}
.#{$grid-namespace}--responsive & {
@media (max-width: $DBbreakpoint-medium) {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}
@media (max-width: $DBbreakpoint-medium) and (min-width: $DBbreakpoint-small) {
&[class*="#{$grid-column-namespace}--m-"] {
display: inline-block;
margin-right: -0.24em;
}
&.#{$grid-column-namespace}--m-1-of-2,
&.#{$grid-column-namespace}--m-2-of-4 {
width: percentage(1 / 2);
}
&.#{$grid-column-namespace}--m-1-of-3 {
width: percentage(1 / 3);
}
&.#{$grid-column-namespace}--m-2-of-3 {
width: percentage(2 / 3);
}
&.#{$grid-column-namespace}--m-1-of-4 {
width: percentage(1 / 4);
}
&.#{$grid-column-namespace}--m-3-of-4 {
width: percentage(3 / 4);
}
}
@media (max-width: $DBbreakpoint-small) {
&[class*="#{$grid-column-namespace}--s-"] {
display: inline-block;
margin-right: -0.24em;
}
&.#{$grid-column-namespace}--s-1-of-2,
&.#{$grid-column-namespace}--s-2-of-4 {
width: percentage(1 / 2);
}
&.#{$grid-column-namespace}--s-1-of-3 {
width: percentage(1 / 3);
}
&.#{$grid-column-namespace}--s-2-of-3 {
width: percentage(2 / 3);
}
&.#{$grid-column-namespace}--s-1-of-4 {
width: percentage(1 / 4);
}
&.#{$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
.#{$grid-column-namespace}--centered {
display: block;
margin-left: auto;
margin-right: auto;
}
// Displays the column as the first in its row
.#{$grid-column-namespace}--d-first {
float: left;
}
// Displays the column as the last in its row
.#{$grid-column-namespace}--d-last {
float: right;
}
// Removes gutters from the columns
.#{$grid-namespace}--no-gutter {
margin-left: 0;
width: 100%;
.#{$grid-column-namespace} {
padding-left: 0;
}
.#{$grid-column-namespace}--span-all {
margin-left: 0;
width: 100%;
}
}
// Align column to the bottom.
.#{$grid-column-namespace}--ab,
.#{$grid-column-namespace}--align-bottom {
vertical-align: bottom;
}
// Align column to the middle.
.#{$grid-column-namespace}--am,
.#{$grid-column-namespace}--align-middle {
vertical-align: middle;
}
}
@include grid;