flake-scss 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d6fba40b5f9b69bec80ae0b03e341db2c9245a0a
-  data.tar.gz: 4feff6862267c16c969cd9a598a9fa7742658230
+  metadata.gz: 8518cff97725bdd862ff0fa7105df9d0ae716596
+  data.tar.gz: f5c5ec5fe8265803ca5ce53fa411415f00dbeae3
 SHA512:
-  metadata.gz: c18d02b18aed7812c8c8848260898be562a1f4d2bec2d86b1a96a50fe4951edc595901f55e5264947004d055814e50ccbc0a1fcb30b0edf7a4cca274325b3052
-  data.tar.gz: 7245e39b81063c05d2b816988092f1c8e13db0e2f90fc9d019a3817361fb0eb0b0d25f78b73b4571dc845d04e93f38acb90cfa603429bdc3be507b988bd3335c
+  metadata.gz: 426f38623b909cc19fe8404eb5c2366e0ce1a4b3de6e54f596d1e070e0a5ee3ee09c40c8244eecf445d2751f7d2e267d7fb23870024d17a29e8624ddec759134
+  data.tar.gz: 121a66356358e392a7cb5690c18a9ac7a213367d2e70252a2dc6417d957f4738b834c7629c29faaf6139f55b5448adc17b4a0445980d7fd2b2128fac0fc3ab59

data/README.md

