ssgs.scss

/**
 * 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:
 * <div data-grid="gutterless rev">
 *   <div data-col="1-2"></div>
 *   <div data-col="1-2"></div>
 * </div>
 */

[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:
 * <div data-col="1-2 M1-4 L1-5"></div>
 */

[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);
  }
}