Skip to content

Instantly share code, notes, and snippets.

@laurendorman

laurendorman/_utilties.grid.scss

Created March 30, 2017 09:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save laurendorman/ea8249acf756cd89862b028cc0797eb8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save laurendorman/ea8249acf756cd89862b028cc0797eb8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. laurendorman created this gist Mar 30, 2017.
    103 changes: 103 additions & 0 deletions _utilties.grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    @mixin apply-basis($frac) {
    > .u-grid__item {
    width: $frac * 100%;
    }
    }

    .u-grid {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    &--2 {
    @include apply-basis(1/1);

    @include media-query('m') {
    @include apply-basis(1/2);
    }
    }

    &--3 {
    @include apply-basis(1/1);

    @include media-query('s') {
    @include apply-basis(1/3);
    }
    }

    &--4 {
    @include apply-basis(1/2);

    @include media-query('s') {
    @include apply-basis(1/4);
    }
    }

    &--5 {
    @include apply-basis(1/1);

    @include media-query('s') {
    @include apply-basis(1/3);
    }
    @include media-query('m') {
    @include apply-basis(1/4);
    }
    @include media-query('l') {
    @include apply-basis(1/5);
    }
    }

    &--6 {
    @include apply-basis(1/2);

    @include media-query('s') {
    @include apply-basis(1/3);
    }
    @include media-query('m') {
    @include apply-basis(1/4);

    > .u-grid__item:nth-child(6n+5),
    > .u-grid__item:nth-child(6n+6) {
    display: none;
    }
    }
    @include media-query('l') {
    @include apply-basis(1/6);

    > .u-grid__item:nth-child(6n+5),
    > .u-grid__item:nth-child(6n+6) {
    display: block;
    }
    }
    }

    &--8 {
    @include apply-basis(1/2);

    @include media-query('s') {
    @include apply-basis(1/4);
    }
    @include media-query('m') {
    @include apply-basis(1/6);
    }
    @include media-query('l') {
    @include apply-basis(1/8);
    }
    }
    }

    .u-gutter {
    @include spacing('mh', -1);

    > .u-grid__item {
    @include spacing('ph', 1);
    }

    &--small {
    @include spacing('mh', -4);

    > .u-grid__item {
    @include spacing('ph', 4);
    }
    }
    }
    24 changes: 24 additions & 0 deletions _utilties.media-queries.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /*
    ** Breakpoints
    */

    $breakpoints: (
    xs: 23.4375em, /* 375/16 */
    s: 40.625em, /* 650/16 */
    m: 54.125em, /* 850/16 */
    l: 68.75em, /* 1100/16 */
    xl: 90em, /* 1440/16 */
    );

    /*
    ** Media Query Mixin
    */
    @mixin media-query($media-query) {
    @each $size, $br in $breakpoints {
    @if $media-query == $size {
    @media only screen and (min-width: map-get($breakpoints, $size)) {
    @content;
    }
    }
    }
    }
    115 changes: 115 additions & 0 deletions _utilties.spacing.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    // Spacing Mixin for applying spacing units to elements directly
    $spacing-namespace: 'm', 'mv', 'mh', 'mt', 'mr', 'mb', 'p', 'ph', 'pv';

    @mixin spacing($spacing-namespace, $unit: 0, $min: 2.334rem) {
    $result: $base-unit / ($unit * 2);
    $minimum: $min / $unit;

    @if ($unit == 0) {
    $result: $base-unit;
    $minimum: $min;
    }

    @if ($spacing-namespace == 'm') {
    margin: $minimum;

    @include media-query('s') {
    margin: $result;
    }
    }

    @if ($spacing-namespace == 'mv') {
    margin-top: $minimum;
    margin-bottom: $minimum;

    @include media-query('s') {
    margin-top: $result;
    margin-bottom: $result;
    }
    }

    @if ($spacing-namespace == 'mh') {
    margin-left: $minimum;
    margin-right: $minimum;

    @include media-query('s') {
    margin-left: $result;
    margin-right: $result;
    }
    }

    @if ($spacing-namespace == 'mt') {
    margin-top: $minimum;

    @include media-query('s') {
    margin-top: $result;
    }
    }

    @if ($spacing-namespace == 'mr') {
    margin-right: $minimum;

    @include media-query('s') {
    margin-right: $result;
    }
    }

    @if ($spacing-namespace == 'mb') {
    margin-bottom: $minimum;

    @include media-query('s') {
    margin-bottom: $result;
    }
    }

    @if ($spacing-namespace == 'p') {
    padding: $minimum;

    @include media-query('s') {
    padding: $result;
    }
    }

    @if ($spacing-namespace == 'pv') {
    padding-top: $minimum;
    padding-bottom: $minimum;

    @include media-query('s') {
    padding-top: $result;
    padding-bottom: $result;
    }
    }

    @if ($spacing-namespace == 'ph') {
    padding-left: $minimum;
    padding-right: $minimum;

    @include media-query('s') {
    padding-left: $result;
    padding-right: $result;
    }
    }
    }

    .#{$util-namespace}space {
    @each $ns in $spacing-namespace {
    &-#{$ns} {
    @include spacing($ns);
    @for $unit from 1 through 4 {
    $result: $base-unit / ($unit * 2);

    &--#{$unit} {
    @include spacing($ns, $unit);
    }
    }
    }

    &-mh--neg {
    margin-left: -$base-unit;
    margin-right: -$base-unit;

    padding-left: $base-unit;
    padding-right: $base-unit;
    }
    }
    }