codelation_assets 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ae441221f4a9a0c8cda9dbd4abd7c649d9b29aa4
-  data.tar.gz: be29d55c96cae3c8796c76ec4896666f6954d8aa
+  metadata.gz: 93b9982fe8dba044d6f5c8d98fdba106bae98808
+  data.tar.gz: e7897b29408785550feaa738b9b35f0e12055f2e
 SHA512:
-  metadata.gz: af1a16a7e9d768bfc7fe7ae29f15950bc0a128363207673ff307e2958ccd0084aaa083575b9aadd8f217e78c09e27573ab8e6ab4f884aa24cc211a1b134f85f6
-  data.tar.gz: 722b01406e3afbacd8025a1537e7ed37ddb690f70c981a2895c95cb4b6611b656a609fee178d09d1345d1bc578cc5faa0fea10f7392c642cbf347cfbcc84d370
+  metadata.gz: 6456d7aa5eee3f8cb9334cb5e7d186d9e293dc9c65aaf1cb46be47d7f00fc527257ba6da613e1315cc3011d99bf9d8c2dd004f885ece3529343cdebd90b489be
+  data.tar.gz: 3948158982df39b3f5c9a46807e052e42976e31fd5e63048b651885da3184c0544cd4970dd77ad9269f8b7c7bc38d5e6aa6dfd92c4a5fbf6d1d9b4392d61df66

data/README.md

@@ -17,9 +17,7 @@ Install the Codelation Assets gem with Bundler:
 bundle install
 ```
 
-## Usage
-
-### JavaScript
+## JavaScript
 
 Add to `application.js`:
 
@@ -27,12 +25,12 @@ Add to `application.js`:
 //= require codelation
 ```
 
-#### App Functions
+### App Functions
 
 The `App` object is used in Codelation's Rails projects to register components that
 need to be initialized on every page and to sprinkle in JavaScript on specific pages.
 
-##### Registering JavaScript Components
+#### Registering JavaScript Components
 
 By using `App.register('component')`, you can fire some JavaScript on every page load.
 
@@ -69,11 +67,14 @@ Example:
 })();
 ```
 
-##### Registering Per Page JavaScript Snippets
+#### Registering Per Page JavaScript Snippets
 
 You can use `App.register('[controller-name].[action-name]')` to fire some JavaScript any time
 that page is loaded and unloaded. The `enter` and `exit` functions work the same as components.
 
+This assumes you are using a helper to set the body class to include the dasherized controller
+name and dasherized action.
+
 Example:
 
 ```javascript
@@ -96,7 +97,7 @@ Example:
 You can also use `App.register('[controller-name]')` to fire JavaScript on all pages
 for the given controller name.
 
-### Sass
+## Sass
 
 Add to `application.scss`:
 
@@ -104,18 +105,18 @@ Add to `application.scss`:
 @include "codelation";
 ```
 
-#### Included Sass/CSS Libraries
+### Included Sass/CSS Libraries
 
 - [Bourbon](http://bourbon.io) - A simple and lightweight mixin library for Sass.
 - [Normalize.css](https://necolas.github.io/normalize.css/) - A modern, HTML5-ready alternative to CSS resets
 
-#### Additional Functions and Mixins
+### Additional Functions and Mixins
 
 A handful of useful Sass functions and mixins written by Codelation are also included.
 
-##### Sass Functions
+#### Sass Functions
 
-###### color($color, $number: 500)
+##### color($color, $number: 500)
 
 The [Google Material Design Colors](https://www.google.com/design/spec/style/color.html) come in handy when you
 need a color for creating application interfaces. They are a much better alternative to CSS's named colors
@@ -131,34 +132,34 @@ Examples:
 
 // You can also use the different shades available
 .error {
-  color: ($red, 700);
+  color: color($red, 700);
 }
 
 // @see https://www.google.com/design/spec/style/color.html
 .success {
-  color: ($green, 600);
+  color: color($green, 600);
 }
 ```
 
-###### text-color($color)
+##### text-color($color)
 
 This function is useful for creating mixins where you have a background color as a variable
 and need to display either black or white text on top of the given color.
 
-##### Sass Mixins
+#### Sass Mixins
 
-###### button($background-color: color($grey, 100), $font-color: $grey, $active-background-color: $accent-color, $active-font-color: text-color($accent-color))
+##### button($background-color: color($grey, 100), $color: color($grey, 800), $active-background-color: $accent-color, $active-color: text-color($accent-color))
 
