flake-scss 0.1.10 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 630b9907efb82ae55df133a0a9ac2cfebbf654d1
-  data.tar.gz: b8e66da1084703870a73f0ebc14ca7ee6e4f7693
+  metadata.gz: f88dcfd5b28accc2e7efe4596e3752d135b1e78b
+  data.tar.gz: a58c0eb19396fc13a5fc9e8003196d4114c172c3
 SHA512:
-  metadata.gz: 60fd80d03472f6ec19094445a66d6c7a328d5b68ae2edeca5314146ba07810af6a41227d20d11a8817281f2d3090fe5b8ea60c25b57f38bdbb947921719bf145
-  data.tar.gz: 0c978441389095ddb5044cd3458617f92fc2500ad0f6c97ce1ff4ecdeab65d933dd7ac96e7fb505addaa60178d3eacae4361069c9dc46a951bb42bd53c6fa8ec
+  metadata.gz: 9b0f84656d7f9dd61c35950231e36f7de0bf0c8c7801deb5a4ea2648345a6f94dfb50ce97f824c61bd68fcc460fc98dec250080b7057670702604ae04895bbb2
+  data.tar.gz: 912f415c652c5c0bf1079029f7bc977242366cadf92b6f11d9c5d0b8edf02930e392c9a5a7802e78aae49b7f78635e534f1f8eac427d29683e089eadcbd4d4c0

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.10"
+    VERSION = "0.1.11"
   end
 end

data/vendor/assets/stylesheets/_flake.scss

@@ -5,30 +5,31 @@
         "flake/breakpoints",
         "flake/mixins";
 
-:root {
-  @import "background/colors";
+@import "background/colors",
+        "background/sizes";
 
-  @import "border/general",
-          "border/colors",
-          "border/radius";
+@import "border/general",
+        "border/colors",
+        "border/radius";
 
-  @import "text/colors",
-          "text/fonts",
-          "text/style",
-          "text/align",
-          "text/sizes";
+@import "text/colors",
+        "text/fonts",
+        "text/style",
+        "text/align",
+        "text/sizes",
+        "text/titles";
 
-  @import "sizing/spacing",
-          "sizing/grid";
+@import "sizing/spacing",
+        "sizing/grid";
 
-  @import "layout/flex";
+@import "layout/flex";
 
-  @import "shadows/shadows";
+@import "shadows/shadows";
 
-  @import "general/display",
-          "general/position",
-          "general/general",
-          "general/z-index";
+@import "general/display",
+        "general/position",
+        "general/general",
+        "general/z-index",
+        "general/overflow";
 
-  @import "animations/transitions";
-}
+@import "animations/transitions";

data/vendor/assets/stylesheets/_variables.scss

