codelation_assets 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8471ba4e0412a2eb886441917e98998382df5a70
-  data.tar.gz: f81588591520e9f2d691a0aca6ff212be7f1c8bd
+  metadata.gz: 99d0048b807a011e81c8237d7ad960557745f504
+  data.tar.gz: c0ba29d216ecd9a2ce69a24305ae368cd2162089
 SHA512:
-  metadata.gz: b03f53088d94d8423daea79a1c955d23c2d2e5b5d043afc281c99efc3b0cf07720e0c3480d3265ea8360b271412cf2a5c3beaa69798b2f79de115fad620cd889
-  data.tar.gz: fe5027944440fd636ea101daba7a1248d5fe6ae1822b55be1bd979717cf6d24e4033810bddecedb3f87e012d19d04beaa17a2b28411a49951ee7fc16ccfc5016
+  metadata.gz: 89f802369ab7a1cced4c97fb2a1da09325ee60d022c0c10245bdc5245e2bf864038a79eb4d232443a9eb603a29a622f24926efe7348b7269bcdd2316717c0768
+  data.tar.gz: 4391b62d4d6b92a07e78e12407e669e321db9018cf101b4aa1246a25f0cb09f78cc84bcd7634df3151c9dd18274ee5a5d9513894496c58fa724e5a0e0f0952a6

data/README.md

@@ -27,6 +27,75 @@ Add to `application.js`:
 //= require codelation
 ```
 
+#### 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
+
+By using `App.register('component')`, you can fire some JavaScript on every page load.
+
+The function passed to `enter` will fire for `$(document).on('ready page:load')`, so
+it will work with or without Turbolinks.
+
+The function passed to `exit` will fire for `$(document).on('page:before-unload')`,
+so it will only work with Turbolinks, but will not be needed when not using Turbolinks.
+
+Example:
+
+```javascript
+(function() {
+  "use strict"
+
+  var body, links;
+
+  App.register('component').enter(function() {
+    body = $('body');
+    links = $('a[href]:not([href^="#"]):not([target="_blank"])');
+
+    // Add 'loading' class to the body when a link is clicked,
+    // add add 'active' class to the clicked link.
+    links.click(function() {
+      links.removeClass('active');
+      body.addClass('loading');
+      $(this).addClass('active');
+    });
+  }).exit(function() {
+    // Remove the classes when the body is unloaded
+    body.removeClass('loading');
+    links.removeClass('active');
+  });
+})();
+```
+
+##### 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.
+
+Example:
+
+```javascript
+(function() {
+  "use strict"
+
+  var refreshInterval;
+
+  // This will only fire when entering and exiting the `AwesomeStatsController#index` page.
+  App.register('awesome-stats.index').enter(function() {
+    // Poll a URL for new data at a set interval
+    refreshInterval = setInterval(pollStats, 5000);
+  }).exit(function() {
+    // Clear the interval when the page is unloaded
+    clearInterval(refreshInterval);
+  });
+})();
+```
+
+You can also use `App.register('[controller-name]')` to fire JavaScript on all pages
+for the given controller name.
+
 ### Sass
 
 Add to `application.scss`:
@@ -91,11 +160,62 @@ A good use case is centering an image of unknown height inside a container with
 
 ###### has-cards($columns, $margin: 0)
 
-TODO: Write description/usage
+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
+and adds padding around the outside of the cards. Useful for creating a dashboard widgets look.
+
+Example:
+
+```html
+<div class="dashboard">
+  <div class="card"><div>
+  <div class="card"><div>
+  <div class="card"><div>
+  <div class="card"><div>
+</div>
+```
+
+```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.
+// The cards in each row will stretch to be the same height.
+.dashboard {
+  @include has-cards(2, 1em);
+  background-color: #ccc;
+
+  .card {
+    background-color: #fff;
+    border-radius: 2px;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+```
 
 ###### has-columns($columns, $gutter: 0)
 
-TODO: Write description/usage
+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!
+
+Example:
+
+```html
+<div class="row">
+  <div class="column"><div>
+  <div class="column"><div>
+  <div class="column"><div>
+</div>
+```
+
+```scss
+// This will create a layout 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);
+}
+```
 
 ## Contributing
 

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

@@ -13,7 +13,6 @@ $mobile-breakpoint: 767px !default;
 
   > * {
     @include flex(1 1 auto);
-    margin: 0;
     width: (1 / $columns) * 85%;
 
     @if $gutter > 0 {

data/lib/codelation_assets/version.rb

@@ -1,3 +1,3 @@
 module CodelationAssets
-  VERSION = "0.1.1".freeze
+  VERSION = "0.1.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codelation_assets
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Brian Pattison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-01-20 00:00:00.000000000 Z
+date: 2016-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bourbon