InuitCSS Inspired Flex Grid

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Inspired from: `https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.widths.scss`

$delimiter: \/ !default;
$breakpoint-separator: \@ !default;
$grid-margin: 8; // must be a number
$delimeter: \/ !default;
$fractions: 1 2 3 4 5; // Grid fractions

@if (type-of($grid-margin) != number) {
  @error "`#{$grid-margin}` needs to be a number.";
}

$grid-breakpoints: (
  mobile: 0px,
  tablet: 669px,
  desktop: 1100px
);

$grid-direction: (
  gd-r: 'row',
  gd-rr: 'row-reverse',
  gd-c: 'column',
  gd-cr: 'column-reverse'
);

$grid-wrap: (
 gw-nw: 'no-wrap',
 gw-w: 'wrap',
 gw-wr: 'wrap-reverse'
);

$grid-justify-content: (
  jc-c: 'center',
  jc-fs: 'flex-start',
  jc-fe: 'flex-end',
  jc-sb: 'space-between',
  jc-sa: 'space-around',
  jc-se: 'space-evenly',
);

$grid-align-content: (
  ac-fs: 'flex-start',
  ac-fe: 'flex-end',
  ac-c: 'center',
  ac-s: 'stretch',
  ac-sb: 'space-between',
  ac-sa: 'space-around'
);

$grid-align-items: (
  ai-fs: 'flex-start',
  ai-fe: 'flex-end',
  ai-c: 'center',
  ai-s: 'stretch',
  ai-b: 'baseline'
);

$grid-align-self: (
  as-a: 'auto',
  as-fs: 'flex-start',
  as-fe: 'flex-end',
  as-c: 'center',
  as-b: 'baseline',
  as-s: 'stretch'
);

.g {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  // in case a `ul` is used as a grid container
  > li {
    list-style: none;
  }
}

[class^="gi-"] {
  display: flex; // set to flex, to allow for nested grids
  flex-grow: 0;
  flex-shrink: 0;
}

@function flexcalc($percentage, $value: "negative") {
  @if $grid-margin != 0 {
     @if unquote($value) == negative {
       @return calc(#{$percentage} - #{$grid-margin}px);
     } @else {
       @return calc(#{$percentage} + #{$grid-margin}px);
     }
  } @else {
    @return $percentage;
  }
}

@mixin columns($breakpoint-width, $denominator, $columns, $platform) {
  @for $numerator from 1 through $denominator {
    $percentage: percentage($numerator / $denominator);
    
    @if($numerator != $denominator) {
      @if $platform == mobile {
        .gi-#{$numerator}#{$delimiter}#{$denominator} {
          flex-basis: flexcalc($percentage);
        }
            
        .gi-push-#{$numerator}#{$delimiter}#{$denominator} {
          margin-left: flexcalc($percentage);
        }
      
        .gi-pull-#{$numerator}#{$delimiter}#{$denominator} {
          margin-left: flexcalc($percentage, positive);
        }
      } @else {
        .gi-#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-separator}#{$breakpoint-width} {
          flex-basis: flexcalc($percentage);
        }
            
        .gi-push-#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-separator}#{$breakpoint-width} {
          margin-left: flexcalc($percentage);
        }
    
        .gi-pull-#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-separator}#{$breakpoint-width} {
          margin-left: flexcalc($percentage, positive);
        }
      }
    }
  }
}

 @each $breakpoint-width, $break-point-size in $grid-breakpoints {
    @if $breakpoint-width == 'mobile' {
      .gi-full {
        flex-basis: 100%;
      }
      
      @each $denominator in $fractions {
        @include columns($breakpoint-width, $denominator, $fractions, mobile);
      }
      
      @each $direction, $item in $grid-direction {
        .#{$direction} {
          flex-direction: unquote(#{$item});
        }
      }
      
      @each $wrap, $item in $grid-wrap {
        .#{$wrap} {
          flex-wrap: unquote(#{$item});
        }
      }
      
      @each $justify, $item in $grid-justify-content {
        .#{$justify} {
          justify-content: unquote(#{$item});
        }
      }
      
      @each $align-content, $item in $grid-align-content {
        .#{$align-content} {
          align-content: unquote(#{$item});
        }
      }
      
      @each $align-item, $item in $grid-align-items {
        .#{$align-item} {
          align-items: unquote(#{$item});
        }
      }
      
      @each $align-self, $item in $grid-align-self {
        .#{$align-self} {
          align-self: unquote(#{$item});
        }
      }
    } @else {
      @media (min-width: $break-point-size) {
        .gi-full#{$breakpoint-separator}#{$break-point-size} {
          flex-basis: 100%;
        }
        // Loop through the number of columns for each denominator of our fractions.
        @each $denominator in $fractions {
          @include columns($breakpoint-width, $denominator, $fractions, not-mobile);
        }
        
        @each $direction, $item in $grid-direction {
          .#{$direction}#{$breakpoint-separator}#{$breakpoint-width} {
            flex-direction: unquote(#{$item});
          }
        }
        
        @each $wrap, $item in $grid-wrap {
          .#{$wrap}#{$breakpoint-separator}#{$breakpoint-width} {
            flex-wrap: unquote(#{$item});
          }
        }
        
        @each $justify, $item in $grid-justify-content {
          .#{$justify}#{$breakpoint-separator}#{$breakpoint-width} {
            justify-content: unquote(#{$item});
          }
        }
        
        @each $align-content, $item in $grid-align-content {
          .#{$align-content}#{$breakpoint-separator}#{$breakpoint-width} {
            align-content: unquote(#{$item});
          }
        }
        @each $align-item, $item in $grid-align-items {
          .#{$align-item}#{$breakpoint-separator}#{$breakpoint-width} {
            align-items: unquote(#{$item});
          }
        }
        @each $align-self, $item in $grid-align-self {
          .#{$align-self}#{$breakpoint-separator}#{$breakpoint-width} {
            align-self: unquote(#{$item});
          }
        }
      }
    }
  }

