simple grid system added

scss/flavor.scss

@@ -1,3 +1,4 @@
 @import 'variables';
 @import '~bourbon/app/assets/stylesheets/bourbon';
 @import 'core';
+@import 'grid-system/grid-system';

scss/grid-system/grid-system.scss

@@ -0,0 +1,124 @@
+@mixin container-breakpoints($breakpoints: $common-breakpoints, $gutter: $gutter-default) {
+  @each $key, $breakpoint in $breakpoints {
+    @include media($breakpoint) {
+      .container {
+        @include box-size(($breakpoint - $gutter) auto);
+      }
+    }
+  }
+}
+
+@mixin columns-sizes($columns: $columns-default, $gutter: $gutter-default, $key: '') {
+  @for $i from 0 through $columns {
+    @if ($i==0) {
+      .col-#{$key}-push-0 {
+        left: auto;
+      }
+
+      .col-#{$key}-pull-0 {
+        right: auto;
+      }
+    }
+    @else {
+      $col-percentage: percentage($i / $columns);
+
+      .col-#{$key}-#{$i} {
+        width: $col-percentage;
+      }
+
+      .col-#{$key}-push-#{$i} {
+        left: $col-percentage;
+      }
+
+      .col-#{$key}-pull-#{$i} {
+        right: $col-percentage;
+      }
+
+      .col-#{$key}-offset-#{$i} {
+        margin-left: $col-percentage;
+      }
+    }
+  }
+}
+
+@mixin columns-breakpoints($breakpoints: $columns-breakpoints, $columns: $columns-default, $gutter: $gutter-default) {
+  @each $key, $breakpoint in $breakpoints {
+    @if ($breakpoint==$first-breakpoint) {
+      @include columns-sizes($columns, $gutter, $key);
+    }
+    @else {
+      @include media($breakpoint) {
+        @include columns-sizes($columns, $gutter, $key);
+      }
+    }
+  }
+}
+
+@mixin columns($columns: $columns-default, $gutter: $gutter-default) {
+  // Columns
+  //
+  // Common styles for small and large grid columns
+  $columns-selectors: ();
+
+  @for $i from 1 through $columns {
+    $columns-selectors: array-concat($columns-selectors, '[class*=\'col-\'][class*=\'-#{$i}\']');
+  }
+
+  #{array-join($columns-selectors)} {
+    @include position(relative);
+    @include display(inline-block);
+    @include padding(null $column-padding-right null $column-padding-right);
+    @include reset-inline-block;
+
+    min-height: 1px; // Prevent columns from collapsing when empty
+  }
+
+  @include columns-breakpoints($columns-breakpoints, $columns, $gutter)
+}
+
+@mixin grid-system($columns: $columns-default, $gutter: $gutter-default) {
+  // Grid system
+  // --------------------------------------------------
+  $row-margin-left: ceil(($gutter / -2));
+  $row-margin-right: floor(($gutter / -2));
+
+  $column-padding-left: ceil(($gutter / 2));
+  $column-padding-right: floor(($gutter / 2));
+
+  %container-base {
+    // container-base
+    @include display(block);
+    @include box-size(100% auto);
+    @include padding(0 $column-padding-right 0 $column-padding-left);
+    @include margin(0 auto);
+  }
+
+  [class*='container'] {
+    // Container widths
+    //
+    // Set the container width, and override it for fixed navbars in media queries.
+    @extend %container-base;
+
+    + [class*='container'] {
+      @include margin($gutter null null null);
+    }
+
+    &:not([class*='-fluid']) {
+      @include container-breakpoints($common-breakpoints, $gutter);
+    }
+  }
+
+  .row {
+    // Row
+    //
+    // Rows contain and clear the floats of your columns.
+    @include display(block);
+    @include margin(0 $row-margin-right 0 $row-margin-left);
+
+    + .row {
+      @include margin($gutter null null null);
+    }
+  }
+
+  @include columns($columns, $gutter);
+}

scss/mixins/_box.scss

@@ -260,3 +260,9 @@ $backface-visibility-modes: array-concat((visible, hidden), $css-default-modes);
     @warn '`backface-visibility: #{$bv}` is not a valid backface-visibility value';
   }
 }
+
+@mixin reset-inline-block {
+  letter-spacing: -.3em;
+  line-height: 0;
+  text-rendering: optimizespeed;
+}

scss/mixins/_media.scss

@@ -1,25 +1,5 @@
-$breakpoints: (phone: 400px, phone-wide: 480px, phablet: 560px, tablet-small: 640px, tablet: 768px, tablet-wide: 1024px, desktop: 1248px, desktop-wide: 1440px);
-
 @mixin media($width, $type: min) {
-  @if map_has_key($breakpoints, $width) {
-    $width: map_get($breakpoints, $width);
-
-    @if $type == max {
-      $width: $width - 1px;
-    }
-
-    @media only screen and (#{$type}-width: $width) {
-      @content;
-    }
+  @media screen and (#{$type}-width: $width) {
+    @content;
   }
 }
-
-// example
-// .site-header {
-//     padding: 2rem;
-//     font-size: 1.8rem;
-//     @include mq('tablet-wide') {
-//         padding-top: 4rem;
-//         font-size: 2.4rem;
-//     }
-// }

scss/types/_array.scss

@@ -29,3 +29,15 @@
 
   @return $concat-list;
 }
+
+@function array-join($list, $sep: ', ') {
+  $join-string: '';
+
+  @each $item in $list {
+    $join-string: $join-string + $sep + $item;
+  }
+
+  $join-string: str-slice($join-string, str-length($sep) + 1);
+
+  @return $join-string
+}

scss/variables.scss

@@ -1 +1,24 @@
 $output-bourbon-deprecation-warnings: false !default;
+
+$columns-default: 12 !default; // grid-system columns default number
+
+$gutter-default: 1.5rem !default; // grid-system grid gutter default number
+
+$common-breakpoints: (
+  sm: 768px, // small devices
+  md: 992px, // medium devices
+  lg: 1200px, // large devices
+  xl: 1600px, // extra large devices
+  fhd: 1920px, // full HD devices
+  qhd: 2560px, // quad HD (2k) devices
+  uhd: 3840px // ultra HD (4k) devices
+) !default; // common-breakpoints used as default for container breakpoints
+
+$first-column-breakpoint: 320px !default; //first column breakpoint used as default without media queries
+
+$columns-breakpoints: array-concat((
+  sp: $first-column-breakpoint, // common smartphones
+  ip: 375px, // iphone (since iphone5)
+  ipp: 414px, // iphone plus (since iphone5)
+  xs: 576px // extra small devices
+), $common-breakpoints) !default; // columns-breakpoints used for media queries and column classes sizes & positions