codelation_assets 0.3.4 → 0.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6ca3c992927b6e2d6064b7cd25b3c1928e5f83af
-  data.tar.gz: 19c3ca3bae112da86dfbc5b653f0c94537631dca
+  metadata.gz: e93bec66b6bcb13f4f656cccd2072dfb242ca3e9
+  data.tar.gz: 3476ce2acb72606b646f38479026b36de2fd1518
 SHA512:
-  metadata.gz: 80bfdb64805b7d831f07e5a7c5b89613423f6d2e02d876aed4ac53bd0bf50b458f735c62a8b2d16ac9c5992aa2c0f04af30191d8c218f20f5959f82a800d8647
-  data.tar.gz: 3726a2faa1f0d4dea5294704e5299297d86cc38c8e323bce81b8c19f2bb0d3b3910fc84477647b7bf5f9e1914cb7b1ce16309ab35e532966874de1bd80e081bc
+  metadata.gz: e73952871559aa7db17f2926787ffcb38bd356ee9680b19c44afc1531b4a2ff6f3f3be38b234d6e840c37db55b89949c016bdc6b9e71bb739e32d0034bd9db82
+  data.tar.gz: c59beab4ab272892e9f66724b477f40966cf65edaa7e33e5ea145fb1eaf8cc27c1a709564992506827e23d54da389aef034ad71e7379c6b49b3c1f4daecff1a6

data/README.md

@@ -196,12 +196,16 @@ Example:
 }
 ```
 
-##### has-columns($columns, $gutter: 0)
+##### has-columns($columns: 0, $gutter: 0, $grow: true)
 
 This mixin uses flexbox to create a layout with the specified number of columns that
 stretch to fill the container's height. The given gutter size will the margin between
-the columns. The container should be a single row with a known number of child
-elements. Use `has-grid` if there is an unknown number of child elements.
+the columns. The container must be a single row of columns.
+
+When the column count is given, the columns will all be the same width. If no column
+count is given, the row will behave like a table row. The entire width will be used
+and each column width will be determined by its content. `$grow` can be set to false
+if you don't want the columns to take up the entire width of the container.
 
 Example:
 
@@ -213,17 +217,33 @@ Example:
   <div>Column 2<div>
   <div>Column 3<div>
 </div>
+
+<div class="table">
+  <div>Column 1</div>
+  <div>Column 2</div>
+  <div>Column 3</div>
+  <div>Column 4</div>
+  <div>Column 5</div>
+</div>
 ```
 
 **SCSS**
 
 ```scss
-// This will create a layout with three columns.
+// This will create a row with three columns.
 // The columns will all fill the container height.
 // There will be a fixed gutter of 12px between the columns.
 .row {
   @include has-columns(3, 12px);
 }
+
+// This will create a row with five columns.
+// The columns will all fill the container height and width.
+// The width of each column will be determined by its content.
+// There will be a fixed gutter of 10px between the columns.
+.table {
+  @include has-columns($gutter: 10px);
+}
 ```
 
 ###### col-span($columns of $container-columns, $gutter: 0)

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

@@ -1,28 +1,34 @@
 // 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, $gutter: 0) {
+@mixin has-columns($columns: 0, $gutter: 0, $grow: true) {
   @include align-content(stretch);
   @include align-items(stretch);
   @include display(flex);
   @include flex-direction(row);
-  @include flex-wrap(wrap);
-  @include justify-content(space-around);
+  @include flex-wrap(nowrap);
+  @include justify-content(flex-start);
 
   > * {
-    @include flex(1 1 auto);
+    @if $grow {
+      @include flex(1 1 auto);
+    }
 
-    @if $gutter == 0 {
-      // If there is no gutter, we don't need to do anything other
-      // than split up the columns evenly.
-      width: 100% / $columns;
-    } @else if unit($gutter) == "px" or unit($gutter) == "em" {
-      // If there is a fixed gutter size, we need to trick the columns into
-      // being close to the right width and stretching to fill in the rest.
-      width: 85% / $columns;
-    } @else if unit($gutter) == "%" {
-      // If the gutter size is a percentage of the width, we can use the percentage
-      // to calculate the width of the columns as a percentage as well.
-      width: (100% - ($gutter * ($columns - 1))) / $columns;
+    // We only want to set the column width if more than 1 column was specified
+    // and we're looking to fill the container's width.
+    @if $grow and $columns > 1 {
+      @if $gutter == 0 {
+        // If there is no gutter, we don't need to do anything
+        // other than split up the columns evenly.
+        width: 100% / $columns;
+      } @else if unit($gutter) == "px" or unit($gutter) == "em" {
+        // If there is a fixed gutter size, we need to trick the columns into
+        // being close to the right width and stretching to fill in the rest.
+        width: 85% / $columns;
+      } @else if unit($gutter) == "%" {
+        // If the gutter size is a percentage of the width, we can use the percentage
+        // to calculate the width of the columns as a percentage as well.
+        width: (100% - ($gutter * ($columns - 1))) / $columns;
+      }
     }
 
     @if $gutter > 0 {
@@ -37,6 +43,8 @@
 
   // Stack columns when the mobile breakpoint is set
   @media (max-width: $mobile-breakpoint) {
+    @include flex-wrap(wrap);
+
     > * {
       margin-bottom: $gutter;
       margin-right: 0;

data/lib/codelation_assets/version.rb

@@ -1,3 +1,3 @@
 module CodelationAssets
-  VERSION = "0.3.4".freeze
+  VERSION = "0.3.5".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codelation_assets
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.3.5
 platform: ruby
 authors:
 - Brian Pattison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-16 00:00:00.000000000 Z
+date: 2016-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -182,3 +182,4 @@ signing_key:
 specification_version: 4
 summary: A collection of Sass mixins and JavaScript helpers.
 test_files: []
+has_rdoc: