_grip.scss

/*! Grip | MIT License | @colourgarden & @meowsus// */

////////////////////////////////////////
//  #SETTINGS
////////////////////////////////////////

//
// 1. prefix namespace for grid layout and cells
// 2. the gutter applied to grid cells
// 3. width class naming style. Options include `fraction`, `percentage` or
//    `fragment`
// 4. width denominator values. Modify as needed. 2 = 1/2, 3 = 1/3, 2/3, etc.
// 5. enables permutation of all width classes with appended responsive modifier
//    suffixes
// 6. responsive breakpoints. Modify as needed.
//
$grip-namespace:  'grid' !default;  // [1]
$grip-gutter:     16px !default;    // [2]

$grip-width-class-style:  'percentage' !default;  // [3]
$grip-widths:             (2, 3, 4) !default;   // [4]

$grip-enable-responsive:  true !default;  // [5]
$grip-breakpoints: (
  "medium":  "screen and (min-width: 760px)",
  "wide":    "screen and (min-width: 960px)",
  "x-wide":  "screen and (min-width: 1160px)",
) !default;  // [6]


//
// Toggleable grid layout modifiers.
//
$grip-enable-grid-center:   false !default;
$grip-enable-grid-right:    false !default;
$grip-enable-grid-middle:   false !default;
$grip-enable-grid-bottom:   false !default;
$grip-enable-grid-flush:    false !default;
$grip-enable-grid-tiny:     false !default;
$grip-enable-grid-small:    false !default;
$grip-enable-grid-large:    false !default;
$grip-enable-grid-huge:     false !default;
$grip-enable-grid-auto:     false !default;
$grip-enable-grid-reverse:  false !default;


//
// Toggleable grid cell layout modifiers.
//
$grip-enable-grid-cell-center:  false !default;

$grip-enable-grid-cell-content-center:  false !default;
$grip-enable-grid-cell-content-right:   false !default;





////////////////////////////////////////
//  #FUNCTIONS
////////////////////////////////////////
//
// Responsible for constructing the grid cell class name. Returns Strings like:
// `grid__cell--16` or `grid__cell--16-at-medium`.
//
// 1. sets the width delimiter
// 2. sets the class name to `grid__cell--1/6` or `grid__cell--1-of-6`
// 3. sets the class name to `grid__cell--16` which is the percentage, floored
//
@function grip-create-class-name($style, $numerator, $denominator, $breakpoint-alias) {
    $class-name: null;

    @if ($style == 'fraction' or $style == 'fragment') {
        $delimiter: if($style == 'fraction', \/, -of-); // [1]
        $class-name: "#{$grip-namespace}__cell--#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-alias}"; // [2]
    }
    @else {
        $class-width: floor(($numerator / $denominator) * 100);
        $class-name: "#{$grip-namespace}__cell--#{$class-width}#{$breakpoint-alias}"; // [3]
    }

    @return $class-name;
}





////////////////////////////////////////
//  #MIXINS
////////////////////////////////////////
//
// Responsible for outputting the final list of width modifiers.
//
// 1. create a scoped, temporary map of width data. Used to ensure there is no
//    class duplication
// 2. handle the use case of someone using a `1` in the `$grid-widths` map
// 3. loop widths as fractions
// 4. determine if this width data is already accounted for in the temporary map
// 5. add the new entry to the temporary map
//
@mixin grip-create-widths($widths, $breakpoint-alias: null) {
    $pseudo-class-map: (); // [1]

    @each $denominator in $widths {
        @if ($denominator == 1) { // [2]
            $class-name: grip-create-class-name($grip-width-class-style, 1, 1, $breakpoint-alias);

            .#{$class-name} {
                width: 100%;
            }
        }
        @else {
            @for $numerator from 1 to $denominator { // [3]
                $class-name: grip-create-class-name($grip-width-class-style, $numerator, $denominator, $breakpoint-alias);
                $width-value: percentage($numerator / $denominator);

                $duplicate: map-get($pseudo-class-map, $width-value); // [4]
                @if ($duplicate == null) {
                    .#{$class-name} {
                        width: $width-value;
                    }

                    $add-class: ($width-value: $class-name);
                    $pseudo-class-map: map-merge($pseudo-class-map, $add-class); // [5]
                }
            }
        }
    }
}





