codelation_assets 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 17a1d079890929737b3a6ec0fb8b1f857e21e9d6
-  data.tar.gz: 900a2c74873dfcbd6105919a11370af37adbe920
+  metadata.gz: fdebd262466fc70df3328ab7c43c7c1b07dd4f45
+  data.tar.gz: 0db96a3e23a92e411bf20918b5b8936fd644d144
 SHA512:
-  metadata.gz: 1c577e9e4ede904fecfee1004622153f3813f341482320b0ab809689affbb155f498091fee5f58122d98bda31b902b6dcd4733abf1c6c1f906721f3dca4664e3
-  data.tar.gz: 2eb0b031f14ac7357d061f7ff4788340338cb96f0307bba870952a1af8f2b6e54eac971e8de4045487291ea03d3212ddd6751aa000be542cc94057c100d67dbd
+  metadata.gz: a7e9b3740c57a73271d489624e0fb96e042f3f4643df49642fb0ecfba1e2bf42cfacafe3928bb9cb8e0baa7603279e125840f03bda30a9fd60259381fa1cbe86
+  data.tar.gz: d96524b63072206cffb7dbe8011dd63928adb3a32da0d1fde722e5b0b8553632071be0ccbe32d154158668ec204fb3bbfae0fd40d5da9f6f34984f303d1e192a

data/app/assets/stylesheets/codelation.scss

@@ -1,5 +1,11 @@
-// A collection of mixins used in Codelation Rails projects
+// A collection of Sass functions and mixins used by Codelation
 // https://codelation.com
+
+// Used to set the max-width with the outer-container mixin
+$max-width: 1024px !default;
+
+// Used for has-cards, has-columns, and has-grid mixins. When the
+// viewport reaches the mobile-breakpoint, the columns will be stacked.
 $mobile-breakpoint: 767px !default;
 
 @import "bourbon/bourbon";

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

@@ -1,3 +1,5 @@
+// Used to create create columns in a row that span the width of multiple columns in another row.
+// See the readme for more details on usage.
 @mixin col-span($span: $columns of $total-columns, $gutter: 0) {
   $columns: nth($span, 1);
   $container-columns: nth($span, 3);

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

@@ -1,6 +1,6 @@
 // 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.
-@mixin has-cards($columns, $margin: 0) {
+@mixin has-cards($columns, $margin: 0, $column-class: "auto", $mobile: "auto") {
   @include align-content(flex-start);
   @include align-items(stretch);
   @include display(flex);
@@ -10,7 +10,13 @@
   column-count: $columns; // Used as a reference for JavaScript functions
   padding: $margin 0 0 $margin;
 
-  > *:not(script) {
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
     @include flex(1 1 auto);
     margin: 0 $margin $margin 0;
     width: (1 / $columns) * 85%;
@@ -22,12 +28,15 @@
     }
   }
 
-  @media (max-width: $mobile-breakpoint) {
-    > *:not(script) {
-      width: 100%;
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      #{$column-selector} {
+        width: 100%;
 
-      &:empty {
-        display: none;
+        &:empty {
+          display: none;
+        }
       }
     }
   }

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

@@ -1,6 +1,6 @@
 // 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.
-@mixin has-columns($columns: 0, $gutter: 0, $grow: true) {
+@mixin has-columns($columns: 0, $gutter: 0, $column-class: "auto", $mobile: "auto", $grow: true) {
   @include align-content(stretch);
   @include align-items(stretch);
   @include display(flex);
@@ -8,7 +8,13 @@
   @include flex-wrap(nowrap);
   @include justify-content(flex-start);
 
-  > *:not(script) {
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
     @if $grow {
       @include flex(1 1 auto);
     }
@@ -41,17 +47,19 @@
     }
   }
 
-  // Stack columns when the mobile breakpoint is set
-  @media (max-width: $mobile-breakpoint) {
-    @include flex-wrap(wrap);
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      @include flex-wrap(wrap);
 
-    > *:not(script) {
-      margin-bottom: $gutter;
-      margin-right: 0;
-      width: 100%;
+      #{$column-selector} {
+        margin-bottom: $gutter;
+        margin-right: 0;
+        width: 100%;
 
-      &:last-child {
-        margin-bottom: 0;
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
   }

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

@@ -1,7 +1,7 @@
 // Sets up a element and its child elements with the flexbox properties needed
 // to have the given number of columns per row with multiple rows in the container
 // and an optional gutter value  that will be used between columns and rows.
-@mixin has-grid($columns, $gutter: 0) {
+@mixin has-grid($columns, $gutter: 0, $column-class: "auto", $mobile: "auto") {
   @include align-content(stretch);
   @include align-items(stretch);
   @include display(flex);
@@ -10,7 +10,13 @@
   @include justify-content(space-around);
   column-count: $columns; // Used as a reference for JavaScript functions
 
-  > *:not(script) {
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
     @include flex(1 1 auto);
 
     @if $gutter == 0 {
@@ -52,19 +58,22 @@
     }
   }
 
-  @media (max-width: $mobile-breakpoint) {
-    > *:not(script) {
-      margin-bottom: $gutter;
-      margin-right: 0;
-      margin-top: 0;
-      width: 100%;
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      #{$column-selector} {
+        margin-bottom: $gutter;
+        margin-right: 0;
+        margin-top: 0;
+        width: 100%;
 
-      &:last-of-type {
-        margin-bottom: 0;
-      }
+        &:last-of-type {
+          margin-bottom: 0;
+        }
 
-      &:empty {
-        display: none;
+        &:empty {
+          display: none;
+        }
       }
     }
   }

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

@@ -1,5 +1,3 @@
-$max-width: 1024px !default;
-
 // Sets the max width of a container and centers it by setting margin-left and
 // margin-right to auto. The max width can be overridden by defining $max-width.
 // A left and right padding of 12px is added by default.

data/lib/codelation_assets/version.rb

@@ -1,3 +1,3 @@
 module CodelationAssets
-  VERSION = "0.4.0".freeze
+  VERSION = "0.5.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codelation_assets
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Brian Pattison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-09 00:00:00.000000000 Z
+date: 2016-07-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -177,9 +177,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.3
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: A collection of Sass mixins and JavaScript helpers.
 test_files: []
-has_rdoc: