Commit 6ef96122 authored by Aron Carroll's avatar Aron Carroll

Pass the grid gutter into the grid mixins

parent 8d5d474e
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
// four columns on desktop sized viewports. // four columns on desktop sized viewports.
// //
// <div class="grid"> // <div class="grid">
// <div class="column-tablet-one-half column-desktop-one-quarter"></div> // <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-one-half column-desktop-one-quarter"></div> // <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-one-half column-desktop-one-quarter"></div> // <div class="column-tablet-1-2 column-desktop-1-4"></div>
// <div class="column-tablet-one-half column-desktop-one-quarter"></div> // <div class="column-tablet-1-2 column-desktop-1-4"></div>
// </div> // </div>
.grid { .grid {
@include grid-row; @include grid-row;
......
...@@ -5,14 +5,13 @@ ...@@ -5,14 +5,13 @@
// The implementation is largely based on the grid system created by // The implementation is largely based on the grid system created by
// Harry Roberts <http://csswizardry.com/csswizardry-grids/> and the Yahoo // Harry Roberts <http://csswizardry.com/csswizardry-grids/> and the Yahoo
// Pure system <http://git.io/ogODXA> // Pure system <http://git.io/ogODXA>
$grid-gutter: 20px !default;
// Sets up styles for the grid wrapper. // Sets up styles for the grid wrapper.
@mixin grid-row { @mixin grid-row($gutter: 0) {
margin: 0; margin: 0;
padding: 0; padding: 0;
// Remove the margin from the first column. // Remove the margin from the first column.
margin-left: -$grid-gutter; margin-left: -$gutter;
// Removes whitespace on browsers that do not support flexbox. // Removes whitespace on browsers that do not support flexbox.
letter-spacing: -0.31em; letter-spacing: -0.31em;
// Remove optimizeLegibility if applied. // Remove optimizeLegibility if applied.
...@@ -33,12 +32,12 @@ $grid-gutter: 20px !default; ...@@ -33,12 +32,12 @@ $grid-gutter: 20px !default;
// Example // Example
// //
// .my-awkward-item { // .my-awkward-item {
// @include grid-column { width: 43%; } // @include grid-column($default-gutter) { width: 43%; }
// } // }
@mixin grid-column { @mixin grid-column($gutter: 0) {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding-left: $grid-gutter; padding-left: $gutter;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment