mcgriddle 0.3.1

data/_sass/mcgriddle/_mcgriddle.scss

@@ -0,0 +1,31 @@
+/*!
+ * McGriddle
+ * @description
+ * @author Jonathan Suh @jonsuh
+ * @site https://
+ * @link https://
+ */
+
+// Settings
+// ==================================================
+@import "settings/grid";
+
+// Functions
+// ==================================================
+@import "functions/helpers";
+
+@import "functions/gutter-width";
+@import "functions/column-width";
+@import "functions/shift-width";
+
+// Mixins
+// ==================================================
+@import "mixins/grid-collapse";
+@import "mixins/grid-direction";
+@import "mixins/grid-flexbox";
+@import "mixins/grid-reset";
+@import "mixins/container-display";
+
+@import "mixins/container";
+@import "mixins/columns";
+@import "mixins/shift";

data/_sass/mcgriddle/functions/_column-width.scss

@@ -0,0 +1,78 @@
+// ==================================================
+// Column Width
+// ==================================================
+@function column-width($_columns: 1, $_percent: true) {
+  $_grid-columns        : $grid-columns;
+
+  $_column-width        : $grid-width;
+  $_column-width-percent: 100%;
+
+  // major or minor
+  @if $_columns == major or $_columns == minor {
+    @if $_columns == major {
+      $_columns: 1 - $grid-minor;
+    }
+    @else {
+      $_columns: $grid-minor;
+    }
+
+    $_columns: $grid-columns * $_columns;
+  }
+  // '#/#'
+  @else if type-of($_columns) == string {
+    $_columns     : str-replace($_columns, " ");
+    $_index       : str-index($_columns, "/");
+    $_index-offset: 1;
+
+    @if $_index == null {
+      $_index       : str-index($_columns, "of");
+      $_index-offset: 2;
+    }
+
+    @if $_index {
+      $_grid-columns: to-number(str-slice($_columns, $_index + $_index-offset, str-length($_columns)));
+      $_columns     : to-number(str-slice($_columns, 1, $_index - 1));
+    }
+  }
+  // # of # or # #
+  @else if type-of($_columns) == list {
+    @if length($_columns) == 3 {
+      $_grid-columns: nth($_columns, 3);
+    }
+    @else {
+      $_grid-columns: nth($_columns, 2);
+    }
+
+    $_columns: nth($_columns, 1);
+  }
+
+  // calculate column width
+  @if $grid-collapse == true {
+    $_column-width: ($grid-width / $_grid-columns) * $_columns;
+
+    @if $_percent == true {
+      $_column-width-percent: $_column-width * 100% / $grid-width;
+    }
+  }
+  @else {
+    // $_column-count        : ceil($_grid-columns / $_columns);
+    $_column-count        : $_grid-columns / $_columns;
+
+    $_gutter-total-width  : $grid-gutter * ($_column-count - 1);
+    $_grid-remainder-width: $grid-width - $_gutter-total-width;
+
+    $_column-width        : $_grid-remainder-width / $_column-count;
+
+    @if $_percent == true {
+      $_column-width-percent: $_column-width * 100% / $grid-width;
+    }
+  }
+
+  // return column width in absolute or percent value
+  @if $_percent == true {
+    @return $_column-width-percent;
+  }
+  @else {
+    @return $_column-width;
+  }
+}

data/_sass/mcgriddle/functions/_gutter-width.scss

@@ -0,0 +1,15 @@
+// ==================================================
+// Gutter Width
+// ==================================================
+@function gutter-width($_percent: true) {
+  $_gutter-width-fraction: $grid-gutter / $grid-width;
+
+  @if $_percent == true {
+    $_gutter-width-percent : $_gutter-width-fraction * 100%;
+
+    @return $_gutter-width-percent;
+  }
+  @else {
+    @return $grid-gutter;
+  }
+}

data/_sass/mcgriddle/functions/_helpers.scss

@@ -0,0 +1,60 @@
+//
+// Replace `$search` with `$replace` in `$string`
+// @author Hugo Giraudel
+//
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+//
+// @return {String} - Updated string
+//
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+//
+// String to number converter
+// @author Hugo Giraudel
+// @access private
+//
+// @param {String | Number} $value - Value to be parsed
+//
+// @return {Number}
+//
+@function to-number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    $_: log('Value for `to-number` should be a number or a string.');
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if not (index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+    }
+
+    @if $character == '.' {
+      $digits: 1;
+    } @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}

data/_sass/mcgriddle/functions/_shift-width.scss

@@ -0,0 +1,8 @@
+// ==================================================
+// Shift Width
+// ==================================================
+@function shift-width($_columns: 1, $_percent: true) {
+  $_shift: column-width($_columns, $_percent) + gutter-width($_percent);
+
+  @return $_shift;
+}

data/_sass/mcgriddle/mixins/_columns.scss