@@ -1,8 +1,6 @@
-# Flake::Scss
+# Flake-scss
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/flake/scss`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
+[Work in Progress!] Documentation at [flakeframework.herokuapp.com](https://flakeframework.herokuapp.com).
 
 ## Installation
 
@@ -19,25 +17,3 @@ And then execute:
 Or install it yourself as:
 
     $ gem install flake-scss
-
-## Usage
-
-TODO: Write usage instructions here
-
-## Development
-
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
-
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
-
-## Contributing
-
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/flake-scss. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
-
-## License
-
-The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-
-## Code of Conduct
-
-Everyone interacting in the Flake::Scss project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/flake-scss/blob/master/CODE_OF_CONDUCT.md).

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.3"
+    VERSION = "0.1.4"
   end
 end

data/vendor/assets/stylesheets/_flake.scss

@@ -1,5 +1,8 @@
+@import "variables";
+
 @import "helpers/functions",
-        "helpers/breakpoints";
+        "helpers/breakpoints",
+        "helpers/mixins";
 
 @import "background/colors";
 

data/vendor/assets/stylesheets/_variables.scss

@@ -0,0 +1 @@
+$apply-classes: () !global;

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

@@ -17,6 +17,8 @@ $bg-responsive: true !default;
     #{$hover} {
       background-color: $value;
     }
+
+    $addme: add-to-apply-map(bg-#{$color}-#{$shade}, "background-color", "#{$value}");
   }
 }
 

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

@@ -18,9 +18,15 @@ $border-color-responsive: false !default;
       border-color: $value;
     }
 
-    @if $border-color-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
+    $addme: add-to-apply-map(b-#{$color}-#{$shade}, "border-color", "#{$value}");
+  }
+}
+
+@if $border-color-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $color in $colors {
+        @each $shade, $value in $medium {
           .#{$breakpoint}\:bg-#{$color}-#{$shade} {
             border-color: $value;
           }

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

@@ -12,9 +12,18 @@ $borders: () !default;
   );
 }
 
-$standard-border: 1px solid black;
+$border-sizes: () !default;
+@if $border-sizes == () {
+  $border-sizes: (
+    1,
+    2,
+    3,
+    4,
+    5
+  );
+}
 
-@mixin makeBorder($space, $value, $breakpoint: 0) {
+@mixin makeBorder($space, $value, $size, $breakpoint: 0) {
   $bp: "";
   $sep: "";
 
@@ -26,24 +35,33 @@ $standard-border: 1px solid black;
     $sep: "-";
   }
 
-  .#{$bp}b#{$space} {
-    border#{$sep}#{$value}: $standard-border;
+  .#{$bp}b#{$space}-#{$size} {
+    border#{$sep}#{$value}: #{$size}px solid black;
   }
 
   .#{$bp}b#{$space}-0 {
     border#{$sep}#{$value}: 0;
   }
+
+  @if $breakpoint == 0 {
+    $addme: add-to-apply-map(b#{$space}-#{$size}, "border#{$sep}#{$value}", "#{$size}px solid black");
+    $addme: add-to-apply-map(b#{$space}-0, "border#{$sep}#{$value}", "0");
+  }
 }
 
 @each $border, $value in $borders {
-  @include makeBorder($border, $value);
+  @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 {
-        @include makeBorder($border, $value, $breakpoint);
+        @each $size in $border-sizes {
+          @include makeBorder($border, $value, $size, $breakpoint);
+        }
       }
     }
   }

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

@@ -12,4 +12,6 @@ $radius: (
   .radius-#{$radi} {
     border-radius: $value;
   }
+
+  $addme: add-to-apply-map(radius-#{$radi}, "border-radius", "#{$value}");
 }

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

@@ -12,11 +12,11 @@ $display: () !default;
 }
 
 @each $property in $display {
-  $hover: "";
-
   .#{$property} {
     display: $property;
   }
+
+  $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
 }
 
 @if $display-responsive {

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

@@ -4,8 +4,6 @@
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  font-size: map-get($sizes, normal);
+  @include apply(("m-0", "p-0", "bg-general-white", "text-size-normal"));
   line-height: 1.5em;
 }

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

@@ -15,6 +15,8 @@ $positions: () !default;
   .#{$position} {
     position: $position;
   }
+
+  $addme: add-to-apply-map(#{$position}, "position", "#{$position}");
 }
 
 @if $positions-responsive {
@@ -45,6 +47,8 @@ $pins: () !default;
   .pin-#{$pin} {
     #{$value}: 0;
   }
+
+  $addme: add-to-apply-map(pin-#{$pin}, "#{$value}", "0");
 }
 
 @if $pins-responsive {

data/vendor/assets/stylesheets/helpers/_functions.scss

@@ -1,3 +1,15 @@
 @function spacing($key: 0) {
   @return map-get($spacing, $key);
 }
+
+@function add-to-apply-map($classname, $property, $value) {
+  $to-add-to-map: (
+    $classname: (
+      $property: $value
+    )
+  );
+
+  $apply-classes: map-merge($apply-classes, $to-add-to-map) !global;
+
+  @return $to-add-to-map;
+}

data/vendor/assets/stylesheets/helpers/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin apply($keys) {
+  @each $key in $keys {
+    $class: map-get($apply-classes, $key);
+
+    @each $key, $value in $class {
+      #{$key}: #{$value};
+    }
+  }
+}

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

@@ -38,7 +38,7 @@ $flex-list: (
       stretch: "stretch"
     )
   ), "align-self": (
-    "class": "self",
+    "class": "align-self",
     "values": (
       start: "flex-start",
       end: "flex-end",
@@ -72,6 +72,8 @@ $flex-list: (
         .#{$classstart}-#{$value-name} {
           #{$property}: #{$value-value};
         }
+
+        $addme: add-to-apply-map(#{$classstart}-#{$value-name}, "#{$property}", "#{$value-value}");
       }
     }
   }

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

@@ -10,4 +10,6 @@ $shadows: (
   .shadow-#{$shadow} {
     box-shadow: #{$value};
   }
+
+  $addme: add-to-apply-map(shadow-#{$shadow}, "box-shadow", "#{$value}");
 }

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

@@ -1,4 +1,4 @@
-$grid-size: 12;
+$grid-size: 12 !default;
 $grid-full: true !default;
 $grid-single: false !default;
 
@@ -11,8 +11,11 @@ $grid-single: false !default;
   .#{$bp}w-#{$division}\/#{$divide} {
     width: (100% / $divide) * $division;
   }
-}
 
+  @if $breakpoint == 0 {
+    $addme: add-to-apply-map("#{$bp}w-#{$division}/#{$divide}", "width", "#{(100% / $divide) * $division}");
+  }
+}
 
 // No Breakpoints
 @if $grid-single {
@@ -20,6 +23,8 @@ $grid-single: false !default;
     .w-#{$i} {
       width: (100% / $grid-size) * $i;
     }
+
+    $addme: add-to-apply-map("w-#{$i}", "width", "#{(100% / $grid-size) * $i}");
   }
 } @else {
   @for $i from 1 through $grid-size {
@@ -65,3 +70,7 @@ $grid-single: false !default;
     max-width: map-get($breakpoints, mw);
   }
 }
+
+.h-1\/1 {
+  height: 100%;
+}

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

@@ -5,7 +5,7 @@ $spacing: () !default;
   $spacing: (
     0: 0,
     1: .25rem,
-    2: .5rem,
+    2: .75rem,
     3: 1.5rem,
     4: 3rem,
     5: 4rem,
@@ -59,6 +59,8 @@ $types: (
         }
 
         #{$type-value}#{$sep}#{$loc}: $value;
+
+        $addme: add-to-apply-map(#{$bp}#{$type}#{$l}#{$s}, "#{$type-value}#{$sep}#{$loc}", "#{$value}");
       }
     }
   }

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

@@ -10,6 +10,8 @@ $align: (
   .text-#{$value} {
     text-align: $value;
   }
+
+  $addme: add-to-apply-map(text-#{$value}, "text", "#{$value}");
 }
 
 @if $text-align-responsive {

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

@@ -16,5 +16,7 @@ $text-colors-hover: true !default;
     #{$hover} {
       color: $value;
     }
+
+    $addme: add-to-apply-map(text-#{$color}-#{$shade}, "color", "#{$value}");
   }
 }

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

@@ -65,4 +65,6 @@ $font-families: () !default;
   .font-#{$font-family} {
     font-family: $value;
   }
+
+  $addme: add-to-apply-map(font-#{$font-family}, "font-family", "#{$value}");
 }

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

@@ -5,7 +5,9 @@ $sizes: (
 );
 
 @each $size, $value in $sizes {
-  .font-size-#{$size} {
+  .text-#{$size} {
     font-size: $value;
   }
+
+  $addme: add-to-apply-map(text-#{$size}, "font-size", "#{$value}");
 }

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

@@ -9,6 +9,8 @@ $decoration: (
   .text-#{$value} {
     text-decoration: $value;
   }
+
+  $addme: add-to-apply-map(text-#{$value}, "text-decoration", "#{$value}");
 }
 
 $style: (
@@ -21,6 +23,8 @@ $style: (
   .font-#{$value} {
     font-style: $value;
   }
+
+  $addme: add-to-apply-map(font-#{$value}, "font-style", "#{$value}");
 }
 
 $weight: (
@@ -34,6 +38,8 @@ $weight: (
   .font-#{$value} {
     font-weight: $value;
   }
+
+  $addme: add-to-apply-map(font-#{$value}, "font-weight", "#{$value}");
 }
 
 $transform: (
@@ -46,4 +52,6 @@ $transform: (
   .text-#{$value} {
     text-transform: $value;
   }
+
+  $addme: add-to-apply-map(text-#{$value}, "text-transform", "#{$value}");
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flake-scss
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Mitcheljager
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-10 00:00:00.000000000 Z
+date: 2017-11-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -68,6 +68,7 @@ files:
 - vendor/assets/stylesheets/helpers/_breakpoints.scss
 - vendor/assets/stylesheets/helpers/_colors-list.scss
 - vendor/assets/stylesheets/helpers/_functions.scss
+- vendor/assets/stylesheets/helpers/_mixins.scss
 - vendor/assets/stylesheets/layout/_flex.scss
 - vendor/assets/stylesheets/shadows/_shadows.scss
 - vendor/assets/stylesheets/sizing/_grid.scss