grdd.scss

/*! Grdd by @imdiegopq */

// Namespace
$grdd-namespace: "c-";

// Gutter
$grdd-gutter: .625em;

// Sizes
$grdd-sizes: true;

// Breakpoints
$grdd-breakpoints: ( 
  "sm": 48em
);

/*
  Here starts the grid!
*/

@mixin _protoSizes($selector, $media) {
  $media: if($media=="", "", "\\@#{$media}");
  #{$selector}--1\/1#{$media} { width: 100%; }
  #{$selector}--3\/6#{$media},
  #{$selector}--2\/4#{$media},
  #{$selector}--1\/2#{$media} { width: 50%; }
  #{$selector}--2\/6#{$media},
  #{$selector}--1\/3#{$media} { width: 33.333%; }
  #{$selector}--1\/4#{$media} { width: 25%; }
  #{$selector}--1\/5#{$media} { width: 20%; }
  #{$selector}--1\/6#{$media} { width: 16.666%; }
  #{$selector}--4\/6#{$media},
  #{$selector}--2\/3#{$media} { width: 66.666%; }
  #{$selector}--2\/5#{$media} { width: 40%; }
  #{$selector}--3\/4#{$media} { width: 75%; }
  #{$selector}--3\/5#{$media} { width: 60%; }
  #{$selector}--4\/5#{$media} { width: 80%; }
  #{$selector}--5\/6#{$media} { width: 83.333%; }
}

.#{$grdd-namespace}grdd { 
  display: block;
  margin-left: -($grdd-gutter);

  & > .#{$grdd-namespace}grdd__item {
    display: inline-block;
    padding-left: $grdd-gutter;
    vertical-align: top;
    
    @if $grdd-sizes {
      @include _protoSizes("&.#{$grdd-namespace}grdd__item", "");

      @each $name, $value in $grdd-breakpoints {
        @media (max-width: $value) {
          @include _protoSizes("&.#{$grdd-namespace}grdd__item", $name);
        }
      }
    }
  }
}