@@ -0,0 +1,60 @@
+// ==================================================
+// Columns
+// ==================================================
+@mixin columns($_columns: 1, $_position: default, $_max-width: false) {
+  @if $_max-width == max or $_max-width == true {
+    width: 100%;
+    $_column-width: column-width($_columns, false);
+
+    max-width: $_column-width;
+  }
+  @else { // $_max-width == default
+    width: column-width($_columns);
+  }
+
+  @if $_position == center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  @else {
+    $_float: left;
+    $_margin: right;
+
+    @if ($grid-flexbox == true and $grid-flexbox-justify != space-between) or $grid-flexbox == false {
+      @if $grid-flexbox == true {
+        @if $grid-flexbox-justify == flex-end {
+          $_margin: left;
+
+          @if $grid-rtl == true {
+            $_margin: right;
+          }
+        }
+        // $grid-flexbox-justify == flex-start, flex-end, center
+        @else {
+          @if $grid-rtl == true {
+            $_margin: left;
+          }
+        }
+      }
+      // $grid-flexbox == false
+      @else {
+        @if $grid-rtl == true {
+          $_float: right;
+          $_margin: left;
+        }
+      }
+
+      @if $grid-flexbox == true {
+        @if $grid-flexbox-justify != space-between {
+          margin-#{$_margin}: gutter-width();
+        }
+      }
+      @else { // $grid-flexbox == false
+        @if $_position != last and $grid-collapse == false {
+          margin-#{$_margin}: gutter-width();
+        }
+        float: $_float;
+      }
+    }
+  }
+}

data/_sass/mcgriddle/mixins/_container-display.scss

@@ -0,0 +1,25 @@
+// ==================================================
+// Container Display
+// ==================================================
+@mixin container-display($_flexbox: default) {
+  @if $_flexbox == default {
+    $_flexbox: $grid-flexbox;
+  }
+
+  @if $_flexbox == true {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: $grid-flexbox-justify;
+    &:after {
+      display: none;
+    }
+  }
+  @else {
+    &:after {
+      content: " ";
+      display: block;
+      clear: both;
+    }
+  }
+}

data/_sass/mcgriddle/mixins/_container.scss

@@ -0,0 +1,19 @@
+// ==================================================
+// Container
+// ==================================================
+@mixin container($_columns: true) {
+  @include container-display;
+
+  @if type-of($_columns) == number and $_columns > 0 {
+    max-width: column-width($_columns, false);
+  }
+  @else if $_columns == true or $_columns != false {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: $grid-width;
+  }
+
+  @if $grid-rtl == true {
+    direction: rtl;
+  }
+}

data/_sass/mcgriddle/mixins/_grid-collapse.scss

@@ -0,0 +1,13 @@
+// ==================================================
+// Grid Collapse
+// ==================================================
+@mixin grid-collapse($_collapse: default) {
+  @if $_collapse == default or $_collapse != true {
+    $_collapse: false;
+  }
+  @else if $_collapse == true {
+    $_collapse: true;
+  }
+
+  $grid-collapse: $_collapse !global;
+}

data/_sass/mcgriddle/mixins/_grid-direction.scss

@@ -0,0 +1,13 @@
+// ==================================================
+// Grid Direction
+// ==================================================
+@mixin grid-direction($_rtl: default) {
+  @if $_rtl == default or $_rtl != rtl {
+    $_rtl: false;
+  }
+  @else if $_rtl == rtl {
+    $_rtl: true;
+  }
+
+  $grid-rtl: $_rtl !global;
+}

data/_sass/mcgriddle/mixins/_grid-flexbox.scss

@@ -0,0 +1,13 @@
+// ==================================================
+// Grid Flexbox
+// ==================================================
+@mixin grid-flexbox($_flexbox: default) {
+  @if $_flexbox == default or $_flexbox != true {
+    $_flexbox: false;
+  }
+  @else if $_flexbox == true {
+    $_flexbox: true;
+  }
+
+  $grid-flexbox: $_flexbox !global;
+}

data/_sass/mcgriddle/mixins/_grid-reset.scss

@@ -0,0 +1,8 @@
+// ==================================================
+// Grid Reset
+// ==================================================
+@mixin grid-reset {
+  $grid-collapse: false !global;
+  $grid-flexbox : false !global;
+  $grid-rtl     : false !global;
+}

data/_sass/mcgriddle/mixins/_shift.scss

@@ -0,0 +1,14 @@
+// ==================================================
+// Shift
+// ==================================================
+@mixin shift($_columns: 1, $_percent: true) {
+  $_margin: left;
+
+  @if $grid-rtl == true {
+    $_margin: right;
+  }
+
+  $_shift: shift-width($_columns, $_percent);
+
+  margin-#{$_margin}: $_shift;
+}

data/_sass/mcgriddle/settings/_grid.scss

@@ -0,0 +1,11 @@
+// ==================================================
+// Settings
+// ==================================================
+$grid-width          : 64em !default;
+$grid-gutter         : 1.875em !default;
+$grid-columns        : 12 !default;
+$grid-minor          : 1/3 !default;
+$grid-collapse       : false !default;
+$grid-flexbox        : false !default;
+$grid-flexbox-justify: space-between !default;
+$grid-rtl            : false !default;

data/bower.json

@@ -0,0 +1,33 @@
+{
+  "name": "mcgriddle",
+  "version": "0.3.1",
+  "description": "",
+  "license": "MIT",
+  "author": {
+    "name": "Jonathan Suh",
+    "email": "hello@jonsuh.com",
+    "url": "https://jonsuh.com/mcgriddle"
+  },
+  "main": "_sass/mcgriddle/_mcgriddle.scss",
+  "keywords": [
+    "css",
+    "grid",
+    "flexbox",
+    "sass",
+    "scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonsuh/mcgriddle.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jonsuh/mcgriddle/issues"
+  },
+  "ignore": [
+    "Gemfile",
+    "lib/",
+    "mcgriddle.gemspec",
+    "package.json",
+    "yarn.lock"
+  ]
+}

data/bs-config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "server": {
+    baseDir: "./"
+  },
+  "files": [
+    "css/**/*.css"
+  ],
+  "browser": "default",
+  "injectChanges": true,
+  "online": false,
+  "open": false,
+  "port": 3000,
+  "proxy": false,
+  "notify": false,
+  "watchTask": true
+};