-By default, this will create a plain grey button. It is close to the default button in some browsers, but will
-actually be rendered the same across all browsers. Useful for applications that need to be obvious about
-a button looking like a button.
+By default, `@include button;` will create a plain grey button. It looks a lot like the default button in some
+browsers, but it will be rendered to look the same across all browsers. Useful for applications that need to
+be obvious about a button looking like a button.
 
-###### center-children
+##### center-children
 
 This mixin uses flexbox to center the child elements horizontally and vertically inside the element.
 A good use case is centering an image of unknown height inside a container with a fixed height.
 
-###### has-cards($columns, $margin: 0)
+##### has-cards($columns, $margin: 0)
 
 This mixin uses flexbox to create a cards layout like that used by Google Material Design. The
 mixin is used on the container element. This will create a fixed margin between each card element
@@ -166,6 +167,8 @@ and adds padding around the outside of the cards. Useful for creating a dashboar
 
 Example:
 
+**HTML**
+
 ```html
 <div class="dashboard">
   <div class="card"><div>
@@ -175,6 +178,8 @@ Example:
 </div>
 ```
 
+**SCSS**
+
 ```scss
 // This will create a cards layout with two cards per row.
 // There will be a fixed margin of 1em between and around the cards.
@@ -191,23 +196,27 @@ Example:
 }
 ```
 
-###### has-columns($columns, $gutter: 0)
+##### has-columns($columns, $gutter: 0)
 
-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. There is no need to set a margin-right of 0 to the nth-child
-or anything like that. Flexbox rules!
+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.
 
 Example:
 
+**HTML**
+
 ```html
 <div class="row">
-  <div class="column"><div>
-  <div class="column"><div>
-  <div class="column"><div>
+  <div>Column 1<div>
+  <div>Column 2<div>
+  <div>Column 3<div>
 </div>
 ```
 
+**SCSS**
+
 ```scss
 // This will create a layout with three columns.
 // The columns will all fill the container height.
@@ -217,6 +226,78 @@ Example:
 }
 ```
 
+###### col-span($columns of $container-columns, $gutter: 0)
+
+When the `has-columns` mixin is used properly, you can create columns in a row that
+span the width of multiple columns in another row. In order to use the `col-span`
+mixin, you must use a percentage value or zero for your gutter width. There is no way
+to have a fixed gutter width, flexible column widths, and match up with the columns
+in another row.
+
+Example:
+
+**HTML**
+
+```html
+<div class="row">
+  <div>Column 1<div>
+  <div>Column 2<div>
+  <div>Column 3<div>
+</div>
+<div class="row">
+  <div class="wide-column">Column 4<div>
+  <div>Column 5<div>
+</div>
+```
+
+**SCSS**
+
+```scss
+.row {
+  @include has-columns(3, 3%);
+}
+
+// Column 4 will span across two columns. Its left side will match up with
+// column 1's left side, and its right side will match up with column 2's right
+// side. Column 5's right margin will be set to 0 without any extra SCSS.
+.wide-column {
+  @include col-span(2 of 3, 3%)
+}
+```
+
+##### has-grid($columns, $gutter: 0)
+
+This mixin uses flexbox to create a grid layout with an unknown number of child elements.
+Each child element will have the same width and they will stretch to be the same height.
+The gutter size is the width between each column and the height between each row. Unlike
+the `has-cards` mixin, there will not be a margin around the child elements, only between.
+This mixin is perfect for a product category page.
+
+Example:
+
+**HTML**
+
+```html
+<div class="products">
+  <div>Product 1<div>
+  <div>Product 2<div>
+  <div>Product 3<div>
+  <div>Product 4<div>
+  <div>Product 5<div>
+</div>
+```
+
+**SCSS**
+
+```scss
+// Products 1 - 3 will be on the first row and there will be a margin of 1em between them.
+// Products 4 & 5 will be on the second row and will match up with products 1 & 2.
+// There will be a margin of 1em between the rows.
+.products {
+  @include has-grid(3, 1em);
+}
+```
+
 ## Contributing
 
 1. Fork it

data/app/assets/javascripts/codelation/components/{has_columns.js → has_grid.js}

@@ -1,7 +1,7 @@
 (function() {
   "use strict";
 
-  // Used with the `has-cards` and `has-columns` Sass mixins,
+  // Used with the `has-grid` and `has-cards` Sass mixins,
   // it appends an extra span element for each missing column
   // based on the number of columns defined in the CSS.
   App.register('component').enter(function() {

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

@@ -0,0 +1,14 @@
+@mixin col-span($span: $columns of $total-columns, $gutter: 0) {
+  $columns: nth($span, 1);
+  $container-columns: nth($span, 3);
+
+  @if ($gutter != 0 and unit($gutter) != "%") {
+    @error "The col-span mixin can only be used if there is no gutter or the gutter's unit is %";
+  }
+
+  $single-column-width: (100% - ($gutter * ($container-columns - 1))) / $container-columns;
+  $spanned-width: $single-column-width * $columns;
+  $spanned-gutters-width: $gutter * ($columns - 1);
+
+  width: $spanned-width + $spanned-gutters-width;
+}

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

@@ -1,7 +1,5 @@
 // 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: 767px !default;
-
 @mixin has-cards($columns, $margin: 0) {
   @include align-content(flex-start);
   @include align-items(stretch);

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

@@ -1,7 +1,5 @@
 // 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: 767px !default;
-
 @mixin has-columns($columns, $gutter: 0) {
   @include align-content(stretch);
   @include align-items(stretch);
@@ -9,40 +7,44 @@ $mobile-breakpoint: 767px !default;
   @include flex-direction(row);
   @include flex-wrap(wrap);
   @include justify-content(space-around);
-  column-count: $columns; // Used as a reference for JavaScript functions
 
   > * {
     @include flex(1 1 auto);
-    width: (1 / $columns) * 85%;
+
+    @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 {
       margin-right: $gutter;
 
-      &:nth-child(#{$columns}n) {
+      // Remove the right margin for the last column in a row
+      &:last-child {
         margin-right: 0;
       }
     }
-
-    &:empty {
-      margin-bottom: 0;
-      margin-top: 0;
-      visibility: hidden;
-    }
   }
 
+  // Stack columns when the mobile breakpoint is set
   @media (max-width: $mobile-breakpoint) {
     > * {
       margin-bottom: $gutter;
       margin-right: 0;
       width: 100%;
 
-      &:last-of-type {
+      &:last-child {
         margin-bottom: 0;
       }
-
-      &:empty {
-        display: none;
-      }
     }
   }
 }

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

@@ -0,0 +1,70 @@
+// 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) {
+  @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
+
+  > * {
+    @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;
+    }
+
+    // Remove the right margin for the last column in a row
+    // and the top margin for each column in the first row
+    @if $gutter > 0 {
+      margin-right: $gutter;
+      margin-top: $gutter;
+
+      @for $i from 1 through $columns {
+        &:nth-child(#{$i}) {
+          margin-top: 0;
+        }
+      }
+
+      &:nth-child(#{$columns}n) {
+        margin-right: 0;
+      }
+    }
+
+    // The JavaScript component will add empty spans to keep a uniform column width
+    &: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

@@ -1,5 +1,6 @@
 // A collection of mixins used in Codelation Rails projects
 // https://codelation.com
+$mobile-breakpoint: 767px !default;
 
 @import "bourbon";
 @import "codelation/functions/**/*";

data/lib/codelation_assets/version.rb

@@ -1,3 +1,3 @@
 module CodelationAssets
-  VERSION = "0.2.2".freeze
+  VERSION = "0.3.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codelation_assets
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Brian Pattison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-01-22 00:00:00.000000000 Z
+date: 2016-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bourbon
@@ -65,15 +65,17 @@ files:
 - Rakefile
 - app/assets/javascripts/codelation.js
 - app/assets/javascripts/codelation/app.js
-- app/assets/javascripts/codelation/components/has_columns.js
+- app/assets/javascripts/codelation/components/has_grid.js
 - app/assets/stylesheets/_normalize.scss
 - app/assets/stylesheets/codelation.scss
 - app/assets/stylesheets/codelation/functions/color.scss
-- app/assets/stylesheets/codelation/functions/text-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/col_span.scss
 - app/assets/stylesheets/codelation/mixins/has_cards.scss
 - app/assets/stylesheets/codelation/mixins/has_columns.scss
+- app/assets/stylesheets/codelation/mixins/has_grid.scss
 - lib/codelation_assets.rb
 - lib/codelation_assets/version.rb
 homepage: https://github.com/codelation/codelation_assets