SassMeister-output.css

.g {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}
.g > li {
  list-style: none;
}

[class^="gi-"] {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
}

.gi-full {
  flex-basis: 100%;
}

.gi-1\/2 {
  flex-basis: calc(50% - 8px);
}

.gi-push-1\/2 {
  margin-left: calc(50% - 8px);
}

.gi-pull-1\/2 {
  margin-left: calc(50% + 8px);
}

.gi-1\/3 {
  flex-basis: calc(33.33333% - 8px);
}

.gi-push-1\/3 {
  margin-left: calc(33.33333% - 8px);
}

.gi-pull-1\/3 {
  margin-left: calc(33.33333% + 8px);
}

.gi-2\/3 {
  flex-basis: calc(66.66667% - 8px);
}

.gi-push-2\/3 {
  margin-left: calc(66.66667% - 8px);
}

.gi-pull-2\/3 {
  margin-left: calc(66.66667% + 8px);
}

.gi-1\/4 {
  flex-basis: calc(25% - 8px);
}

.gi-push-1\/4 {
  margin-left: calc(25% - 8px);
}

.gi-pull-1\/4 {
  margin-left: calc(25% + 8px);
}

.gi-2\/4 {
  flex-basis: calc(50% - 8px);
}

.gi-push-2\/4 {
  margin-left: calc(50% - 8px);
}

.gi-pull-2\/4 {
  margin-left: calc(50% + 8px);
}

.gi-3\/4 {
  flex-basis: calc(75% - 8px);
}

.gi-push-3\/4 {
  margin-left: calc(75% - 8px);
}

.gi-pull-3\/4 {
  margin-left: calc(75% + 8px);
}

.gi-1\/5 {
  flex-basis: calc(20% - 8px);
}

.gi-push-1\/5 {
  margin-left: calc(20% - 8px);
}

.gi-pull-1\/5 {
  margin-left: calc(20% + 8px);
}

.gi-2\/5 {
  flex-basis: calc(40% - 8px);
}

.gi-push-2\/5 {
  margin-left: calc(40% - 8px);
}

.gi-pull-2\/5 {
  margin-left: calc(40% + 8px);
}

