layout-tools-for-susy 0.1.7 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0a06f492038c161c9160dd02d377f3f57c1821d8
-  data.tar.gz: 96e79b7ee7ab98a9640aad024d18f0d30c166bcc
+  metadata.gz: 8b75bf3940e1f7a74739b2ee94da01f5d2586eb3
+  data.tar.gz: aab3d23f999e15af17c248903e880fa91fcb1380
 SHA512:
-  metadata.gz: 94e8d596e65e91d97e1035fa91da0f9f6c3213fd37da00b0391f59a1a57d056e50d94733f52ccc905214b1a55418014c1e243e37cb3ec8ad8e2a928aa6cf1a8e
-  data.tar.gz: 7ce8f63259e0184558376f347d38d1f17a5458f1c844928f8a4cae444e49648d94087e832f4f5c437b2d6a0d129d30377bdc4a0f9aee934668243bccac43dc42
+  metadata.gz: 99f46292aa593ddd4c1390c05dc455e7d2b36f2b4700b89232151ef35f8bb68e1bd8f2cdd2c9a5ed8e0691f8a6f7a0013c0fc0352b7a8b663dc6eda085a77c97
+  data.tar.gz: b20b1373b056401a28fc7503d90c2062d3ad55f9c9b922b10fe9a9b411e1c60ab5d19b0e185c0fd0147e49dd51227616b8e6093d420653a2df8a0a794ee7ab18

data/README.md

@@ -32,7 +32,7 @@ $ npm install layout-tools-for-susy --save-dev
 This installs layout tools and Susy. Include tools in your stylesheets like this:
 ```scss
 // file: src/stylesheets/styles.scss
-@import '../../node_modules/susy/sass/susy',
+@import '../../node_modules/layout-tools-for-susy/node_modules/susy/sass/susy',
         '../../node_modules/layout-tools-for-susy/stylesheets/layout-tools-for-susy';
 ```
 