@@ -3,12 +3,15 @@ $apply-classes: () !global;
 $components: (
   transition,
   background-colors,
+  background-sizes,
+  background-positions,
   border-colors,
   borders,
   border-radius,
   display,
   position,
   z-index,
+  overflow,
   flex,
   shadows,
   grid,
@@ -19,10 +22,13 @@ $components: (
   font-sizes,
   font-style,
   font-weights,
-  text-decoration
+  text-decoration,
+  title-sizes
 ) !default;
 
-$classnames: (
+$classnames: () !default;
+
+$classnames-default: (
   position: "",
   display: "",
   width: "w",
@@ -30,6 +36,7 @@ $classnames: (
   margin: "m",
   border: "b",
   border-radius: "radius",
+  overflow: "overflow",
   flex: "",
   background: "bg",
   text: "text",
@@ -38,3 +45,9 @@ $classnames: (
   shadow: "shadow",
   z-index: "z"
 ) !default;
+
+@each $type, $classname in $classnames-default {
+  @if not(map-has-key($classnames, $type)) {
+    $classnames: map-merge($classnames, ($type: $classname));
+  }
+}

data/vendor/assets/stylesheets/animations/_transitions.scss

@@ -6,30 +6,34 @@ $transitions: (
   slow: ".5s"
 ) !default;
 
-@each $transition, $value in $transitions {
-  $sep: "";
-  @if $transition != "" {
-    $sep: "-"
-  }
+@if index($components, transition) {
+  :root {
+    @each $transition, $value in $transitions {
+      $sep: "";
+      @if $transition != "" {
+        $sep: "-"
+      }
 
-  .#{map-get($classnames, transition)}#{$sep}#{$transition} {
-    transition: #{$value};
-  }
+      .#{map-get($classnames, transition)}#{$sep}#{$transition} {
+        transition: #{$value};
+      }
 
-  $addme: add-to-apply-map(#{map-get($classnames, transition)}#{$sep}#{$transition}, "transition", "#{$value}");
-}
+      $addme: add-to-apply-map(#{map-get($classnames, transition)}#{$sep}#{$transition}, "transition", "#{$value}");
+    }
 
-@if $transitions-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @each $transition, $value in $transitions {
-        $sep: "";
-        @if $transition != "" {
-          $sep: "-";
-        }
+    @if $transitions-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $transition, $value in $transitions {
+            $sep: "";
+            @if $transition != "" {
+              $sep: "-";
+            }
 
-        .#{$breakpoint}\:#{map-get($classnames, transition)}#{$sep}#{$transition} {
-          transition: #{$value};
+            .#{$breakpoint}\:#{map-get($classnames, transition)}#{$sep}#{$transition} {
+              transition: #{$value};
+            }
+          }
         }
       }
     }

data/vendor/assets/stylesheets/background/_position.scss

@@ -0,0 +1,15 @@
+$background-positions: (
+  center
+) !default;
+
+@if index($components, background-positions) {
+  :root {
+    @each $value in $background-positions {
+      .#{map-get($classnames, background)}-#{$value} {
+        background-position: $value;
+      }
+
+      $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-position", "#{$value}");
+    }
+  }
+}

data/vendor/assets/stylesheets/background/_sizes.scss

@@ -0,0 +1,16 @@
+$background-sizes: (
+  cover
+  contain
+) !default;
+
+@if index($components, background-sizes) {
+  :root {
+    @each $value in $background-sizes {
+      .#{map-get($classnames, background)}-#{$value} {
+        background-size: $value;
+      }
+
+      $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-size", "#{$value}");
+    }
+  }
+}

data/vendor/assets/stylesheets/border/_colors.scss

@@ -2,61 +2,63 @@ $border-color-hover: true !default;
 $border-color-responsive: false !default;
 
 @if index($components, border-colors) {
-  @if $theme-colors != () {
-    @each $color, $value in $theme-colors {
-      $hover: "";
+  :root {
+    @if $theme-colors != () {
+      @each $color, $value in $theme-colors {
+        $hover: "";
 
-      @if $border-color-hover {
-        $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}:hover";
-      }
+        @if $border-color-hover {
+          $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}:hover";
+        }
 
-      .#{map-get($classnames, border)}-#{"" + $color}
-      #{$hover} {
-        border-color: #{$value};
-      }
+        .#{map-get($classnames, border)}-#{"" + $color}
+        #{$hover} {
+          border-color: #{$value};
+        }
 
-      $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
+        $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
+      }
     }
-  }
 
-  @if $full-colors {
-    @each $color in $colors {
-      $medium: map-get($colors-list, $color);
+    @if $full-colors {
+      @each $color in $colors {
+        $medium: map-get($colors-list, $color);
 
-      @each $shade, $value in $medium {
-        $hover: "";
+        @each $shade, $value in $medium {
+          $hover: "";
 
-        @if $border-color-hover {
-          $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}:hover";
-        }
+          @if $border-color-hover {
+            $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}:hover";
+          }
 
-        .#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}
-        #{$hover} {
-          border-color: $value;
-        }
+          .#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}
+          #{$hover} {
+            border-color: $value;
+          }
 
-        $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+          $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+        }
       }
     }
