flake-scss 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1cc735121e7e4fef499d4a341e9f5c32602c97fc
+  data.tar.gz: 739b1556aff3b6ea555a3317c3bb17dda3785d14
+SHA512:
+  metadata.gz: f9cc99f0e8eb7f45013ff73d18a552a9e0045bd60c83249528d11d090baf29b47c853a947918b0db16951f8ad65e061fea586cb63d445dd2dc84c5c742f39838
+  data.tar.gz: 414027b8c74e98f07f2b9336d8fa2097436488cdbc30d036bb2b969a0c39f8ca528101dde52c0832b32b9141e77052eb8ed462250d04ed9bc90c1cfc16746c91

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at mitchel_jager@hotmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in flake-scss.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Mitcheljager
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,43 @@
+# 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
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'flake-scss'
+```
+
+And then execute:
+
+    $ bundle
+
+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/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "flake/scss"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/flake-scss.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "flake/scss/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "flake-scss"
+  spec.version       = Flake::Scss::VERSION
+  spec.authors       = ["Mitcheljager"]
+  spec.email         = ["mitchel_jager@hotmail.com"]
+
+  spec.summary       = "Highly customizable Utility SCSS Framework"
+  spec.homepage      = "https://github.com/Mitcheljager/flake-scss"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.15"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/flake/scss/version.rb

@@ -0,0 +1,5 @@
+module Flake
+  module Scss
+    VERSION = "0.1.1"
+  end
+end

data/lib/flake/scss.rb

@@ -0,0 +1,7 @@
+require "flake/scss/version"
+
+module Flake
+  module Scss
+    class Engine < ::Rails::Engine; end
+  end
+end

data/vendor/assets/stylesheets/_flake.scss

@@ -0,0 +1,14 @@
+@import "helpers/functions",
+        "helpers/breakpoints";
+
+@import "general/general",
+        "general/display";
+
+@import "background/colors";
+
+@import "text/colors";
+
+@import "sizing/spacing",
+        "sizing/grid";
+
+@import "layout/flex";

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

@@ -0,0 +1,31 @@
+@import "../helpers/colors-list";
+
+$bg-hover: true !default;
+$bg-responsive: false !default;
+
+@each $color in $colors {
+  $medium: map-get($colors-list, $color);
+
+  @each $shade, $value in $medium {
+    $hover: "";
+
+    @if $bg-hover {
+      $hover: ", .hover\\:bg-#{$color}-#{$shade}:hover";
+    }
+
+    .bg-#{$color}-#{$shade}
+    #{$hover} {
+      background-color: $value;
+    }
+
+    @if $bg-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include mediaquery($breakpoint) {
+          .#{$breakpoint}\:bg-#{$color}-#{$shade} {
+            background-color: $value;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+$display-hover: false !default;
+$display-responsive: true !default;
+
+$display: () !default;
+@if $display == () {
+  $display: (
+    inline,
+    inline-block,
+    block,
+    flex,
+    inline-flex
+  );
+}
+
+@each $property in $display {
+  $hover: "";
+
+  @if $display-hover {
+    $hover: ", .hover\\:#{$property}:hover";
+  }
+
+  .#{$property}
+  #{$hover} {
+    display: $property;
+  }
+
+  @if $display-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include mediaquery($breakpoint) {
+        .#{$breakpoint}\:#{$property} {
+          display: $property;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,17 @@
+$breakpoints: () !default;
+@if $breakpoints == () {
+  $breakpoints: (
+    sm: 560px,
+    md: 768px,
+    lg: 960px,
+    mw: 1200px
+  );
+}
+
+@mixin mediaquery($size) {
+  $query: map-get($breakpoints, $size);
+
+  @media (min-width: #{$query}) {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/helpers/_colors-list.scss

@@ -0,0 +1,308 @@
+// scss-lint:disable ColorKeyword
+// scss-lint:disable ColorVariable
+
+$colors: () !default;
+@if $colors == () {
+  $colors: (
+    red,
+    pink,
+    purple,
+    deep-purple,
+    indigo,
+    blue,
+    light-blue,
+    cyan,
+    teal,
+    green,
+    light-green,
+    lime,
+    yellow,
+    amber,
+    orange,
+    deep-orange,
+    brown,
+    gray,
+    blue-gray,
+    general
+  );
+}
+
+$colors-list: (
+  red: (
+    50: #FFEBEE,
+    100: #FFCDD2,
+    200: #EF9A9A,
+    300: #E57373,
+    400: #EF5350,
+    500: #F44336,
+    600: #E53935,
+    700: #D32F2F,
+    800: #C62828,
+    900: #B71C1C,
+    A100: #FF8A80,
+    A200: #FF5252,
+    A400: #FF1744,
+    A700: #D50000
+  ), pink: (
+    50: #FCE4EC,
+    100: #F8BBD0,
+    200: #F48FB1,
+    300: #F06292,
+    400: #EC407A,
+    500: #E91E63,
+    600: #D81B60,
+    700: #C2185B,
+    800: #AD1457,
+    900: #880E4F,
+    A100: #FF80AB,
+    A200: #FF4081,
+    A400: #F50057,
+    A700: #C51162
+  ), purple: (
+    50: #F3E5F5,
+    100: #E1BEE7,
+    200: #CE93D8,
+    300: #BA68C8,
+    400: #AB47BC,
+    500: #9C27B0,
+    600: #8E24AA,
+    700: #7B1FA2,
+    800: #6A1B9A,
+    900: #4A148C,
+    A100: #EA80FC,
+    A200: #E040FB,
+    A400: #D500F9,
+    A700: #AA00FF
+  ), deep-purple: (
+    50: #EDE7F6,
+    100: #D1C4E9,
+    200: #B39DDB,
+    300: #9575CD,
+    400: #7E57C2,
+    500: #673AB7,
+    600: #5E35B1,
+    700: #512DA8,
+    800: #4527A0,
+    900: #311B92,
+    A100: #B388FF,
+    A200: #7C4DFF,
+    A400: #651FFF,
+    A700: #6200EA
+  ), indigo: (
+    50: #E8EAF6,
+    100: #C5CAE9,
+    200: #9FA8DA,
+    300: #7986CB,
+    400: #5C6BC0,
+    500: #3F51B5,
+    600: #3949AB,
+    700: #303F9F,
+    800: #283593,
+    900: #1A237E,
+    A100: #8C9EFF,
+    A200: #536DFE,
+    A400: #3D5AFE,
+    A700: #304FFE
+  ), blue: (
+    50: #E3F2FD,
+    100: #BBDEFB,
+    200: #90CAF9,
+    300: #64B5F6,
+    400: #42A5F5,
+    500: #2196F3,
+    600: #1E88E5,
+    700: #1976D2,
+    800: #1565C0,
+    900: #0D47A1,
+    A100: #82B1FF,
+    A200: #448AFF,
+    A400: #2979FF,
+    A700: #2962FF
+  ), light-blue: (
+    50: #E1F5FE,
+    100: #B3E5FC,
+    200: #81D4FA,
+    300: #4FC3F7,
+    400: #29B6F6,
+    500: #03A9F4,
+    600: #039BE5,
+    700: #0288D1,
+    800: #0277BD,
+    900: #01579B,
+    A100: #80D8FF,
+    A200: #40C4FF,
+    A400: #00B0FF,
+    A700: #0091EA
+  ), cyan: (
+    50: #E0F7FA,
+    100: #B2EBF2,
+    200: #80DEEA,
+    300: #4DD0E1,
+    400: #26C6DA,
+    500: #00BCD4,
+    600: #00ACC1,
+    700: #0097A7,
+    800: #00838F,
+    900: #006064,
+    A100: #84FFFF,
+    A200: #18FFFF,
+    A400: #00E5FF,
+    A700: #00B8D4
+  ), teal: (
+    50: #E0F2F1,
+    100: #B2DFDB,
+    200: #80CBC4,
+    300: #4DB6AC,
+    400: #26A69A,
+    500: #009688,
+    600: #00897B,
+    700: #00796B,
+    800: #00695C,
+    900: #004D40,
+    A100: #A7FFEB,
+    A200: #64FFDA,
+    A400: #1DE9B6,
+    A700: #00BFA5
+  ), green: (
+    50: #E8F5E9,
+    100: #C8E6C9,
+    200: #A5D6A7,
+    300: #81C784,
+    400: #66BB6A,
+    500: #4CAF50,
+    600: #43A047,
+    700: #388E3C,
+    800: #2E7D32,
+    900: #1B5E20,
+    A100: #B9F6CA,
+    A200: #69F0AE,
+    A400: #00E676,
+    A700: #00C853
+  ), light-green: (
+    50: #F1F8E9,
+    100: #DCEDC8,
+    200: #C5E1A5,
+    300: #AED581,
+    400: #9CCC65,
+    500: #8BC34A,
+    600: #7CB342,
+    700: #689F38,
+    800: #558B2F,
+    900: #33691E,
+    A100: #CCFF90,
+    A200: #B2FF59,
+    A400: #76FF03,
+    A700: #64DD17
+  ), lime: (
+    50: #F9FBE7,
+    100: #F0F4C3,
+    200: #E6EE9C,
+    300: #DCE775,
+    400: #D4E157,
+    500: #CDDC39,
+    600: #C0CA33,
+    700: #AFB42B,
+    800: #9E9D24,
+    900: #827717,
+    A100: #F4FF81,
+    A200: #EEFF41,
+    A400: #C6FF00,
+    A700: #AEEA00
+  ), yellow: (
+    50: #FFFDE7,
+    100: #FFF9C4,
+    200: #FFF59D,
+    300: #FFF176,
+    400: #FFEE58,
+    500: #FFEB3B,
+    600: #FDD835,
+    700: #FBC02D,
+    800: #F9A825,
+    900: #F57F17,
+    A100: #FFFF8D,
+    A200: #FFFF00,
+    A400: #FFEA00,
+    A700: #FFD600
+  ), amber: (
+    50: #FFF8E1,
+    100: #FFECB3,
+    200: #FFE082,
+    300: #FFD54F,
+    400: #FFCA28,
+    500: #FFC107,
+    600: #FFB300,
+    700: #FFA000,
+    800: #FF8F00,
+    900: #FF6F00,
+    A100: #FFE57F,
+    A200: #FFD740,
+    A400: #FFC400,
+    A700: #FFAB00
+  ), orange: (
+    50: #FFF3E0,
+    100: #FFE0B2,
+    200: #FFCC80,
+    300: #FFB74D,
+    400: #FFA726,
+    500: #FF9800,
+    600: #FB8C00,
+    700: #F57C00,
+    800: #EF6C00,
+    900: #E65100,
+    A100: #FFD180,
+    A200: #FFAB40,
+    A400: #FF9100,
+    A700: #FF6D00
+  ), deep-orange: (
+    50: #FBE9E7,
+    100: #FFCCBC,
+    200: #FFAB91,
+    300: #FF8A65,
+    400: #FF7043,
+    500: #FF5722,
+    600: #F4511E,
+    700: #E64A19,
+    800: #D84315,
+    900: #BF360C,
+    A100: #FF9E80,
+    A200: #FF6E40,
+    A400: #FF3D00,
+    A700: #DD2C00
+  ), brown: (
+    50: #EFEBE9,
+    100: #D7CCC8,
+    200: #BCAAA4,
+    300: #A1887F,
+    400: #8D6E63,
+    500: #795548,
+    600: #6D4C41,
+    700: #5D4037,
+    800: #4E342E,
+    900: #3E2723
+  ), gray: (
+    50: #FAFAFA,
+    100: #F5F5F5,
+    200: #EEEEEE,
+    300: #E0E0E0,
+    400: #BDBDBD,
+    500: #9E9E9E,
+    600: #757575,
+    700: #616161,
+    800: #424242,
+    900: #212121
+  ), blue-gray: (
+    50: #ECEFF1,
+    100: #CFD8DC,
+    200: #B0BEC5,
+    300: #90A4AE,
+    400: #78909C,
+    500: #607D8B,
+    600: #546E7A,
+    700: #455A64,
+    800: #37474F,
+    900: #263238
+  ), general: (
+    black: #000000,
+    white: #FFFFFF
+  ),
+);

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

@@ -0,0 +1,3 @@
+@function spacing($key: 0) {
+  @return map-get($spacing, $key);
+}

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

@@ -0,0 +1,88 @@
+$flex-responsive: true !default;
+
+$flex: () !default;
+@if $flex == () {
+  $flex: (
+    flex-direction,
+    flex-wrap,
+    align-items,
+    align-self,
+    justify-content
+  );
+}
+
+$flex-list: (
+  "flex-direction": (
+    "class": "flex",
+    "values": (
+      row: "row",
+      row-reverse: "row-reverse",
+      column: "column",
+      column-reverse: "column-reverse",
+      unset: "unset"
+    )
+  ), "flex-wrap": (
+    "class": "flex",
+    "values": (
+      wrap: "wrap",
+      wrap-reverse: "wrap-reverse",
+      nowrap: "no-wrap"
+    )
+  ), "align-items": (
+    "class": "align",
+    "values": (
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch"
+    )
+  ), "align-self": (
+    "class": "self",
+    "values": (
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      baseline: "baseline",
+      stretch: "stretch"
+    )
+  ), "justify-content": (
+    "class": "justify",
+    "values": (
+      start: "flex-start",
+      end: "flex-end",
+      center: "center",
+      between: "space-between",
+      around: "space-around"
+    )
+  )
+);
+
+@each $property in $flex {
+  $medium: map-get($flex-list, $property);
+  $classstart: "";
+
+  @each $name, $value in $medium {
+    @if $name == "class" {
+      $classstart: #{$value};
+    }
+
+    @if $name == "values" {
+      @each $value-name, $value-value in $value {
+        .#{$classstart}-#{$value-name} {
+          #{$property}: #{$value-value};
+        }
+
+        @if $flex-responsive {
+          @each $breakpoint, $breakpoint-value in $breakpoints {
+            @include mediaquery($breakpoint) {
+              .#{$breakpoint}\:#{$classstart}-#{$value-name} {
+                #{$property}: #{$value-value};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+$grid-size: 12;
+$grid-full: true !default;
+$grid-single: false !default;
+
+@mixin widthify($divide: 0, $division: 0, $breakpoint: 0) {
+  $bp: "";
+  @if $breakpoint != 0 {
+    $bp: "#{$breakpoint}\\:";
+  }
+
+  .#{$bp}w-#{$division}\/#{$divide} {
+    width: (100% / $divide) * $division;
+  }
+}
+
+@if $grid-single {
+  @for $i from 1 through $grid-size {
+    .w-#{$i} {
+      width: (100% / $grid-size) * $i;
+    }
+
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include mediaquery($breakpoint) {
+        .#{$breakpoint}\:w-#{$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);
+
+        @each $breakpoint, $breakpoint-value in $breakpoints {
+          @include mediaquery($breakpoint) {
+            @include widthify($i, $j, $breakpoint);
+          }
+        }
+      }
+    } @else {
+      @include widthify($i, 1);
+
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include mediaquery($breakpoint) {
+          @include widthify($i, 1, $breakpoint);
+        }
+      }
+    }
+  }
+}
+
+@if map-get($breakpoints, mw) {
+  .w-max {
+    max-width: map-get($breakpoints, mw);
+  }
+}

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

@@ -0,0 +1,92 @@
+$spacing-responsive: true !default;
+
+$spacing: () !default;
+@if $spacing == () {
+  $spacing: (
+    0: 0,
+    1: .5rem,
+    2: 1rem,
+    3: 2rem,
+    4: 3rem,
+    5: 4rem,
+    auto: auto
+  );
+}
+
+$spacing-locations: (
+  t: "top",
+  r: "right",
+  b: "bottom",
+  l: "left",
+  y: (
+    "top",
+    "bottom"
+  ), x: (
+    "left",
+    "right"
+  )
+);
+
+$types: (
+  m: margin,
+  p: padding
+);
+
+@mixin paddingmargin($space, $value, $breakpoint: 0, $location: "", $location-value: "") {
+  $s: "";
+  $bp: "";
+  $l: "";
+
+  @each $type, $type-value in $types {
+    @if $breakpoint != 0 {
+      $bp: "#{$breakpoint}\\:";
+      $s: "-#{$space}";
+    } @else {
+      $s: "-#{$space}";
+    }
+
+    @if $location != "" {
+      $l: "#{$location}";
+    }
+
+    .#{$bp}#{$type}#{$l}#{$s} {
+      @each $loc in $location-value {
+        $sep: "";
+        @if $loc != "" {
+          $sep: "-";
+        }
+
+        #{$type-value}#{$sep}#{$loc}: $value;
+      }
+    }
+  }
+}
+
+@each $space, $value in $spacing {
+  @include paddingmargin($space, $value);
+
+  @each $location, $location-value in $spacing-locations {
+    @include paddingmargin($space, $value, 0, $location, $location-value);
+  }
+
+  @if $spacing-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include mediaquery($breakpoint) {
+        @include paddingmargin($space, $value, $breakpoint);
+
+        @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;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+@import "../helpers/colors-list";
+
+$text-colors-hover: true !default;
+
+@each $color in $colors {
+  $medium: map-get($colors-list, $color);
+
+  @each $shade, $value in $medium {
+    $hover: "";
+
+    @if $text-colors-hover {
+      $hover: ", .hover\\:text-#{$color}-#{$shade}:hover";
+    }
+
+    .text-#{$color}-#{$shade}
+    #{$hover} {
+      color: $value;
+    }
+  }
+}

metadata

@@ -0,0 +1,95 @@
+--- !ruby/object:Gem::Specification
+name: flake-scss
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Mitcheljager
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2017-11-05 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- mitchel_jager@hotmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- flake-scss.gemspec
+- lib/flake/scss.rb
+- lib/flake/scss/version.rb
+- vendor/assets/stylesheets/_flake.scss
+- vendor/assets/stylesheets/_variables.scss
+- vendor/assets/stylesheets/background/_colors.scss
+- vendor/assets/stylesheets/general/_display.scss
+- vendor/assets/stylesheets/general/_general.scss
+- vendor/assets/stylesheets/helpers/_breakpoints.scss
+- vendor/assets/stylesheets/helpers/_colors-list.scss
+- vendor/assets/stylesheets/helpers/_functions.scss
+- vendor/assets/stylesheets/layout/_flex.scss
+- vendor/assets/stylesheets/sizing/_grid.scss
+- vendor/assets/stylesheets/sizing/_spacing.scss
+- vendor/assets/stylesheets/text/_colors.scss
+homepage: https://github.com/Mitcheljager/flake-scss
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.14
+signing_key: 
+specification_version: 4
+summary: Highly customizable Utility SCSS Framework
+test_files: []