codelation_assets 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c6549536b415b4fc11505c21b5672e6379a3ff7a
+  data.tar.gz: e82ea463c05fd0c5e333aa5ab2b01c391c751df2
+SHA512:
+  metadata.gz: 817863835f95d6c9d6a7626d2200fb8fbe22fc6b43209d9f01abf06062ae54e35437a09a2c4bbe1d45edcb01b357b1eaeadf52c490582ee2b544ff0d2949a6b4
+  data.tar.gz: 1b7e396bb393cbe7bd5ed06ed771b42af2de12caf0edb7e6c5315d6920c108695a6407b566244577e206c94fa5d770e3b6647d3d431fdd61091bc4b42e13ea1c

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 Brian Pattison
+
+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,39 @@
+# Codelation Assets
+
+A collection of SCSS mixins and JavaScript helpers used by Codelation for building awesome Rails apps quickly.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "codelation-assets"
+```
+
+Install the Codelation Assets gem with Bundler:
+
+```bash
+bundle install
+```
+
+## Usage
+
+**JavaScript**
+
+```javascript
+//= require codelation
+```
+
+**Sass**
+
+```scss
+@include "codelation";
+```
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Codelation Assets"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.rdoc")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load "rails/tasks/engine.rake"
+
+
+
+Bundler::GemHelper.install_tasks
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "lib"
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/codelation/app.js

@@ -0,0 +1,52 @@
+(function() {
+  "use strict";
+
+  var app = window.App;
+
+  if (app === undefined) {
+    app = window.App = {};
+  }
+
+  // Register functions to run when any page or specific pages are loaded.
+  //
+  // Example for running code only when `pages#home` loads:
+  //
+  //   App.register('pages.home').enter(function() {
+  //     // Set up
+  //   }).exit(function() {
+  //     // Tear down (Might be needed for Turbolinks)
+  //   });
+  //
+  // Example for running code on every page load:
+  //
+  //   App.register('component').enter(function() {
+  //     // Set up
+  //   }).exit(function() {
+  //     // Tear down (Might be needed for Turbolinks)
+  //   });
+  app.register = function(mixed) {
+    if (mixed === 'component') {
+      return appComponent();
+    } else {
+      return appController(mixed);
+    }
+  };
+
+  // Returns an object with `enter` and `exit` functions with for setting
+  // up and tearing down components pages specified by the controller/action.
+  function appController(controllerWithAction) {
+    var body = $('body');
+    var split = controllerWithAction.split('.');
+    var controller = split[0];
+    var action = split[1];
+
+    // enter: ready page:load
+    // exit:  page:before-unload
+  }
+
+  // Returns an object with `enter` and `exit` functions with for setting
+  // up and tearing down components on each page load/change.
+  function appComponent() {
+
+  }
+})();

data/app/assets/javascripts/codelation/components/columns.js

@@ -0,0 +1,15 @@
+$(document).ready(function() {
+  var elementsWithColumns = $('body *').filter(function() {
+    return $(this).css('column-count') !== 'auto';
+  });
+
+  elementsWithColumns.each(function() {
+    var container = $(this);
+    var columns = container.css('column-count');
+    var children = container.children().length;
+    var missingColumns = columns - (children % columns);
+    for (var i = 0; i < missingColumns; i++) {
+      container.append('<span></span>');
+    }
+  });
+});

data/app/assets/javascripts/codelation.js

@@ -0,0 +1 @@
+//= require_tree ./codelation

data/app/assets/stylesheets/codelation/functions/color.scss