////////////////////////////////////////
//  #GRID-LAYOUT
////////////////////////////////////////

.#{$grip-namespace} {
    display: block;
    margin:  0;
    margin-left: -($grip-gutter);
    padding: 0;
    font-size: 0;
    list-style: none;
}

    .#{$grip-namespace}__cell {
        display: inline-block;
        margin:  0;
        padding: 0;
        padding-left: $grip-gutter;
        width: 100%;
        font-size: 1rem;
        vertical-align: top;
        box-sizing: border-box;
    }





////////////////////////////////////////
// #TOGGLEABLE-GRID-LAYOUT-MODIFIERS
////////////////////////////////////////

@if ($grip-enable-grid-center) {
    .#{$grip-namespace}--center {
        text-align: center;

        > .#{$grip-namespace}__cell {
            text-align: left;
        }
    }
}

@if ($grip-enable-grid-right) {
    .#{$grip-namespace}--right {
        text-align: right;

        > .#{$grip-namespace}__cell {
            text-align: left;
        }
    }
}

@if ($grip-enable-grid-middle) {
    .#{$grip-namespace}--middle {
        > .#{$grip-namespace}__cell {
            vertical-align: middle;
        }
    }
}

@if ($grip-enable-grid-bottom) {
    .#{$grip-namespace}--bottom {
        > .#{$grip-namespace}__cell {
            vertical-align: bottom;
        }
    }
}

@if ($grip-enable-grid-flush) {
    .#{$grip-namespace}--flush {
        margin-left: 0;

        > .#{$grip-namespace}__cell {
            padding-left: 0;
        }
    }
}

@if ($grip-enable-grid-tiny) {
    .#{$grip-namespace}--tiny {
        margin-left: round($grip-gutter / 4) * -1;

        > .#{$grip-namespace}__cell {
            padding-left: round($grip-gutter / 4);
        }
    }
}

@if ($grip-enable-grid-small) {
    .#{$grip-namespace}--small {
        margin-left: round($grip-gutter / 2) * -1;

        > .#{$grip-namespace}__cell {
            padding-left: round($grip-gutter / 2);
        }
    }
}

@if ($grip-enable-grid-large) {
    .#{$grip-namespace}--large {
        margin-left: ($grip-gutter * 2) * -1;

        > .#{$grip-namespace}__cell {
            padding-left: ($grip-gutter * 2);
        }
    }
}

@if ($grip-enable-grid-huge) {
    .#{$grip-namespace}--huge {
        margin-left: ($grip-gutter * 4) * -1;

        > .#{$grip-namespace}__cell {
            padding-left: ($grip-gutter * 4);
        }
    }
}

@if ($grip-enable-grid-auto) {
    .#{$grip-namespace}--auto {
        > .#{$grip-namespace}__cell {
            width: auto;
        }
    }
}

@if ($grip-enable-grid-reverse) {
    .#{$grip-namespace}--reverse {
        direction: rtl;

        > .#{$grip-namespace}__cell {
            direction: ltr;
        }
    }
}


////////////////////////////////////////
//  #TOGGLEABLE-GRID-CELL-MODIFIERS
////////////////////////////////////////

@if ($grip-enable-grid-cell-center) {
    .#{$grip-namespace}__cell--center {
        display: block;
        margin: 0 auto;
    }
}

@if ($grip-enable-grid-cell-content-center) {
    .#{$grip-namespace}__cell--content-center {
        text-align: center;

        > * { display: inline-block; }
    }
}

@if ($grip-enable-grid-cell-content-right) {
    .#{$grip-namespace}__cell--content-right {
        text-align: right;

        > * { display: inline-block; }
    }
}





////////////////////////////////////////
//  #GRID-WIDTHS
////////////////////////////////////////
//
// 1. output default width modifiers
// 2. if responsive flag is enabled, add responsive width modifiers
//
@include grip-create-widths($grip-widths); // [1]

@if $grip-enable-responsive { // [2]
    @each $alias, $query in $grip-breakpoints {
        @media #{$query} {
            @include grip-create-widths($grip-widths, -at-#{$alias});
        }
    }
}