-  }
 
 
-  @if $border-color-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @if $theme-colors != () {
-          @each $color, $value in $theme-colors {
-            .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
-              border-color: #{$value};
+    @if $border-color-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @if $theme-colors != () {
+            @each $color, $value in $theme-colors {
+              .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
+                border-color: #{$value};
+              }
             }
           }
-        }
 
-        @if $full-colors {
-          @each $color in $colors {
-            @each $shade, $value in $medium {
-              .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade} {
-                border-color: $value;
+          @if $full-colors {
+            @each $color in $colors {
+              @each $shade, $value in $medium {
+                .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade} {
+                  border-color: $value;
+                }
               }
             }
           }

data/vendor/assets/stylesheets/border/_general.scss

@@ -45,18 +45,20 @@ $border-sizes: (
 }
 
 @if index($components, borders) {
-  @each $border, $value in $borders {
-    @each $size in $border-sizes {
-      @include makeBorder($border, $value, $size);
+  :root {
+    @each $border, $value in $borders {
+      @each $size in $border-sizes {
+        @include makeBorder($border, $value, $size);
+      }
     }
-  }
 
-  @if $border-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $border, $value in $borders {
-          @each $size in $border-sizes {
-            @include makeBorder($border, $value, $size, $breakpoint);
+    @if $border-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $border, $value in $borders {
+            @each $size in $border-sizes {
+              @include makeBorder($border, $value, $size, $breakpoint);
+            }
           }
         }
       }

data/vendor/assets/stylesheets/border/_radius.scss

@@ -13,20 +13,22 @@ $radius: (
 ) !default;
 
 @if index($components, border-radius) {
-  @each $radi, $value in $radius {
-    .#{map-get($classnames, border-radius)}-#{$radi} {
-      border-radius: $value;
-    }
+  :root {
+    @each $radi, $value in $radius {
+      .#{map-get($classnames, border-radius)}-#{$radi} {
+        border-radius: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, border-radius)}-#{$radi}, "border-radius", "#{$value}");
-  }
+      $addme: add-to-apply-map(#{map-get($classnames, border-radius)}-#{$radi}, "border-radius", "#{$value}");
+    }
 
-  @if $radius-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $radi, $value in $radius {
-          .#{$breakpoint}\:#{map-get($classnames, border-radius)}-#{$radi} {
-            border-radius: $value;
+    @if $radius-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $radi, $value in $radius {
+            .#{$breakpoint}\:#{map-get($classnames, border-radius)}-#{$radi} {
+              border-radius: $value;
+            }
           }
         }
       }

data/vendor/assets/stylesheets/general/_display.scss

@@ -9,35 +9,37 @@ $display: (
 ) !default;
 
 @if index($components, display) {
-  @each $property in $display {
-    .#{$property} {
-      display: $property;
-    }
+  :root {
+    @each $property in $display {
+      .#{$property} {
+        display: $property;
+      }
 
-    $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
-  }
+      $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
+    }
 
-  .hidden {
-    display: none;
-  }
+    .hidden {
+      display: none;
+    }
 
-  @if $display-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $property in $display {
-          .#{$breakpoint}\:#{$property} {
-            display: $property;
+    @if $display-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $property in $display {
+            .#{$breakpoint}\:#{$property} {
+              display: $property;
+            }
           }
         }
       }
     }
-  }
 
-  @if $display-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        .#{$breakpoint}\:hidden {
-          display: none;
+    @if $display-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          .#{$breakpoint}\:hidden {
+            display: none;
+          }
         }
       }
     }

data/vendor/assets/stylesheets/general/_general.scss

@@ -1,21 +1,3 @@
 * {
   box-sizing: border-box;
 }