@@ -139,7 +139,7 @@ $layouts: (
 @include layout-init($layouts);
 
 ```
-The root properties of the map $layouts represent the different layout contexts. Layout contexts may be layout variations depending on breakpoints or layout settings specific for e.g. a certain template. There are some important settings that will be defined by default if you don’t set them yourself. The `default` layout will be set up by—you guessed it—default with the properties `susy`—containing Susy’s default settings—and `base`—setting a `base__font-size` and `base__line-height` value. To implement your custom layouts, you have to create your settings map like shown above overriding the defaults and adding additional layout specifications.
+The root properties of the map $layouts represent the different layout contexts. Layout contexts may be layout variations depending on breakpoints or layout settings specific for e.g. a certain template. There are some important settings that will be defined by default if you don’t set them yourself. The `default` layout will be set up by—you guessed it—default with the properties `susy`—containing Susy’s default settings—and `base`—setting a `base__font-size` and `base__line-height` value. To implement your custom layouts, you have to create your settings map like shown above overriding the defaults and adding additional layout specifications. 
 
 #### Using layout contexts
 The `default` layout context is the most basic. It will be used everywhere where no other layout context is set (by using the `layout-use` mixin). All other layout contexts extend the `default` context and thus override its settings. If you want to extend a specific context, you can define it using the `extends` property within a layout context’s definition map. In the example above the layout context `L` extends `M`. That means the settings and values you will be working with in the layout context `L` are the result from first merging `M` into `default` and then `L` into the first merge’s result. So within the context of `L` the value of `base__font-size` will be 18px. This behaviour allows you create a sophisticated system of layout settings through controlled inheritance of settings and values.
@@ -224,7 +224,7 @@ $my-component: (
 
 // Use styles
 .my-component {
-
+  
   &__label {
     // Retrieve settings from current layout context
     $label__font-size: layout-get(my-component, label__font-size);
@@ -264,7 +264,7 @@ $layouts: (
       ...
     ),
     breakpoint: (
-      (
+      ( 
         min-width: 480px,
         max-width: 800px,
         min-height: 650px
@@ -308,7 +308,7 @@ As you can see, it's possible to define a single, simple breakpoint through addi
   }
 }
 ```
-That’s it. Easy, isn’t it?
+That’s it. Easy, isn’t it? 
 
 ## More handy helpers
 Layout Tools for Susy come with some more handy helpers.
@@ -343,7 +343,7 @@ body {
 }
 
 .page {
-
+  
   &__header {
     // retrieve font sizes from layout context
     $header__font-size: layout-get(page, header__font-size);
@@ -387,7 +387,7 @@ body {
         }
       }
     }
-  }
+  } 
 }
 ```
 In the example above the ```type-context``` mixin is used to set new local font sizes and line heights as ```em``` values. In contrast to ```type-base``` the base values ```$base__font-size``` and ```$base__line-height``` won’t be altered within the mixins scope. Multiple type contexts can be embedded into each other and the mixin will take track of the relative font sizes and line heights and the necessary calculations.
@@ -429,4 +429,4 @@ background-image: url(const(BG_IMG_PATH) + 'hero_bg.jpg');
 
 ### Tips and tricks
 
-### Contribute
+### Contribute

data/lib/layout-tools-for-susy.rb

@@ -12,6 +12,6 @@ else
 end
 
 module LayoutTools
-  VERSION = "0.1.7"
-  DATE = "2016-01-21"
-end
+  VERSION = "0.2.0"
+  DATE = "2017-06-14"
+end

data/stylesheets/_layout-tools-for-susy.scss

@@ -7,12 +7,25 @@
 @import 'functions/map-set',
         'functions/map-merge-r',
         'functions/list-implode',
+        'functions/list-remove-nth',
         'placeholders/clearfix';
 
 // constants
 @import 'mixins/const',
         'functions/const';
 
+// Cache
+@import 'functions/cache-set',
+        'functions/cache-get',
+        'mixins/cache-set',
+        'functions/cache-push',
+        'mixins/cache-push',
+        'functions/cache-unshift',
+        'mixins/cache-unshift',
+        'functions/cache-nth',
+        'functions/cache-pop',
+        'functions/cache-shift';
+
 // Unit calculations
 @import 'functions/px-to-em',
         'functions/px-to-pc',

data/stylesheets/config/_globals.scss

@@ -1,6 +1,7 @@
 /**
  * Set up layout-relevant globals
  */
+$CACHE: () !global;
 $LAYOUT: () !global;
 $COLORS: () !global;
 $susy: () !global;

data/stylesheets/functions/_cache-get.scss

@@ -0,0 +1,8 @@
+/**
+ * Returns a value for a $key from $CACHE map
+ * @param  {String} $key            Key of the value to be retreived.
+ * @return {Misc}                   Value or false if there’s no value or $key.
+ */
+@function cache-get($key) {
+  @return map-get($CACHE, $key);
+}

data/stylesheets/functions/_cache-nth.scss

@@ -0,0 +1,13 @@
+/**
+ * Returns the nth value from a list at $key from $CACHE map
+ * @param  {String} $key            Key of the list the value is to be retreived from.
+ * @param  {Integer} $index         Index of the value to be retreived.
+ * @return {Misc}                   Value or false if there’s no value at $index.
+ */
+@function cache-nth($key, $index: 1) {
+  $list: cache-get($key);
+  @if (type-of($list) != list) {
+    @return false;
+  }
+  @return nth($list, $index);
+}

data/stylesheets/functions/_cache-pop.scss

@@ -0,0 +1,16 @@
+/**
+ * Removes last value from a list at $key on $CACHE map and returns it
+ * @param  {String} $key            Key of the list on $CACHE map.
+ * @return {Misc}                   Removed value.
+ */
+@function cache-pop($key) {
+  $list: cache-get($key);
+  @if (type-of($list) != list) {
+    @return false;
+  }
+  $index: length($list);
+  $value: nth($list, $index);
+  $new: list-remove-nth($list, $index);
+  $CACHE: cache-set($key, $new) !global;
+  @return $value;
+}

data/stylesheets/functions/_cache-push.scss

@@ -0,0 +1,15 @@
+/**
+ * Pushs a value to a list in $CACHE map.
+ * @param {Map}     $map   Map the value will be set in.
+ * @param {String}  $key   Key the value will be set for.
+ * @param {Misc}    $value Value to be pushed.
+ * @return {map}    Merged map
+ */
+@function cache-push($key, $value) {
+  $list: cache-get($key);
+  @if (type-of($list) != list) {
+    @return false;
+  } 
+  $new: ( $key: join($list, ( $value ), comma) );
+  @return map-merge($CACHE, $new);
+}

data/stylesheets/functions/_cache-set.scss

@@ -0,0 +1,10 @@
+/**
+ * Sets a value in $CACHE map.
+ * @param {Map}     $map   Map the value will be set in.
+ * @param {String}  $key   Key the value will be set for.
+ * @param {Misc}    $value Value to be set.
+ */
+@function cache-set($key, $value) {
+  $new: ( $key: $value );
+  @return map-merge($CACHE, $new);
+}

data/stylesheets/functions/_cache-shift.scss

@@ -0,0 +1,16 @@
+/**
+ * Removes first value from a list at $key on $CACHE map and returns it
+ * @param  {String} $key            Key of the list on $CACHE map.
+ * @return {Misc}                   Removed value.
+ */
+@function cache-shift($key) {
+  $list: cache-get($key);
+  @if (type-of($list) != list) {
+    @return false;
+  }
+  $index: 1;
+  $value: nth($list, $index);
+  $new: list-remove-nth($list, $index);
+  $CACHE: cache-set($key, $new) !global;
+  @return $value;
+}

data/stylesheets/functions/_cache-unshift.scss

@@ -0,0 +1,15 @@
+/**
+ * Prepends a value to a list in $CACHE map.
+ * @param {Map}     $map   Map the value will be set in.
+ * @param {String}  $key   Key of the list the value will be prepended to.
+ * @param {Misc}    $value Value to be prepended.
+ * @return {map}    Merged map
+ */
+@function cache-unshift($key, $value) {
+  $list: cache-get($key);
+  @if (type-of($list) != list) {
+    @return false;
+  } 
+  $new: ( $key: join(( $value ), $list, comma) );
+  @return map-merge($CACHE, $new);
+}

data/stylesheets/functions/_list-implode.scss

@@ -5,14 +5,14 @@
  * @param  {Boolean} $recursive: false      Optionally implode items of type list.
  * @return {String}                         Imploded list as string.
  */
-@function list-implode($list, $separator: '', $recursive: false) {
-  $result: "";
+@function list-implode($list, $separator: '') {
+  $result: null;
   @for $i from 1 through length($list) {
     $e: nth($list, $i);
-    @if (type-of($e) == list and $recursive) {
-      $e: list-implode($e, $separator, $recursive);
+    @if (type-of($e) == list) {
+      $e: list-implode($e, $separator);
     }
-    $result: if($i != length($list), $result + "#{$e}#{$separator}", $result + "#{$e}");
+    $result: if($i != length($list), $result#{$e}#{$separator}, $result#{$e});
   }
-  @return unquote('') + $result;
-}
+  @return $result;
+}

data/stylesheets/functions/_list-remove-nth.scss

@@ -0,0 +1,34 @@
+/**
+ * Removes nth value from a list
+ * @param  {List} $list       List the value is to be removed from.
+ * @param  {Integer} $index   Index of the value to be removed.
+ * @return {List|Boolean}     New list with value removed or false, if operation failed.
+ */
+@function list-remove-nth($list, $index) {
+  $result: null;
+        
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  }
+
+  @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  }
+
+  @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  }
+
+  @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);  
+
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
+        
+  @return $result;
+}

data/stylesheets/mixins/_cache-push.scss

@@ -0,0 +1,8 @@
+/**
+ * Pushs a value to a list on $CACHE map for $key
+ * @param {String}              $key        Key of the list to which the value is to be pushed.
+ * @param {misc}                $vakue      Value to be pushed.
+ */
+@mixin cache-push($key, $value) {
+  $CACHE: cache-push($key, $value) !global;
+}

data/stylesheets/mixins/_cache-set.scss

@@ -0,0 +1,8 @@
+/**
+ * Sets a value on $CACHE map for $key
+ * @param {String}              $key        Key for which the value is to be set.
+ * @param {misc}                $vakue      Value to be set for $key.
+ */
+@mixin cache-set($key, $value) {
+  $CACHE: cache-set($key, $value) !global;
+}

data/stylesheets/mixins/_cache-unshift.scss

@@ -0,0 +1,8 @@
+/**
+ * Prepends a value to a list on $CACHE map for $key
+ * @param {String}              $key        Key of the list to which the value is to be prepended.
+ * @param {misc}                $vakue      Value to be prepended.
+ */
+@mixin cache-unshift($key, $value) {
+  $CACHE: cache-unshift($key, $value) !global;
+}

data/stylesheets/mixins/_layout-init.scss

@@ -5,6 +5,12 @@
 @mixin layout-init($user-layouts) {
   @if(type-of($user-layouts) == map) {
     $LAYOUT: layout-extend($user-layouts) !global;
+    @include cache-set(base__font-size, ());
+    @include cache-set(base__line-height, ());
+    @include cache-set(local__font-size, ());
+    @include cache-set(local__line-height, ());
+    @include cache-set(layout, ());
+    @include cache-set(susy, ());
     $base__font-size: layout-get(base, base__font-size) !global;
     $base__line-height: layout-get(base, base__line-height) !global;
     $local__font-size: $base__font-size !global;

data/stylesheets/mixins/_layout-use.scss

@@ -13,22 +13,19 @@
     $layout-key: nth($layout-key, 1);
   }
   // temporarily store layout settings of parent context
-  $LAYOUT--parent: $LAYOUT;
-  $susy--parent: $susy;
+  @include cache-push(layout, $LAYOUT);
+  @include cache-push(susy, $susy);
   // set new settings globally
   $LAYOUT: layout-build($layout-key) !global;
   $susy: layout-get(susy) !global;
   // set typographic context
   $base: map-get($LAYOUT, base);
-  $base__font-size--parent: $base__font-size;
-  $base__line-height--parent: $base__line-height;
+  @include cache-push(base__font-size, $base__font-size);
+  @include cache-push(base__line-height, $base__line-height);
+
   $base__font-size: map-get($base, base__font-size) !global;
   $base__line-height: map-get($base, base__line-height) !global;
-  // $local__font-size--parent: $local__font-size;
-  // $local__line-height--parent: $local__line-height;
-  // $local__font-size: map-get($base, local__font-size) !global;
-  // $local__line-height: map-get($base, local__line-height) !global;
-
+  
   // build media query
   @if ($layout-key == default) {
     @content;
@@ -85,10 +82,8 @@
     }
   }
   // restore parent layout settings
-  $LAYOUT: $LAYOUT--parent !global;
-  $susy: $susy--parent !global;
-  $base__font-size: $base__font-size--parent !global;
-  $base__line-height: $base__line-height--parent !global;
-  // $local__font-size: $local__font-size--parent !global;
-  // $local__line-height: $local__line-height--parent !global;
+  $LAYOUT: cache-pop(layout) !global;
+  $susy: cache-pop(susy) !global;
+  $base__font-size: cache-pop(base__font-size) !global;
+  $base__line-height: cache-pop(base__line-height) !global;
 }

data/stylesheets/mixins/_type-base.scss

@@ -1,18 +1,19 @@
 /**
  * Sets a base value and creates new absolute typographic context based on rem values.
- * @param  {px value}           $font-size                     Font size value, default is global $base__font-size.
- * @param  {px value|Boolean}   $line-height: 1.25*$font-size  Line height value, default is global $base__font-size
+ * @param  {px value}           $new-font-size                     Font size value, default is global $base__font-size.
+ * @param  {px value|Boolean}   $new-line-height: 1.25*$new-font-size  Line height value, default is global $base__font-size
  * @param  {Booelan}            $set-styles:  true             Pass false to just switch type context without settings styles.
  */
-@mixin type-base($font-size: $base__font-size, $line-height: $base__line-height, $set-styles: true) {
+@mixin type-base($new-font-size: $base__font-size, $new-line-height: $base__line-height, $set-styles: true) {
   // store current type settings temporarily
-  $base__font-size--parent: $base__font-size;
-  $base__line-height--parent: $base__line-height;
-  $local__font-size--parent: if($local__font-size, $local__font-size, $base__font-size);
-  $local__line-height--parent: if($local__line-height, $local__line-height, $base__line-height);
+  @include cache-push(base__font-size, $base__font-size);
+  @include cache-push(base__line-height, $base__line-height);
+  @include cache-push(local__font-size, if($local__font-size, $local__font-size, $base__font-size));
+  @include cache-push(local__line-height, if($local__line-height, $local__line-height, $base__line-height));
+
   // set new type values
-  $base__font-size: $font-size !global;
-  $base__line-height: $line-height !global;
+  $base__font-size: $new-font-size !global;
+  $base__line-height: $new-line-height !global;
   $local__font-size: $base__font-size !global;
   $local__line-height: $base__line-height !global;
   //set styles
@@ -24,8 +25,8 @@
   // include content
   @content;
   // restore parent type context
-  $base__font-size: $base__font-size--parent !global;
-  $base__line-height: $base__line-height--parent !global;
-  $local__font-size: $local__font-size--parent !global;
-  $local__line-height: $local__line-height--parent !global;
+  $base__font-size: cache-pop(base__font-size) !global;
+  $base__line-height: cache-pop(base__line-height) !global;
+  $local__font-size: cache-pop(local__font-size) !global;
+  $local__line-height: cache-pop(local__line-height) !global;
 }

data/stylesheets/mixins/_type-context.scss

@@ -1,24 +1,31 @@
 /**
  * Changes the local type context without touching type base.
- * @param  {px value}         $font-size                     Font size value.
- * @param  {px value|Boolean} $line-height: 1.25*$font-size  Line height value, defaults to 1.25 times font size value.
- * @param  {Boolean}          $set-styles:  true             Pass false to just switch type context without setting styles.
+ * @param  {px value}         $new-font-size                         Font size value.
+ * @param  {px value|Boolean} $new-line-height: 1.25*$new-font-size  Line height value, defaults to 1.25 times font size value.
+ * @param  {Boolean}          $set-styles:  true                     Pass false to just switch type context without setting styles.
  */
-@mixin type-context($font-size, $line-height: 1.25 * $font-size, $set-styles: true) {
+@mixin type-context($new-font-size, $new-line-height: 1.25 * $new-font-size, $set-styles: true) {
+  $outer__font-size: $local__font-size;
+  $outer__line-height: $local__line-height;
+  $list: cache-get(local__font-size);
+  @if (length($list) <= 1) {
+    $outer__font-size: $base__font-size;
+    $outer__line-height: $base__line-height;
+  }
   // store context 
-  $local__font-size--parent: $local__font-size;
-  $local__line-height--parent: $local__line-height;
-  // override context
-  $local__font-size: $font-size !global;
-  $local__line-height: $line-height !global;
+  @include cache-push(local__font-size, $local__font-size);
+  @include cache-push(local__line-height, $local__line-height);
   // set styles
-  @if($set-styles) {
-    font-size: px-to-em($font-size, $local__font-size--parent);
-    line-height: px-to-em($line-height, $local__font-size);
+  @if ($set-styles) {
+    font-size: px-to-em($new-font-size, $outer__font-size);
+    line-height: px-to-em($new-line-height, $new-font-size);
   }
+  // override context
+  $local__font-size: $new-font-size !global;
+  $local__line-height: $new-line-height !global;
   // include content
   @content;
   // restore previous context
-  $local__font-size: $local__font-size--parent !global;
-  $local__line-height: $local__line-height--parent !global;
+  $local__font-size: cache-pop(local__font-size) !global;
+  $local__line-height: cache-pop(local__line-height) !global;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: layout-tools-for-susy
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.2.0
 platform: ruby
 authors:
 - Oliver Wehn
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-01-21 00:00:00.000000000 Z
+date: 2017-06-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -52,6 +52,13 @@ files:
 - stylesheets/config/_constants.scss
 - stylesheets/config/_globals.scss
 - stylesheets/config/_layouts.scss
+- stylesheets/functions/_cache-get.scss
+- stylesheets/functions/_cache-nth.scss
+- stylesheets/functions/_cache-pop.scss
+- stylesheets/functions/_cache-push.scss
+- stylesheets/functions/_cache-set.scss
+- stylesheets/functions/_cache-shift.scss
+- stylesheets/functions/_cache-unshift.scss
 - stylesheets/functions/_color-get.scss
 - stylesheets/functions/_color-set.scss
 - stylesheets/functions/_const.scss
@@ -60,11 +67,15 @@ files:
 - stylesheets/functions/_layout-get.scss
 - stylesheets/functions/_list-implode.scss
 - stylesheets/functions/_list-px-to-em.scss
+- stylesheets/functions/_list-remove-nth.scss
 - stylesheets/functions/_map-merge-r.scss
 - stylesheets/functions/_map-set.scss
 - stylesheets/functions/_px-to-em.scss
 - stylesheets/functions/_px-to-pc.scss
 - stylesheets/functions/_px-to-rem.scss
+- stylesheets/mixins/_cache-push.scss
+- stylesheets/mixins/_cache-set.scss
+- stylesheets/mixins/_cache-unshift.scss
 - stylesheets/mixins/_color-set.scss
 - stylesheets/mixins/_const.scss
 - stylesheets/mixins/_layout-extend.scss
@@ -94,7 +105,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.6
 requirements: []
 rubyforge_project: layout-tools-for-susy
-rubygems_version: 2.0.14
+rubygems_version: 2.0.14.1
 signing_key: 
 specification_version: 4
 summary: Handy mixins and functions to handle layout settings for multiple breakpoints.