.gi-3\/5 {
  flex-basis: calc(60% - 8px);
}

.gi-push-3\/5 {
  margin-left: calc(60% - 8px);
}

.gi-pull-3\/5 {
  margin-left: calc(60% + 8px);
}

.gi-4\/5 {
  flex-basis: calc(80% - 8px);
}

.gi-push-4\/5 {
  margin-left: calc(80% - 8px);
}

.gi-pull-4\/5 {
  margin-left: calc(80% + 8px);
}

.gd-r {
  flex-direction: row;
}

.gd-rr {
  flex-direction: row-reverse;
}

.gd-c {
  flex-direction: column;
}

.gd-cr {
  flex-direction: column-reverse;
}

.gw-nw {
  flex-wrap: no-wrap;
}

.gw-w {
  flex-wrap: wrap;
}

.gw-wr {
  flex-wrap: wrap-reverse;
}

.jc-c {
  justify-content: center;
}

.jc-fs {
  justify-content: flex-start;
}

.jc-fe {
  justify-content: flex-end;
}

.jc-sb {
  justify-content: space-between;
}

.jc-sa {
  justify-content: space-around;
}

.jc-se {
  justify-content: space-evenly;
}

.ac-fs {
  align-content: flex-start;
}

.ac-fe {
  align-content: flex-end;
}

.ac-c {
  align-content: center;
}

.ac-s {
  align-content: stretch;
}

.ac-sb {
  align-content: space-between;
}

.ac-sa {
  align-content: space-around;
}

.ai-fs {
  align-items: flex-start;
}

.ai-fe {
  align-items: flex-end;
}

.ai-c {
  align-items: center;
}

.ai-s {
  align-items: stretch;
}

.ai-b {
  align-items: baseline;
}

.as-a {
  align-self: auto;
}

.as-fs {
  align-self: flex-start;
}

.as-fe {
  align-self: flex-end;
}

.as-c {
  align-self: center;
}

.as-b {
  align-self: baseline;
}

.as-s {
  align-self: stretch;
}