-
-html,
-body {
-  @include apply(("m-0", "p-0", "bg-general-white", "text-size-normal"));
-  line-height: 1.5em;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-h2 {
-  font-size: 1.5rem;
-}

data/vendor/assets/stylesheets/general/_overflow.scss

@@ -0,0 +1,34 @@
+$overflow-responsive: true !default;
+
+$overflow: (
+  visible,
+  hidden,
+  scroll,
+  auto,
+  initial,
+  inherit
+) !default;
+
+@if index($components, overflow) {
+  :root {
+    @each $property in $overflow {
+      .#{map-get($classnames, overflow)}-#{$property} {
+        overflow: $property;
+      }
+
+      $addme: add-to-apply-map(#{map-get($classnames, overflow)}-#{$property}, "overflow", "#{$property}");
+    }
+
+    @if $overflow-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $property in $overflow {
+            .#{$breakpoint}\:overflow-#{$property} {
+              overflow: $property;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/general/_position.scss

@@ -9,51 +9,53 @@ $positions: (
 ) !default;
 
 @if index($components, position) {
-  @each $position in $positions {
-    .#{$position} {
-      position: $position;
-    }
+  :root {
+    @each $position in $positions {
+      .#{$position} {
+        position: $position;
+      }
 
-    $addme: add-to-apply-map(#{$position}, "position", "#{$position}");
-  }
+      $addme: add-to-apply-map(#{$position}, "position", "#{$position}");
+    }
 
-  @if $positions-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $position in $positions {
-          .#{$breakpoint}\:#{$position} {
-            position: $position;
+    @if $positions-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $position in $positions {
+            .#{$breakpoint}\:#{$position} {
+              position: $position;
+            }
           }
         }
       }
     }
   }
-}
 
-$pins-responsive: true !default;
+  $pins-responsive: true !default;
 
-$pins: (
-  t: "top",
-  r: "right",
-  b: "bottom",
-  l: "left"
-) !default;
+  $pins: (
+    t: "top",
+    r: "right",
+    b: "bottom",
+    l: "left"
+  ) !default;
 
-@if index($components, position) {
-  @each $pin, $value in $pins {
-    .pin-#{$pin} {
-      #{$value}: 0;
-    }
+  @if index($components, position) {
+    @each $pin, $value in $pins {
+      .pin-#{$pin} {
+        #{$value}: 0;
+      }
 
-    $addme: add-to-apply-map(pin-#{$pin}, "#{$value}", "0");
-  }
+      $addme: add-to-apply-map(pin-#{$pin}, "#{$value}", "0");
+    }
 
-  @if $pins-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $pin, $value in $pins {
-          .#{$breakpoint}\:pin-#{$pin} {
-            #{$value}: 0;
+    @if $pins-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $pin, $value in $pins {
+            .#{$breakpoint}\:pin-#{$pin} {
+              #{$value}: 0;
+            }
           }
         }
       }

data/vendor/assets/stylesheets/general/_z-index.scss

@@ -9,11 +9,13 @@ $z-index: (
 ) !default;
 
 @if index($components, z-index) {
-  @each $value in $z-index {
-    .#{map-get($classnames, z-index)}-#{$value} {
-      z-index: $value;
-    }
+  :root {
+    @each $value in $z-index {
+      .#{map-get($classnames, z-index)}-#{$value} {
+        z-index: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, z-index)}-#{$value}, "z-index", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, z-index)}-#{$value}, "z-index", "#{$value}");
+    }
   }
 }

data/vendor/assets/stylesheets/layout/_flex.scss

