// // Defaults // ========================================================================== // // Measurement Configuration // $grid-gen-max-width: 70rem !default; $grid-gen-gutter-width: 1rem !default; $grid-gen-flow-direction: left !default; $grid-gen-column-count: 12 !default; // // Selectors // $grid-gen-container-class: "grid-gen-container" !default; $grid-gen-row-class: "grid-gen-row" !default; $grid-gen-column-class: "grid-gen-col" !default; $grid-gen-column-class-prefix: "grid-gen-col-" !default; // // Mixins / Functions // ========================================================================== // // If necessary, converts a string into a class-selector. Then // returns it. // // @param $str (String) The string to convert // @return (String) The converted string // @function grid-gen-ensure-class($str) { @if (type-of($str) != string) { @error "Function `grid-gen-ensure-class` expected arg `$str` to be of type `string` but received `#{$str}`."; } $char: str-slice($str, 0, 1); @if ($char != ".") { $str: "." + $str; } @return $str; } // // PRIVATE. Generates the class used to indicate column-widths // based on a column-count. // // @param $count (Number) The number of columns to span // @return (String) The desired class // @function _grid-gen-column-class($count) { @if (type-of($count) != number) { @error "Private function `_grid-gen-column-class` expected arg `$count` to be of type `number` but received `#{$count}`."; } @return grid-gen-ensure-class($grid-gen-column-class-prefix + $count); } // // Applies base properties to a grid-container element, primarily // max-width. // @mixin grid-gen-container( $max-width: $grid-gen-max-width) { @if (type-of($max-width) != number) { @error "Mixin `grid-gen-container` expected arg `$max-width` to be of type `number` but received `#{$max-width}`."; } display: block; width: auto; max-width: $max-width; } // // Applies base properites to grid-row element, primarily a // clearfix and exterior margins to offset column gutters. // // @param $gutter-width (Number) The desired gutter width // @mixin grid-gen-row( $gutter-width: $grid-gen-gutter-width) { @if (type-of($gutter-width) != number) { @error "Mixin `grid-gen-row` expected arg `$gutter-width` to be of type `number` but received `#{$gutter-width}`."; } width: auto; display: block; margin-left: $gutter-width * -0.5; margin-right: $gutter-width * -0.5; &:after { content: ' '; clear: both; display: block; } } // // Applies base properties to a grid-column-element, primarily // pertaining to float and exterior padding for gutters. // // @param $flow-direction (String) The direction to float // @param $gutter-width (Number) The desired gutter width // @mixin grid-gen-column( $flow-direction: $grid-gen-flow-direction, $gutter-width: $grid-gen-gutter-width) { $_valid-flow-directions: ("left", "right"); @if (type-of($gutter-width) != number) { @error "Mixin `grid-gen-column-width` expected arg `$gutter-width` to be of type `number` but received `#{$gutter-width}`."; } @if (not index($_valid-flow-directions, $flow-direction)) { @error "Mixin `grid-gen-column-width` expected arg `$flow-direction` to be member of `#{$_valid-flow-directions}` but received `#{$flow-direction}`."; } box-sizing: border-box; display: block; float: $flow-direction; padding-left: $gutter-width * 0.5; padding-right: $gutter-width * 0.5; } // // Applies properties to an individual grid-column element // based on the number of columns we wish for it to span. // // @param $column-span (Number) The desired span count // @param $column-count (Number) The total of columns // @mixin grid-gen-column-width( $column-span: null, $column-count: $grid-gen-column-count) { @if (type-of($column-span) != number) { @error "Mixin `grid-gen-column-width` expected arg `$column-span` to be of type `number` but received `" + $column-span + "`."; } @if (type-of($column-count) != number) { @error "Mixin `grid-gen-column-width` expected arg `$column-count` to be of type `number` but received `" + $column-span + "`."; } @if (not ($column-span <= $column-count)) { @error "Mixin `grid-gen-column-width` expected arg `$column-span` to be less than or equal to arg `$column-count`."; } width: 100% / $column-count * $column-span; } // // Generates a column-span class for each span-count // possibility based on the total number of columns. // // @param $column-count (Number) The desired span count // @param $class-formatter (Function name) The function to generate the // desired class based on span // @mixin grid-gen-column-classes( $column-count: $grid-gen-column-count, $class-formatter: _grid-gen-column-class) { @if (type-of($column-count) != number) { @error "Mixin `grid-gen-column-classes` expected arg `$column-count` to be of type `number` but received `#{$column-count}`."; } @if ((type-of($class-formatter) != string) or (not function-exists($class-formatter))) { @error "Mixin `grid-gen-column-classes` expected arg `$class-formatter` to be name of user-defined function but received `#{$class-formatter}`."; } @for $i from 1 through $column-count { $class: call($class-formatter, $i); $class: grid-gen-ensure-class($class); #{$class} { @include grid-gen-column-width( $column-count: $column-count, $column-span: $i ); } } } // // Generates all necessary grid CSS with defaults! // // @param $container-class (String) Class for grid-container element // @param $row-class (String) Class for grid-row element // @param $column-class (String) Class for grid-column element // @mixin grid-gen-declarations( $container-class: $grid-gen-container-class, $row-class: $grid-gen-row-class, $column-class: $grid-gen-column-class) { // // Ensuring all class-vars do, in fact, represent classes // $container-class: grid-gen-ensure-class($container-class); $row-class: grid-gen-ensure-class($row-class); $column-class: grid-gen-ensure-class($column-class); // // Generate CSS // #{$container-class} { @include grid-gen-container(); } #{$row-class} { @include grid-gen-row(); } #{$column-class} { @include grid-gen-column; } @include grid-gen-column-classes(); }