@@ -0,0 +1,162 @@
+// Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+$amber: #ffc107;
+$black: #000;
+$blue: #2196f3;
+$blue-grey: #607d8b;
+$brown: #795548;
+$cyan: #00bcd4;
+$deep-orange: #ff5722;
+$deep-purple: #673ab7;
+$green: #4caf50;
+$grey: #9e9e9e;
+$indigo: #3f51b5;
+$light-blue: #03a9f4;
+$light-green: #8bc34a;
+$lime: #cddc39;
+$orange: #ff9800;
+$pink: #e91e63;
+$purple: #9c27b0;
+$red: #f44336;
+$teal: #009688;
+$white: #fff;
+$yellow: #ffeb3b;
+
+$amber-colors: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00;
+$blue-colors: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #82b1ff, #448aff, #2979ff, #2962ff;
+$blue-grey-colors: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, #607d8b, #546e7a, #455a64, #37474f, #263238;
+$brown-colors: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, #795548, #6d4c41, #5d4037, #4e342e, #3e2723;
+$cyan-colors: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064, #84ffff, #18ffff, #00e5ff, #00b8d4;
+$deep-orange-colors: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff9e80, #ff6e40, #ff3d00, #dd2c00;
+$deep-purple-colors: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92, #b388ff, #7c4dff, #651fff, #6200ea;
+$green-colors: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, #b9f6ca, #69f0ae, #00e676, #00c853;
+$grey-colors: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121;
+$indigo-colors: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, #3f51b5, #3949ab, #303f9f, #283593, #1a237e, #8c9eff, #536dfe, #3d5afe, #304ffe;
+$light-blue-colors: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b, #80d8ff, #40c4ff, #00b0ff, #0091ea;
+$light-green-colors: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e, #ccff90, #b2ff59, #76ff03, #64dd17;
+$lime-colors: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, #f4ff81, #eeff41, #c6ff00, #aeea00;
+$orange-colors: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, #ffd180, #ffab40, #ff9100, #ff6d00;
+$pink-colors: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, #ff80ab, #ff4081, #f50057, #c51162;
+$purple-colors: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #ea80fc, #e040fb, #d500f9, #aa00ff;
+$red-colors: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c, #ff8a80, #ff5252, #ff1744, #d50000;
+$teal-colors: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #009688, #00897b, #00796b, #00695c, #004d40, #a7ffeb, #64ffda, #1de9b6, #00bfa5;
+$yellow-colors: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600;
+
+@function color($color, $number: 500) {
+  $colors: "custom";
+  $index: 6;
+  
+  @if $color == $amber {
+    $colors: $amber-colors;
+  } @else if $color == $black {
+    @return $black;
+  } @else if $color == $blue {
+    $colors: $blue-colors;
+  } @else if $color == $blue-grey {
+    $colors: $blue-grey-colors;
+  } @else if $color == $brown {
+    $colors: $brown-colors;
+  } @else if $color == $cyan {
+    $colors: $cyan-colors;
+  } @else if $color == $deep-orange {
+    $colors: $deep-orange-colors;
+  } @else if $color == $deep-purple {
+    $colors: $deep-purple-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $grey {
+    $colors: $grey-colors;
+  } @else if $color == $indigo {
+    $colors: $indigo-colors;
+  } @else if $color == $light-blue {
+    $colors: $light-blue-colors;
+  } @else if $color == $light-green {
+    $colors: $light-green-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $lime {
+    $colors: $lime-colors;
+  } @else if $color == $orange {
+    $colors: $orange-colors;
+  } @else if $color == $pink {
+    $colors: $pink-colors;
+  } @else if $color == $purple {
+    $colors: $purple-colors;
+  } @else if $color == $red {
+    $colors: $red-colors;
+  } @else if $color == $teal {
+    $colors: $teal-colors;
+  } @else if $color == $white {
+    @return $white;
+  } @else if $color == $yellow {
+    $colors: $yellow-colors;
+  }
+
+  // A non-Material Design color was given, so we'll do our best to return a
+  // similar shade of that color. Will not handle the A100-A700 numbers.
+  @if $colors == "custom" {
+    @if $number == 50 {
+      @return desaturate(lighten($color, 38%), 25%);
+    } @else if $number == 100 {
+      @return desaturate(lighten($color, 28%), 16%);
+    } @else if $number == 200 {
+      @return desaturate(lighten($color, 22%), 10%);
+    } @else if $number == 300 {
+      @return desaturate(lighten($color, 15%), 8%);
+    } @else if $number == 400 {
+      @return desaturate(lighten($color, 8%), 2%);
+    } @else if $number == 500 {
+      @return $color;
+    } @else if $number == 600 {
+      @return desaturate(darken($color, 5%), 10%);
+    } @else if $number == 700 {
+      @return desaturate(darken($color, 10%), 18%);
+    } @else if $number == 800 {
+      @return desaturate(darken($color, 16%), 16%);
+    } @else if $number == 900 {
+      @return saturate(darken($color, 35%), 20%);
+    } @else {
+      @error "Only Google Material Design colors can be used with A100-A700. Given: #{$color} #{$number}";
+    }
+  }
+
+  // Google Material Design colors will return the exact color defined by Google.
+  @if $number == 50 {
+    $index: 1;
+  } @else if $number == 100 {
+    $index: 2;
+  } @else if $number == 200 {
+    $index: 3;
+  } @else if $number == 300 {
+    $index: 4;
+  } @else if $number == 400 {
+    $index: 5;
+  } @else if $number == 500 {
+    $index: 6;
+  } @else if $number == 600 {
+    $index: 7;
+  } @else if $number == 700 {
+    $index: 8;
+  } @else if $number == 800 {
+    $index: 9;
+  } @else if $number == 900 {
+    $index: 10;
+  } @else {
+    // A100-A700 colors are available for most Google Material Design colors with a few exceptions.
+    @if $color != $blue-grey and $color != $brown and $color != $grey {
+      @if $number == A100 {
+        $index: 11;
+      } @else if $number == A200 {
+        $index: 12;
+      } @else if $number == A400 {
+        $index: 13;
+      } @else if $number == A700 {
+        $index: 14;
+      }
+    } @else {
+      @error "$blue-grey, $brown, and $grey do not have A100-A700 colors. Given: #{$number}";
+    }
+  }
+
+  @return nth($colors, $index);
+}

data/app/assets/stylesheets/codelation/functions/text-color.scss

@@ -0,0 +1,41 @@
+// Get the text color to go on top of Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+@function text-color($color) {
+  $text-color: $white;
+
+  @if $color == $amber {
+    $text-color: $black;
+  } @else if $color == $black {
+    $text-color: $white;
+  } @else if $color == $cyan {
+    $text-color: $black;
+  } @else if $color == $deep-orange {
+    $text-color: $white;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $grey {
+    $text-color: $black;
+  } @else if $color == $light-blue {
+    $text-color: $black;
+  } @else if $color == $light-green {
+    $text-color: $black;
+  } @else if $color == $green {
+    $text-color: $black;
+  } @else if $color == $lime {
+    $text-color: $black;
+  } @else if $color == $orange {
+    $text-color: $black;
+  } @else if $color == $white {
+    $text-color: $black;
+  } @else if $color == $yellow {
+    $text-color: $black;
+  } @else {
+    @if lightness($color) < 50% {
+      $text-color: $white;
+    } @else {
+      $text-color: $black;
+    }
+  }
+
+  @return $text-color;
+}

data/app/assets/stylesheets/codelation/mixins/button.scss

@@ -0,0 +1,34 @@
+@mixin button($background-color: color($grey, 100), $font-color: $grey, $active-background-color: $accent-color, $active-font-color: text-color($accent-color)) {
+  background-image: linear-gradient(to bottom, $background-color, darken($background-color, 8%));
+  border: 0;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.14902) 0 0 0 1px inset;
+  color: $font-color;
+  display: inline-block;
+  font-size: 11px;
+  height: 26px;
+  line-height: 25px;
+  margin-bottom: 4px;
+  outline: none;
+  padding: 0 12px;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  i {
+    font-size: 13px;
+    line-height: 11px;
+    margin-right: 2px;
+  }
+
+  &:hover {
+    background-image: linear-gradient(to bottom, lighten($background-color, 5%), darken($background-color, 3.5%));
+    color: $font-color;
+  }
+
+  &:active {
+    background-image: linear-gradient(to bottom, lighten($active-background-color, 3%), darken($active-background-color, 5%));
+    color: $active-font-color;
+  }
+}

data/app/assets/stylesheets/codelation/mixins/center_children.scss

@@ -0,0 +1,9 @@
+// Centers child elements horizontally and vertically without needing
+// to set the height and width of the child elements using flexbox.
+@mixin center-children {
+  @include align-content(center);
+  @include align-items(center);
+  @include display(flex);
+  @include flex-direction(column);
+  @include justify-content(center);
+}

data/app/assets/stylesheets/codelation/mixins/has_cards.scss

@@ -0,0 +1,36 @@
+// Sets up a element and its child elements with the flexbox properties needed
+// to have the given number of columns with optional gutters or margins.
+$mobile-breakpoint: 768px !default;
+
+@mixin has-cards($columns, $margin: 0) {
+  @include align-content(flex-start);
+  @include align-items(stretch);
+  @include display(flex);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+  @include justify-content(space-around);
+  column-count: $columns; // Used as a reference for JavaScript functions
+  padding: $margin 0 0 $margin;
+
+  > * {
+    @include flex(1 1 auto);
+    margin: 0 $margin $margin 0;
+    width: (1 / $columns) * 85%;
+
+    &:empty {
+      margin-bottom: 0;
+      margin-top: 0;
+      visibility: hidden;
+    }
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    > * {
+      width: 100%;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/codelation/mixins/has_columns.scss

@@ -0,0 +1,51 @@
+// Sets up a element and its child elements with the flexbox properties needed
+// to have the given number of columns with an optional gutter value.
+$mobile-breakpoint: 768px !default;
+
+@mixin has-columns($columns, $gutter: 0) {
+  @include align-content(stretch);
+  @include align-items(stretch);
+  @include display(flex);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+  @include justify-content(space-around);
+  column-count: $columns; // Used as a reference for JavaScript functions
+  margin: 0;
+  padding: 0;
+
+  > * {
+    @include flex(1 1 auto);
+    margin: 0;
+    width: (1 / $columns) * 85%;
+
+    @if $gutter > 0 {
+      margin-right: $gutter;
+
+      &:nth-child(#{$columns}n) {
+        margin-right: 0;
+      }
+    }
+
+    &:empty {
+      margin-bottom: 0;
+      margin-top: 0;
+      visibility: hidden;
+    }
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    > * {
+      margin-bottom: $gutter;
+      margin-right: 0;
+      width: 100%;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/codelation.scss

@@ -0,0 +1,5 @@
+// A collection of mixins by Codelation
+// https://codelation.com
+
+@import "codelation/functions/**/*";
+@import "codelation/mixins/**/*";

data/lib/codelation_assets/version.rb

@@ -0,0 +1,3 @@
+module CodelationAssets
+  VERSION = "0.0.1"
+end

data/lib/codelation_assets.rb

@@ -0,0 +1,7 @@
+require "rails/engine"
+
+module CodelationAssets
+  class Engine < ::Rails::Engine
+    # Including an Engine tells Rails that this gem contains assets
+  end
+end

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: codelation_assets
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Brian Pattison
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-01-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A collection of Sass mixins and JavaScript helpers used by Codelation
+  for building awesome Rails apps quickly.
+email:
+- brian@brianpattison.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/codelation.js
+- app/assets/javascripts/codelation/app.js
+- app/assets/javascripts/codelation/components/columns.js
+- app/assets/stylesheets/codelation.scss
+- app/assets/stylesheets/codelation/functions/color.scss
+- app/assets/stylesheets/codelation/functions/text-color.scss
+- app/assets/stylesheets/codelation/mixins/button.scss
+- app/assets/stylesheets/codelation/mixins/center_children.scss
+- app/assets/stylesheets/codelation/mixins/has_cards.scss
+- app/assets/stylesheets/codelation/mixins/has_columns.scss
+- lib/codelation_assets.rb
+- lib/codelation_assets/version.rb
+homepage: https://github.com/codelation/codelation_assets
+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.5.1
+signing_key: 
+specification_version: 4
+summary: A collection of Sass mixins and JavaScript helpers.
+test_files: []