@@ -56,43 +56,45 @@ $flex-list: (
 );
 
 @if index($components, flex) {
-  @each $property in $flex {
-    $medium: map-get($flex-list, $property);
-    $classstart: "";
+  :root {
+    @each $property in $flex {
+      $medium: map-get($flex-list, $property);
+      $classstart: "";
 
-    @each $name, $value in $medium {
-      @if $name == "class" {
-        $classstart: #{map-get($classnames, flex)}#{$value};
-      }
+      @each $name, $value in $medium {
+        @if $name == "class" {
+          $classstart: #{map-get($classnames, flex)}#{$value};
+        }
 
-      @if $name == "values" {
-        @each $value-name, $value-value in $value {
-          .#{$classstart}-#{$value-name} {
-            #{$property}: #{$value-value};
-          }
+        @if $name == "values" {
+          @each $value-name, $value-value in $value {
+            .#{$classstart}-#{$value-name} {
+              #{$property}: #{$value-value};
+            }
 
-          $addme: add-to-apply-map(#{$classstart}-#{$value-name}, "#{$property}", "#{$value-value}");
+            $addme: add-to-apply-map(#{$classstart}-#{$value-name}, "#{$property}", "#{$value-value}");
+          }
         }
       }
     }
-  }
 
-  @if $flex-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $property in $flex {
-          $medium: map-get($flex-list, $property);
-          $classstart: "";
+    @if $flex-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $property in $flex {
+            $medium: map-get($flex-list, $property);
+            $classstart: "";
 
-          @each $name, $value in $medium {
-            @if $name == "class" {
-              $classstart: #{$value};
-            }
+            @each $name, $value in $medium {
+              @if $name == "class" {
+                $classstart: #{$value};
+              }
 
-            @if $name == "values" {
-              @each $value-name, $value-value in $value {
-                .#{$breakpoint}\:#{$classstart}-#{$value-name} {
-                  #{$property}: #{$value-value};
+              @if $name == "values" {
+                @each $value-name, $value-value in $value {
+                  .#{$breakpoint}\:#{$classstart}-#{$value-name} {
+                    #{$property}: #{$value-value};
+                  }
                 }
               }
             }

data/vendor/assets/stylesheets/shadows/_shadows.scss

@@ -11,27 +11,29 @@ $shadows: (
 ) !default;
 
 @if index($components, shadows) {
-  @each $shadow, $value in $shadows {
-    $hover: "";
+  :root {
+    @each $shadow, $value in $shadows {
+      $hover: "";
 
-    @if $shadows-hover {
-      $hover: ", .hover\\:#{map-get($classnames, shadow)}-#{$shadow}:hover";
-    }
+      @if $shadows-hover {
+        $hover: ", .hover\\:#{map-get($classnames, shadow)}-#{$shadow}:hover";
+      }
 
-    .#{map-get($classnames, shadow)}-#{$shadow}
-    #{$hover} {
-      box-shadow: #{$value};
-    }
+      .#{map-get($classnames, shadow)}-#{$shadow}
+      #{$hover} {
+        box-shadow: #{$value};
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, shadow)}-#{$shadow}, "box-shadow", "#{$value}");
-  }
+      $addme: add-to-apply-map(#{map-get($classnames, shadow)}-#{$shadow}, "box-shadow", "#{$value}");
+    }
 
-  @if $shadows-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $shadow, $value in $shadows {
-          .#{$breakpoint}\:#{map-get($classnames, shadow)}-#{$shadow} {
-            box-shadow: #{$value};
+    @if $shadows-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $shadow, $value in $shadows {
+            .#{$breakpoint}\:#{map-get($classnames, shadow)}-#{$shadow} {
+              box-shadow: #{$value};
+            }
           }
         }
       }

data/vendor/assets/stylesheets/sizing/_grid.scss

@@ -18,65 +18,67 @@ $grid-full: true !default;
 $grid-single: false !default;
 
 @if index($components, grid) {
-  // No Breakpoints
-  @if $grid-single {
-    @for $i from 1 through $grid-size {
-      .#{map-get($classnames, width)}-#{$i} {
-        width: (100% / $grid-size) * $i;
-      }
+  :root {
+    // No Breakpoints
+    @if $grid-single {
+      @for $i from 1 through $grid-size {
+        .#{map-get($classnames, width)}-#{$i} {
+          width: (100% / $grid-size) * $i;
+        }
 
-      $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");
-    }
-  } @else {
-    @for $i from 1 through $grid-size {
-      @if $grid-full {
-        @for $j from 1 through $i {
-          @include widthify($i, $j);
+        $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");
+      }
+    } @else {
+      @for $i from 1 through $grid-size {
+        @if $grid-full {
+          @for $j from 1 through $i {
+            @include widthify($i, $j);
+          }
+        } @else {
+          @include widthify($i, 1);
         }
-      } @else {
-        @include widthify($i, 1);
       }
     }
-  }
 
-  // Breakpoints
-  @if $grid-single {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @for $i from 1 through $grid-size {
-          .#{$breakpoint}\:#{map-get($classnames, width)}-#{$i} {
-            width: (100% / $grid-size) * $i;
+    // Breakpoints
+    @if $grid-single {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @for $i from 1 through $grid-size {
+            .#{$breakpoint}\:#{map-get($classnames, width)}-#{$i} {
+              width: (100% / $grid-size) * $i;
+            }
           }
         }
       }
-    }
-  } @else {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @for $i from 1 through $grid-size {
-          @if $grid-full {
-            @for $j from 1 through $i {
-              @include widthify($i, $j, $breakpoint);
+    } @else {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @for $i from 1 through $grid-size {
+            @if $grid-full {
+              @for $j from 1 through $i {
+                @include widthify($i, $j, $breakpoint);
+              }
+            } @else {
+              @include widthify($i, 1, $breakpoint);
             }
-          } @else {
-            @include widthify($i, 1, $breakpoint);
           }
         }
       }
     }
-  }
 
-  @if map-get($breakpoints, mw) {
-    .#{map-get($classnames, width)}-max {
-      max-width: map-get($breakpoints, mw);
+    @if map-get($breakpoints, mw) {
+      .#{map-get($classnames, width)}-max {
+        max-width: map-get($breakpoints, mw);
+      }
     }
-  }
 
-  .h-1\/1 {
-    height: 100%;
-  }
+    .h-1\/1 {
+      height: 100%;
+    }
 
-  .h-auto {
-    height: auto;
+    .h-auto {
+      height: auto;
+    }
   }
 }

data/vendor/assets/stylesheets/sizing/_spacing.scss

@@ -78,47 +78,49 @@ $types: (
 }
 
 @if index($components, spacing) {
-  @each $space, $value in $spacing {
-    @include paddingmargin($space, $value);
+  :root {
+    @each $space, $value in $spacing {
+      @include paddingmargin($space, $value);
 
-    @each $location, $location-value in $spacing-locations {
-      @include paddingmargin($space, $value, 0, $location, $location-value);
+      @each $location, $location-value in $spacing-locations {
+        @include paddingmargin($space, $value, 0, $location, $location-value);
+      }
     }
-  }
 
-  @if $spacing-responsive {
-    @each $space, $value in $spacing {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @include paddingmargin($space, $value, $breakpoint);
+    @if $spacing-responsive {
+      @each $space, $value in $spacing {
+        @each $breakpoint, $breakpoint-value in $breakpoints {
+          @include breakpoint($breakpoint) {
+            @include paddingmargin($space, $value, $breakpoint);
 
-          @each $location, $location-value in $spacing-locations {
-            @include paddingmargin($space, $value, $breakpoint, $location, $location-value);
+            @each $location, $location-value in $spacing-locations {
+              @include paddingmargin($space, $value, $breakpoint, $location, $location-value);
+            }
           }
         }
       }
     }
-  }
 
-  @each $space, $value in $spacing {
-    @if type-of($value) == "number" {
-      .-mx-#{$space} {
-        margin-left: $value * -1;
-        margin-right: $value * -1;
-      }
+    @each $space, $value in $spacing {
+      @if type-of($value) == "number" {
+        .-mx-#{$space} {
+          margin-left: $value * -1;
+          margin-right: $value * -1;
+        }
 
-      $addme: add-to-apply-map(-mx-#{$space}, ("margin-left": "", "margin-right": ""), "#{$value * -1}");
+        $addme: add-to-apply-map(-mx-#{$space}, ("margin-left": "", "margin-right": ""), "#{$value * -1}");
+      }
     }
-  }
 
-  @if $spacing-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $space, $value in $spacing {
-          @if type-of($value) == "number" {
-            .#{$breakpoint}\:-mx-#{$space} {
-              margin-left: $value * -1;
-              margin-right: $value * -1;
+    @if $spacing-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $space, $value in $spacing {
+            @if type-of($value) == "number" {
+              .#{$breakpoint}\:-mx-#{$space} {
+                margin-left: $value * -1;
+                margin-right: $value * -1;
+              }
             }
           }
         }

data/vendor/assets/stylesheets/text/_align.scss

@@ -7,20 +7,22 @@ $align: (
 ) !default;
 
 @if index($components, text-align) {
-  @each $value in $align {
-    .#{map-get($classnames, text)}-#{$value} {
-      text-align: $value;
-    }
+  :root {
+    @each $value in $align {
+      .#{map-get($classnames, text)}-#{$value} {
+        text-align: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text", "#{$value}");
-  }
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-align", "#{$value}");
+    }
 
-  @if $text-align-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include breakpoint($breakpoint) {
-        @each $value in $align {
-          .#{$breakpoint}\:#{map-get($classnames, text)}-#{$value} {
-            text-align: $value;
+    @if $text-align-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @each $value in $align {
+            .#{$breakpoint}\:#{map-get($classnames, text)}-#{$value} {
+              text-align: $value;
+            }
           }
         }
       }

data/vendor/assets/stylesheets/text/_colors.scss

@@ -1,40 +1,42 @@
 $text-colors-hover: true !default;
 
 @if index($components, text-colors) {
-  @if $theme-colors != () {
-    @each $color, $value in $theme-colors {
-      $hover: "";
+  :root {
+    @if $theme-colors != () {
+      @each $color, $value in $theme-colors {
+        $hover: "";
 
-      @if $text-colors-hover {
-        $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}:hover";
-      }
+        @if $text-colors-hover {
+          $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}:hover";
+        }
 
-      .#{map-get($classnames, text)}-#{"" + $color}
-      #{$hover} {
-        color: #{$value};
-      }
+        .#{map-get($classnames, text)}-#{"" + $color}
+        #{$hover} {
+          color: #{$value};
+        }
 
-      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");
+        $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");
+      }
     }
-  }
 
-  @if $full-colors {
-    @each $color in $colors {
-      $medium: map-get($colors-list, $color);
+    @if $full-colors {
+      @each $color in $colors {
+        $medium: map-get($colors-list, $color);
 
-      @each $shade, $value in $medium {
-        $hover: "";
+        @each $shade, $value in $medium {
+          $hover: "";
 
-        @if $text-colors-hover {
-          $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}:hover";
-        }
+          @if $text-colors-hover {
+            $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}:hover";
+          }
 
-        .#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}
-        #{$hover} {
-          color: $value;
-        }
+          .#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}
+          #{$hover} {
+            color: $value;
+          }
 
-        $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
+          $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
+        }
       }
     }
   }

data/vendor/assets/stylesheets/text/_fonts.scss

@@ -56,14 +56,16 @@ $font-families: (
   serif: $serif,
   sans-serif: $sans-serif,
   monospace: $monospace
-) !default;
+);
 
 @if index($components, fonts) {
-  @each $font-family, $value in $font-families {
-    .#{map-get($classnames, font)}-#{$font-family} {
-      font-family: $value;
-    }
+  :root {
+    @each $font-family, $value in $font-families {
+      .#{map-get($classnames, font)}-#{$font-family} {
+        font-family: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$font-family}, "font-family", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$font-family}, "font-family", "#{$value}");
+    }
   }
 }

data/vendor/assets/stylesheets/text/_sizes.scss

@@ -5,11 +5,13 @@ $font-sizes: (
 ) !default;
 
 @if index($components, font-sizes) {
-  @each $size, $value in $font-sizes {
-    .#{map-get($classnames, text)}-#{$size} {
-      font-size: $value;
-    }
+  :root {
+    @each $size, $value in $font-sizes {
+      .#{map-get($classnames, text)}-#{$size} {
+        font-size: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$size}, "font-size", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$size}, "font-size", "#{$value}");
+    }
   }
 }

data/vendor/assets/stylesheets/text/_style.scss

@@ -6,12 +6,14 @@ $decoration: (
 ) !default;
 
 @if index($components, text-decoration) {
-  @each $value in $decoration {
-    .#{map-get($classnames, text)}-#{$value} {
-      text-decoration: $value;
-    }
+  :root {
+    @each $value in $decoration {
+      .#{map-get($classnames, text)}-#{$value} {
+        text-decoration: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-decoration", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-decoration", "#{$value}");
+    }
   }
 }
 
@@ -22,12 +24,14 @@ $font-style: (
 ) !default;
 
 @if index($components, font-style) {
-  @each $value in $font-style {
-    .#{map-get($classnames, font)}-#{$value} {
-      font-style: $value;
-    }
+  :root {
+    @each $value in $font-style {
+      .#{map-get($classnames, font)}-#{$value} {
+        font-style: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-style", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-style", "#{$value}");
+    }
   }
 }
 
