Coding style decided

public/styles/tools/_responsive.scss

@@ -0,0 +1,30 @@
+/*
+ *  Responsive Tools
+ *    Responsive tools
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/01/24
+ */
+
+@mixin t-media-query($media-query) {
+  $breakpoint-found: false;
+
+  @each $breakpoint in $s-breakpoints {
+    $name: nth($breakpoint, 1);
+    $declaration: nth($breakpoint, 2);
+
+    @if $media-query == $name and $declaration {
+      $breakpoint-found: true;
+
+      @media only screen and #{$declaration} {
+        @content;
+      }
+    }
+  }
+
+  @if $breakpoint-found == false {
+    @warn 'Breakpoint "#{$media-query}" does not exist';
+  }
+}

public/styles/tools/_transform.scss

@@ -0,0 +1,34 @@
+/*
+ *  Transform Mixins
+ *    Provides mixins for transforms
+ *
+ *  Dependencies:
+ *    styles/tools/prefix.scss - Used to prefix browser support
+ *
+ *  Version:
+ *    1.0.1 - 2018/01/24
+ */
+
+@mixin t-transform($transforms) {
+  @include t-prefix-property(transform, $transforms, moz o ms webkit spec);
+}
+
+@mixin t-translate($x, $y) {
+  @include t-transform(translate($x, $y));
+}
+
+@mixin t-translate-x($x) {
+  @include t-transform(translateX($x));
+}
+
+@mixin t-translate-y($y) {
+  @include t-transform(translateY($y));
+}
+
+@mixin t-scale($amt) {
+  @include t-transform(scale($amt));
+}
+
+@mixin t-rotate($amt) {
+  @include t-transform(rotate($amt));
+}

public/styles/tools/flex.scss

@@ -0,0 +1,159 @@
+/*
+ *  Flex
+ *    Used to simplify the flexbox and it's styles
+ *
+ *  Many of these mixins were taken from mastastealth/sass-flex-mixin:
+ *  https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+
+//Flex/Flexbox
+@mixin t-flexbox {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+%t-flexbox {
+  @include t-flexbox;
+}
+
+//Inline Flex/Inline Flexbox
+@mixin t-inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%t-inline-flex {
+  @include t-inline-flex;
+}
+
+//Align-items
+@mixin t-align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+
+//Align-self
+@mixin t-align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+//Align content
+@mixin t-align-content($value: stretch) {
+	// No Webkit Box Fallback.
+	-webkit-align-content: $value;
+	-moz-align-content: $value;
+	@if $value == flex-start {
+		-ms-flex-line-pack: start;
+	} @else if $value == flex-end {
+		-ms-flex-line-pack: end;
+	} @else {
+		-ms-flex-line-pack: $value;
+	}
+	align-content: $value;
+}
+
+//Justify Content
+@mixin t-justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+//Wrapping
+@mixin t-flex-wrap($value: nowrap) {
+  // No Webkit Box fallback.
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+//Flowing
+@mixin t-flex-flow($values: (row nowrap)) {
+  // No Webkit Box fallback.
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+//t-flex-direction
+@mixin t-flex-direction($value: row) {
+	@if $value == row-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: horizontal;
+	} @else if $value == column {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: vertical;
+	} @else if $value == column-reverse {
+		-webkit-box-direction: reverse;
+		-webkit-box-orient: vertical;
+	} @else {
+		-webkit-box-direction: normal;
+		-webkit-box-orient: horizontal;
+	}
+	-webkit-flex-direction: $value;
+	-moz-flex-direction: $value;
+	-ms-flex-direction: $value;
+	flex-direction: $value;
+}
+
+//Flex Grow
+@mixin t-flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}

public/styles/tools/list.scss

@@ -0,0 +1,17 @@
+/*
+ *  List
+ *    Set of tools for lists
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/05
+ */
+%t-list-blank {
+  margin: 0;
+  padding: 0;
+}
+
+%t-list-litem-blank {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}

public/styles/tools/prefix.scss

@@ -0,0 +1,42 @@
+/*
+ *  Prefix Mixins
+ *    Mixins used to add browser prefix to values and/or properties
+ *
+ *  Version:
+ *    1.0.1 - 2018/02/01
+ */
+@mixin t-prefix-property($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    } @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    } @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    } @else if $prefix == o {
+      -o-#{$property}: $value;
+    } @else if $prefix == spec {
+      #{$property}: $value;
+    } @else  {
+      @warn 'Unrecognized prefix: #{$prefix}';
+    }
+  }
+}
+
+@mixin t-prefix-value($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      #{$property}: -webkit-#{$value};
+    } @else if $prefix == moz {
+      #{$property}: -moz-#{$value};
+    } @else if $prefix == ms {
+      #{$property}: -ms-#{$value};
+    } @else if $prefix == o {
+      #{$property}: -o-#{$value};
+    } @else if $prefix == spec {
+      #{$property}: #{$value};
+    } @else  {
+      @warn 'Unrecognized prefix: #{$prefix}';
+    }
+  }
+}