@media (min-width: 669px) {
  .gi-full\@669px {
    flex-basis: 100%;
  }

  .gi-1\/2\@tablet {
    flex-basis: calc(50% - 8px);
  }

  .gi-push-1\/2\@tablet {
    margin-left: calc(50% - 8px);
  }

  .gi-pull-1\/2\@tablet {
    margin-left: calc(50% + 8px);
  }

  .gi-1\/3\@tablet {
    flex-basis: calc(33.33333% - 8px);
  }

  .gi-push-1\/3\@tablet {
    margin-left: calc(33.33333% - 8px);
  }

  .gi-pull-1\/3\@tablet {
    margin-left: calc(33.33333% + 8px);
  }

  .gi-2\/3\@tablet {
    flex-basis: calc(66.66667% - 8px);
  }

  .gi-push-2\/3\@tablet {
    margin-left: calc(66.66667% - 8px);
  }

  .gi-pull-2\/3\@tablet {
    margin-left: calc(66.66667% + 8px);
  }

  .gi-1\/4\@tablet {
    flex-basis: calc(25% - 8px);
  }

  .gi-push-1\/4\@tablet {
    margin-left: calc(25% - 8px);
  }

  .gi-pull-1\/4\@tablet {
    margin-left: calc(25% + 8px);
  }

  .gi-2\/4\@tablet {
    flex-basis: calc(50% - 8px);
  }

  .gi-push-2\/4\@tablet {
    margin-left: calc(50% - 8px);
  }

  .gi-pull-2\/4\@tablet {
    margin-left: calc(50% + 8px);
  }

  .gi-3\/4\@tablet {
    flex-basis: calc(75% - 8px);
  }

  .gi-push-3\/4\@tablet {
    margin-left: calc(75% - 8px);
  }

  .gi-pull-3\/4\@tablet {
    margin-left: calc(75% + 8px);
  }

  .gi-1\/5\@tablet {
    flex-basis: calc(20% - 8px);
  }

  .gi-push-1\/5\@tablet {
    margin-left: calc(20% - 8px);
  }

  .gi-pull-1\/5\@tablet {
    margin-left: calc(20% + 8px);
  }

  .gi-2\/5\@tablet {
    flex-basis: calc(40% - 8px);
  }

  .gi-push-2\/5\@tablet {
    margin-left: calc(40% - 8px);
  }

  .gi-pull-2\/5\@tablet {
    margin-left: calc(40% + 8px);
  }

  .gi-3\/5\@tablet {
    flex-basis: calc(60% - 8px);
  }

  .gi-push-3\/5\@tablet {
    margin-left: calc(60% - 8px);
  }

  .gi-pull-3\/5\@tablet {
    margin-left: calc(60% + 8px);
  }

  .gi-4\/5\@tablet {
    flex-basis: calc(80% - 8px);
  }

  .gi-push-4\/5\@tablet {
    margin-left: calc(80% - 8px);
  }

  .gi-pull-4\/5\@tablet {
    margin-left: calc(80% + 8px);
  }

  .gd-r\@tablet {
    flex-direction: row;
  }

  .gd-rr\@tablet {
    flex-direction: row-reverse;
  }

  .gd-c\@tablet {
    flex-direction: column;
  }

  .gd-cr\@tablet {
    flex-direction: column-reverse;
  }

  .gw-nw\@tablet {
    flex-wrap: no-wrap;
  }

  .gw-w\@tablet {
    flex-wrap: wrap;
  }

  .gw-wr\@tablet {
    flex-wrap: wrap-reverse;
  }

  .jc-c\@tablet {
    justify-content: center;
  }

  .jc-fs\@tablet {
    justify-content: flex-start;
  }

  .jc-fe\@tablet {
    justify-content: flex-end;
  }

  .jc-sb\@tablet {
    justify-content: space-between;
  }

  .jc-sa\@tablet {
    justify-content: space-around;
  }

  .jc-se\@tablet {
    justify-content: space-evenly;
  }

  .ac-fs\@tablet {
    align-content: flex-start;
  }

  .ac-fe\@tablet {
    align-content: flex-end;
  }

  .ac-c\@tablet {
    align-content: center;
  }

  .ac-s\@tablet {
    align-content: stretch;
  }

  .ac-sb\@tablet {
    align-content: space-between;
  }

  .ac-sa\@tablet {
    align-content: space-around;
  }

  .ai-fs\@tablet {
    align-items: flex-start;
  }

  .ai-fe\@tablet {
    align-items: flex-end;
  }

  .ai-c\@tablet {
    align-items: center;
  }

  .ai-s\@tablet {
    align-items: stretch;
  }

  .ai-b\@tablet {
    align-items: baseline;
  }

  .as-a\@tablet {
    align-self: auto;
  }

  .as-fs\@tablet {
    align-self: flex-start;
  }

  .as-fe\@tablet {
    align-self: flex-end;
  }

  .as-c\@tablet {
    align-self: center;
  }

  .as-b\@tablet {
    align-self: baseline;
  }

  .as-s\@tablet {
    align-self: stretch;
  }
}
@media (min-width: 1100px) {
  .gi-full\@1100px {
    flex-basis: 100%;
  }

  .gi-1\/2\@desktop {
    flex-basis: calc(50% - 8px);
  }

  .gi-push-1\/2\@desktop {
    margin-left: calc(50% - 8px);
  }

  .gi-pull-1\/2\@desktop {
    margin-left: calc(50% + 8px);
  }

  .gi-1\/3\@desktop {
    flex-basis: calc(33.33333% - 8px);
  }

  .gi-push-1\/3\@desktop {
    margin-left: calc(33.33333% - 8px);
  }

  .gi-pull-1\/3\@desktop {
    margin-left: calc(33.33333% + 8px);
  }

  .gi-2\/3\@desktop {
    flex-basis: calc(66.66667% - 8px);
  }

  .gi-push-2\/3\@desktop {
    margin-left: calc(66.66667% - 8px);
  }

  .gi-pull-2\/3\@desktop {
    margin-left: calc(66.66667% + 8px);
  }

  .gi-1\/4\@desktop {
    flex-basis: calc(25% - 8px);
  }

  .gi-push-1\/4\@desktop {
    margin-left: calc(25% - 8px);
  }

  .gi-pull-1\/4\@desktop {
    margin-left: calc(25% + 8px);
  }

  .gi-2\/4\@desktop {
    flex-basis: calc(50% - 8px);
  }

  .gi-push-2\/4\@desktop {
    margin-left: calc(50% - 8px);
  }

  .gi-pull-2\/4\@desktop {
    margin-left: calc(50% + 8px);
  }

  .gi-3\/4\@desktop {
    flex-basis: calc(75% - 8px);
  }

  .gi-push-3\/4\@desktop {
    margin-left: calc(75% - 8px);
  }

  .gi-pull-3\/4\@desktop {
    margin-left: calc(75% + 8px);
  }

  .gi-1\/5\@desktop {
    flex-basis: calc(20% - 8px);
  }

  .gi-push-1\/5\@desktop {
    margin-left: calc(20% - 8px);
  }

  .gi-pull-1\/5\@desktop {
    margin-left: calc(20% + 8px);
  }

  .gi-2\/5\@desktop {
    flex-basis: calc(40% - 8px);
  }

  .gi-push-2\/5\@desktop {
    margin-left: calc(40% - 8px);
  }

  .gi-pull-2\/5\@desktop {
    margin-left: calc(40% + 8px);
  }

  .gi-3\/5\@desktop {
    flex-basis: calc(60% - 8px);
  }

  .gi-push-3\/5\@desktop {
    margin-left: calc(60% - 8px);
  }

  .gi-pull-3\/5\@desktop {
    margin-left: calc(60% + 8px);
  }

  .gi-4\/5\@desktop {
    flex-basis: calc(80% - 8px);
  }

  .gi-push-4\/5\@desktop {
    margin-left: calc(80% - 8px);
  }

  .gi-pull-4\/5\@desktop {
    margin-left: calc(80% + 8px);
  }

  .gd-r\@desktop {
    flex-direction: row;
  }

  .gd-rr\@desktop {
    flex-direction: row-reverse;
  }

  .gd-c\@desktop {
    flex-direction: column;
  }

  .gd-cr\@desktop {
    flex-direction: column-reverse;
  }

  .gw-nw\@desktop {
    flex-wrap: no-wrap;
  }

  .gw-w\@desktop {
    flex-wrap: wrap;
  }

  .gw-wr\@desktop {
    flex-wrap: wrap-reverse;
  }

  .jc-c\@desktop {
    justify-content: center;
  }

  .jc-fs\@desktop {
    justify-content: flex-start;
  }

  .jc-fe\@desktop {
    justify-content: flex-end;
  }

  .jc-sb\@desktop {
    justify-content: space-between;
  }

  .jc-sa\@desktop {
    justify-content: space-around;
  }

  .jc-se\@desktop {
    justify-content: space-evenly;
  }

  .ac-fs\@desktop {
    align-content: flex-start;
  }

  .ac-fe\@desktop {
    align-content: flex-end;
  }

  .ac-c\@desktop {
    align-content: center;
  }

  .ac-s\@desktop {
    align-content: stretch;
  }

  .ac-sb\@desktop {
    align-content: space-between;
  }

  .ac-sa\@desktop {
    align-content: space-around;
  }

  .ai-fs\@desktop {
    align-items: flex-start;
  }

  .ai-fe\@desktop {
    align-items: flex-end;
  }

  .ai-c\@desktop {
    align-items: center;
  }

  .ai-s\@desktop {
    align-items: stretch;
  }

  .ai-b\@desktop {
    align-items: baseline;
  }

  .as-a\@desktop {
    align-self: auto;
  }

  .as-fs\@desktop {
    align-self: flex-start;
  }

  .as-fe\@desktop {
    align-self: flex-end;
  }

  .as-c\@desktop {
    align-self: center;
  }

  .as-b\@desktop {
    align-self: baseline;
  }

  .as-s\@desktop {
    align-self: stretch;
  }
}