@@ -39,12 +43,14 @@ $font-weights: (
 ) !default;
 
 @if index($components, font-weights) {
-  @each $value in $font-weights {
-    .#{map-get($classnames, font)}-#{$value} {
-      font-weight: $value;
-    }
+  :root {
+    @each $value in $font-weights {
+      .#{map-get($classnames, font)}-#{$value} {
+        font-weight: $value;
+      }
 
-    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-weight", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-weight", "#{$value}");
+    }
   }
 }
 
@@ -55,12 +61,13 @@ $text-transform: (
 ) !default;
 
 @if index($components, text-transform) {
+  :root {
+    @each $value in $text-transform {
+      .#{map-get($classnames, text)}-#{$value} {
+        text-transform: $value;
+      }
 
-  @each $value in $text-transform {
-    .#{map-get($classnames, text)}-#{$value} {
-      text-transform: $value;
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-transform", "#{$value}");
     }
-
-    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-transform", "#{$value}");
   }
 }

data/vendor/assets/stylesheets/text/_titles.scss

@@ -0,0 +1,19 @@
+$title-sizes: (
+  h1: 3rem,
+  h2: 2rem,
+  h3: 1.5rem,
+  h4: 1.25rem,
+  h5: 1.1rem
+) !default;
+
+@if index($components, title-sizes) {
+  :root {
+    @each $size, $value in $title-sizes {
+      #{$size} {
+        font-size: $value;
+      }
+
+      $addme: add-to-apply-map(#{$size}, "font-size", "#{$value}");
+    }
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flake-scss
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 0.1.11
 platform: ruby
 authors:
 - Mitcheljager
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-26 00:00:00.000000000 Z
+date: 2017-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -60,6 +60,8 @@ files:
 - vendor/assets/stylesheets/_variables.scss
 - vendor/assets/stylesheets/animations/_transitions.scss
 - vendor/assets/stylesheets/background/_colors.scss
+- vendor/assets/stylesheets/background/_position.scss
+- vendor/assets/stylesheets/background/_sizes.scss
 - vendor/assets/stylesheets/border/_colors.scss
 - vendor/assets/stylesheets/border/_general.scss
 - vendor/assets/stylesheets/border/_radius.scss
@@ -69,6 +71,7 @@ files:
 - vendor/assets/stylesheets/flake/_mixins.scss
 - vendor/assets/stylesheets/general/_display.scss
 - vendor/assets/stylesheets/general/_general.scss
+- vendor/assets/stylesheets/general/_overflow.scss
 - vendor/assets/stylesheets/general/_position.scss
 - vendor/assets/stylesheets/general/_z-index.scss
 - vendor/assets/stylesheets/layout/_flex.scss
@@ -80,6 +83,7 @@ files:
 - vendor/assets/stylesheets/text/_fonts.scss
 - vendor/assets/stylesheets/text/_sizes.scss
 - vendor/assets/stylesheets/text/_style.scss
+- vendor/assets/stylesheets/text/_titles.scss
 homepage: https://github.com/Mitcheljager/flake-scss
 licenses:
 - MIT