/** * Super Simple Grid System * @version 2.0.1 */ /** * All options start with $ssgs-. In this file they are set using the !default * flag so you can override the options before including this file.Use the * options to achieve the following tasks: * * [1]: By default, you use SSGS grids with data-grid. Using this option you * can change this to something else, e.g. data-ssgs. * [2]: Same as [1], but for grid columns (elements inside data-grid). * [3]: Use this option to enable responsive behaviour. This option expects a * map, consisting of pairs of prefixes (e.g. 'M') and media queries (e.g. * '(min-width: 30em)'). This will tell SSGS to set up all fractions with * the given prefix inside the given media query. This map can contain * 0-to-n key-value pairs. * [4]: Use this option to tell SSGS which columns to set up. This option * expects either a one-dimensional or a two-dimensional list. Passing * '2 3 4' would set up all columns (i.e. from '1-2' to '4-4'). If you pass * a two dimensional list (e.g. '2 (1), 3 (1), 4 (3)'), SSGS would only set * up the columns '1-2', '1-3' and '3-4'. * [5]: This option tells SSGS how wide gutters should be. Gutters in SSGS are * fixed, while columns are fully flexible. That means you should pass * values like px or em to this option. * * In most cases you would only override options [3] to [5]. */ $ssgs-namespace: 'grid' !default; /* [1] */ $ssgs-columns-namespace: 'col' !default; /* [2] */ $ssgs-prefixes: () !default; /* [3] */ $ssgs-columns: 2 3 4 5 !default; /* [4] */ $ssgs-gutters: 1.5em !default; /* [5] */ /** * This private mixin sets up the columns. You don't have to include it anywhere * else as it's included at the end of this file with the options you've * previously overridden. */ @mixin _column-setup ($prefix: false) { $cache: (); // Loop through all the column groups, i.e. halves, thirds, etc. @each $group in $ssgs-columns { $include: (); // Check if we're dealing with a one-dimensional list entry (e.g. '2') or a // two-dimensional list (e.g. '3 (1, 2)'). @if (length($group) == 2) { $include: nth($group, 2); $group: nth($group, 1); } // Take all fractions for the current group into account (e.g. '1-4, 2-4, // 3-4'). @for $i from 1 to $group { // Only include the current fraction if we're dealing with a one- // dimensional list or if it's included in the nested second. @if length($include) == 0 or (length($include) and index($include, $i)) { $value: 100% / $group * $i; $index: index($cache, $value); // To avoid duplicate widths we're caching the ones we've already dealt // with. That means columns like 1-2, 2-4, 3-6 will share a common // selector. // This part also sets up the placeholder selectors we'll extend later // on if the current width has not yet been encountered. @if not $index { $cache: append($cache, $value); $index: length($cache); %#{$prefix + '-' + $index} { width: $value; } } // Construct the actual selector, with or without prefix and extend the // placeholder selector created above. $selector: if($prefix, $prefix, "") + $i + '-' + $group; [data-#{$ssgs-columns-namespace}~="#{$selector}"] { @extend %#{$prefix + '-' + $index}; } } } } } /** * Use grids as data-grid components. They have two modifiers ('gutterless', * 'rev') and can be applied to all elements. A clearfix is already included. * * gutterless: Creates a grid where columns have no spacing in between, i.e. * gutter-width is 0. * rev: Creates a grid where the column order is reversed. * * Example: *
*
*
*
*/ [data-#{$ssgs-namespace}] { display: block; margin-left: -$ssgs-gutters; &:after { content: ""; display: table; clear: both; } } [data-#{$ssgs-namespace}~="rev"] [data-#{$ssgs-columns-namespace}] { float: right; } [data-#{$ssgs-namespace}~="gutterless"] { margin-left: 0; [data-#{$ssgs-columns-namespace}] { padding-left: 0; } } /** * Use columns as data-col components. Pass the column definitions as attribute * values. If no value is given, the column will just span the full width. * * The following example will create a half-width column in all contexts that * changes to a quarter-width column on a first media query and to a fifth-width * column on another media query. For more information on this behaviour, see * option [3]. * * Make sure you only use column components for structure, not for style. The * gutters are created using paddings, so your backgrounds or borders would not * work as you intended. * * Example: *
*/ [data-#{$ssgs-columns-namespace}] { display: block; width: 100%; float: left; padding-left: $ssgs-gutters; box-sizing: border-box; } /** * The following lines actually call the _column-setup mixin. First it's run * with no prefix or media query, those columns will then be set up in all * contexts. The @each loop sets up the responsive columns inside the media * queries defined in $ssgs-prefixes. */ @include _column-setup(); @each $prefix, $media-query in $ssgs-prefixes { @media #{$media-query} { @include _column-setup($prefix); } }