layout-tools-for-susy 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 22a887b518b4b623e85d8d16b06c8d7a9ac5b2fb
+  data.tar.gz: f99f83a61bf859d7e6788c487172c47d9302cf43
+SHA512:
+  metadata.gz: 30f4c7ba518d7f9eef1c9c73303a6e185fb87b052ad607d3853f3dffb9f25a0d3343189a2deb4694b2b364dbce3e9f4fe6ff4dba17b6a97d4dc83b8b0da04739
+  data.tar.gz: 817f3ff17f10badb66b436ff572855ca865e195c4653c8f1aaca832bd43063fda3588d072cc5f8d896acc0720d7e9cf172a6b80aa65d90eedf685beafe19c375

data/README.md

@@ -0,0 +1,210 @@
+# Layout Tools for Susy
+
+Layout Tools for Susy is a set of handy mixins and functions to structure, organize and access layout settings over multiple breakpoints. Combined with the power of Susy’s grid calculations it allows you to set up responsive grid layouts fast and with ease.
+
+## Installation
+### NPM
+```bash
+$ 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/layout-tools-for-susy/node_modules/susy/sass/susy',
+        '../../node_modules/layout-tools-for-susy/stylesheets/layout-tools-for-susy';
+```
+
+### Bower
+```bash
+$ bower 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 '../../bower_components/susy/sass/susy',
+        '../../bower_components/layout-tools-for-susy/stylesheets/layout-tools-for-susy';
+```
+
+### Gem
+
+
+## How to use
+Since Susy2 switched to storing all grid settings in SASS maps, it seems to be quite a good idea to store other basic layout settings the same way. Layout Tools for Susy provides tools to store and access layout settings while making the interaction with SASS maps to a minimum. Let’s see how it’s done.
+
+### Defining layouts and putting them to use
+The foundation Layout Tools for Susy build on is a SASS map storing the basic layout settings for your Susy setup and more. Here’s an example:
+```scss
+// Layout settings
+$layouts: (
+  default: (
+    susy: (
+      flow: ltr,
+      math: fluid,
+      output: float,
+      gutter-position: after,
+      container: auto,
+      container-position: center,
+      columns: 4,
+      gutters: .25,
+      column-width: false,
+      global-box-sizing: border-box,
+      last-flow: to,
+      debug: (
+        image: hide,
+        color: rgba(#66f, .25),
+        output: background,
+        toggle: top right,
+      ),
+      use-custom: (
+        background-image: true,
+        background-options: false,
+        box-sizing: true,
+        clearfix: false,
+        rem: true,
+      )
+    ),
+    base: (
+      base__font-size: 14px,
+      base__line-height: 18px
+    )
+  ),
+  M: (
+    susy: (
+      columns: 8
+    ),
+    base: (
+      base__font-size: 18px,
+      base__line-height: 24px
+    ),
+    breakpoint: (
+      max-width: 1200px,
+      min-width: 801px
+    )
+  ),
+  L: (
+    extends: M,
+    susy: (
+      columns: 12
+    ),
+    breakpoint: (
+      min-width: 1201px
+    )
+  )
+);
+// set up and initialize layout tools
+@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. 
+
+#### 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.
+
+As said before, after using ```@include layout-init($layouts);``` the `default` layout context is established. Switching to another context is done using the ```layout-use()``` mixin as shown below:
+```sass
+.body {
+
+  @include type-base($base__font-size, $base__line-height);
+
+  // Switching to layout context 'M' (and beyond)
+  @include layout-use(M up) {
+    @include type-base($base__font-size, $base__line-height);
+    ...
+  }
+
+  // Switching to layout context 'L' (and only 'L')
+  @include layout-use(L) {
+    ...
+  }
+
+}
+```
+In this example we set the styles for the base font size and line height. As in our layout definition the font size is a different one for layout context `M`, we switch contexts and set the styles again. As we defined the breakpoint property for this context, including ```layout-use()``` will create a corresponding media query that wraps the new type settings. As we know that context `L` extends `M` and keeps the font size and line height, we added the `up` keyword to the parameter we passed to the mixin. This causes to remove all max- values from the media query so the type settings will be valid from `M`’s min-width to infinity. Adding the `down` keyword works the other way around.
+
+#### Settings groups
+Besides `extends` all properties of a layout context represent settings groups. An example is the pre-defined group `base`. Settings groups store key-value-pairs of specific settings. The value of each setting can be anything you want it to be like e.g. valid css values or any kind of SASS value types. You can create as many settings groups as you want and add settings to existing ones. This allows you to separate and organize your settings like in the example below:
+```scss
+$layouts: (
+  default: (
+    susy: (
+      ...
+    ),
+    base: (
+      ...
+    ),
+    nav: (
+      item__font-size: 14px,
+      item__line-height: 20px,
+      item__border-width: 2px
+    ),
+    footer: (
+      ...
+    ),
+    map-component: (
+      ...
+    )
+  )
+)
+```
+To give you even more possibilities to modulize your SASS code base, you can keep e.g. component-specific settings with the corresponding styles in separate files and import them where needed. This is done by using the ```layout-extend()``` mixin like shown below:
+```scss
+// separate file _my-component.scss
+// to be imported in your main style file
+
+// Component settings
+$my-component: (
+  default: (
+    my-component: (
+      label__font-size: 12px,
+      label__line-height: 14px,
+      label__border: 1px dotted color-get(rose, dark)
+    )
+  ),
+  M: (
+    my-component: (
+      ...
+    )
+  )
+);
+
+// Add component settings to layouts
+@include layout-extend($my-component);
+
+// Use styles
+.my-component {
+  
+  &__label {
+    // Retrieve settings from current layout context
+    $label__font-size: layout-get(my-component, label__font-size);
+    $label__line-height: layout-get(my-component, label__line-height);
+    $label__border: layout-get(my-component, label__border);
+    @include text-context($label__font-size, $label__line-height) {
+      font-family: Helvetica, Arial, sans-serif;
+      padding: px-to-em(20px, $local__font-size) 0;
+      border: $label__border;
+    }
+  }
+
+  ...
+}
+
+```
+
+#### Susy settings
+The `susy` property represents the Susy settings map. For more information on configuration settings and how to work with Susy, go to: http://susydocs.oddbird.net/en/latest/
+
+#### Base font size and line height
+Within a layout context, there will be two global vars available named `$base__font-size` and `$base__line-height`. They are retrieved automatically from the current layout context’s settings. To override them, define the pixel values of your choice for ```base__font-size``` and ```base__line-height``` in your layout contexts’ ```base``` group.
+
+
+### Layouts and breakpoints
+
+### Typographic contexts
+
+### Colors
+
+### Constants
+
+### Naming styles
+
+### Contribute

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

@@ -0,0 +1,17 @@
+base_directory  = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+layout_tools_stylesheets_path = File.join(base_directory, 'stylesheets')
+
+if (defined? Compass)
+  require 'sassy-maps'
+  Compass::Frameworks.register(
+    "layout_tools",
+    :path => base_directory
+  )
+else
+  ENV["SASS_PATH"] = [ENV["SASS_PATH"], layout_tools_stylesheets_path].compact.join(File::PATH_SEPARATOR)
+end
+
+module LayoutTools
+  VERSION = "0.1.0"
+  DATE = "2015-11-30"
+end

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

@@ -0,0 +1,40 @@
+// Dependencies
+@import 'susy';
+
+// Config
+@import 'config/constants',
+        'config/layouts',
+        'config/globals';
+
+// General helpers
+@import 'functions/map-set',
+        'functions/map-merge-r',
+        'functions/list-implode',
+        'placeholders/clearfix';
+
+// constants
+@import 'mixins/const',
+        'functions/const';
+
+// Unit calculations
+@import 'functions/px-to-em',
+        'functions/px-to-pc',
+        'functions/px-to-rem',
+        'functions/list-px-to-em';
+
+// Colors
+@import 'functions/color-set',
+        'mixins/color-set',
+        'functions/color-get';
+
+// Typography
+@import 'mixins/type-base',
+        'mixins/type-context';
+
+// Layout tools
+@import 'mixins/layout-init',
+        'mixins/layout-use',
+        'functions/layout-build',
+        'functions/layout-extend',
+        'mixins/layout-extend',
+        'functions/layout-get';

data/stylesheets/config/_constants.scss

@@ -0,0 +1,7 @@
+/**
+ * Map of predefined constants
+ */
+$CONSTANTS: (
+  'ROOT_FONT_SIZE': 16px,
+  'PI': 3.1415926535897932384626433832795028841971693993751
+) !global;

data/stylesheets/config/_globals.scss

@@ -0,0 +1,12 @@
+/**
+ * Set up layout-relevant globals
+ */
+$LAYOUT: () !global;
+$COLORS: () !global;
+$susy: () !global;
+$base__font-size: 0;
+$base__line-height: 0;
+$local__font-size: 0;
+$local__line-height: 0;
+
+

data/stylesheets/config/_layouts.scss

@@ -0,0 +1,39 @@
+/** 
+ * Layouts map
+ */
+$LAYOUTS: (
+
+  default: (
+    susy: (
+      flow: ltr,
+      math: fluid,
+      output: float,
+      gutter-position: after,
+      container: auto,
+      container-position: center,
+      columns: 4,
+      gutters: .25,
+      column-width: false,
+      global-box-sizing: content-box,
+      last-flow: to,
+      debug: (
+        image: hide,
+        color: rgba(#66f, .25),
+        output: background,
+        toggle: top right,
+      ),
+      use-custom: (
+        background-image: true,
+        background-options: false,
+        box-sizing: true,
+        clearfix: false,
+        rem: true,
+      )
+    ),
+    base: (
+      base__font-size: 16px,
+      base__line-height: 20px
+    )
+  )
+
+) !global;

data/stylesheets/functions/_color-get.scss

@@ -0,0 +1,21 @@
+/**
+ * Returns a color value for a $tone from a defined $palette.
+ * @param  {String} $palette         Name of palette.
+ * @param  {String} $tone:   'base'  Name of tone, default to `base`.
+ * @return {Misc}                    Color value.
+ */
+@function color-get($palette, $tone: 'base') {
+  @if (map-has-key($COLORS, $palette)) {
+    $palette-map: map-get($COLORS, $palette);
+    @if (map-has-key($palette-map, $tone)) {
+      @return map-get($palette-map, $tone);
+    }
+    @else {
+      @error 'Tone `#{$tone}` doesn’t exist in palette `#{$palette}`';
+    }
+  }
+  @else {
+    @error 'Palette `#{$palette}` doesn’t exist';
+  }
+  @return false;
+}

data/stylesheets/functions/_color-set.scss

@@ -0,0 +1,28 @@
+/**
+ * Sets one or multiple tone values for a color palette.
+ * @param {String}              $palette        Name of color palette.
+ * @param {String|Map}          $tone           Name of tone or–if no $value is given–map of tone-value pairs.
+ * @param {Color value|Boolean} $value: false   Color value to be set for $tone.
+ */
+@function color-set($palette, $tone, $value: false) {
+  $palette-map: ();
+  $tone-map: ();
+  
+  @if ($value) {
+    @if (map-has-key($COLORS, $palette)) {
+      $palette-map: map-get($COLORS, $palette);
+    }
+    $tone-map: ( $tone: $value);
+  }
+  @else {
+    @if (type-of($tone) == map) {
+      $tone-map: $tone;
+    }
+    @else {
+      @error 'Expected $tone to be a valid map. Was `#{type-of($tone)}`.';
+    }
+  }
+  $palette-map: map-merge($palette-map, ( $tone-map ));
+  $COLORS: map-merge($COLORS, ($palette: $palette-map)) !global;
+  @return true;
+}

data/stylesheets/functions/_const.scss

@@ -0,0 +1,12 @@
+/**
+ * Retrieves value of a constant.
+ * Based on code by Hugo Giraudel, http://www.sitepoint.com/dealing-constants-sass/
+ * @param  {String} $name Name of constant.
+ * @return {Misc}         Value of constant.
+ */
+@function const($name) {
+  @if (map-has-key($CONSTANTS, $name)) {
+    @return map-get($CONSTANTS, $name);
+  }
+  @error 'Unknown constant `#{$name}`.';
+}

data/stylesheets/functions/_layout-build.scss

@@ -0,0 +1,36 @@
+/**
+ * Builds layout map by extending the layout defined in $this-layout accordingly to inheritence defined through `extends` setting or a particular layout defined through $with-layout parameter.
+ * @param  {String} $this-layout                      Key of the layout to be extended.
+ * @param  {String|Boolean} $with-layout:   false     Optional layout key to be extended with $this-layout
+ * @return {Map|Boolean}                              Returns map of extended layout or false, if a layout couldn’t be correctly retrieved from $LAYOUTS.
+ */
+
+@function layout-build($this-layout, $with-layout: false) {
+   @if (map-has-key($LAYOUTS, $this-layout)) {
+    $this-layout-map: map-get($LAYOUTS, $this-layout);
+    @if ($this-layout == default) {
+      @return $this-layout-map;
+    }
+    @if ($with-layout == false) {
+      @if (map-has-key($this-layout-map, extends)) {
+        $with-layout: map-get($this-layout-map, extends);
+      }
+      @else {
+        $with-layout: default;
+      }
+    }
+    @if ($with-layout) {
+      @if ($with-layout == default) {
+        @return map-merge-r(map-get($LAYOUTS, $with-layout), $this-layout-map);
+      }
+      @else {
+        $with-layout-map: layout-build($with-layout);
+        @return map-merge-r($with-layout-map, $this-layout-map);
+      }
+    }
+    @else {
+      @return $this-layout-map;
+    }
+  }
+  @return false;
+}

data/stylesheets/functions/_layout-extend.scss

@@ -0,0 +1,13 @@
+/**
+ * Extends layout with map $extension.
+ * @param  {Map}    $extension              Map with additional layout settings.
+ * @param  {String} $layout-key: 'default'  Key of layout to be retrieved and returned after extension.
+ * @return {Map}                            Returns extended layout map for $layout-key.
+ */
+@function layout-extend($extension, $layout-key: default) {
+  @if (type-of($extension) != map) {
+    @return false;
+  }
+  $LAYOUTS: map-merge-r($LAYOUTS, $extension) !global;
+  @return layout-get(false, false, $layout-key);
+}

data/stylesheets/functions/_layout-get.scss

@@ -0,0 +1,43 @@
+/**
+ * Retrieves a particular value from a group or a complete group or whole config from current or specified layout
+ * @param  {String|Boolean} $group:     false         Group of settings to be retrieved. Set to `false` for all groups of a layout.
+ * @param  {String|Boolean} $key:       false         Specifies particular setting to be retrieved. Set to `false` for all settings of a group.
+ * @param  {String|Boolean} $of-layout: false         Defines layout settings will be retrieved from. Set to `false` to retrieve from current layout.
+ * @return {CSS value|Map|Boolean}                    Returns a particular setting’s value, a map of settings, a layout map or false if requested resource doesn’t exist.
+ */
+
+@function layout-get($group: false, $key: false, $of-layout: false) {
+  
+  @if (type-of($of-layout) == string) {
+    @if (map-has-key($LAYOUTS, $of-layout)) {
+      $of-layout: layout-build($of-layout);
+    }
+    @else {
+      $of-layout: false;
+    }
+  }
+  @else {
+    $of-layout: $LAYOUT;
+  }
+
+  @if (type-of($of-layout) == map) {
+    @if ($group == false)  {
+      @return $of-layout;
+    }
+    @else {
+      @if (map-has-key($LAYOUT, $group)) {
+        $group: map-get($LAYOUT, $group);
+        @if($key == false) {
+          @return $group;
+        }
+        @else {
+          @if (map-has-key($group, $key)) {
+            @return map-get($group, $key);
+          }
+        }
+      }
+    }
+  }
+
+  @return false;
+}

data/stylesheets/functions/_list-implode.scss

@@ -0,0 +1,18 @@
+/**
+ * Implodes a list separating list items by $separator.
+ * @param  {List}    $list                  Sass list of misc items.
+ * @param  {String}  $separator: ''         Separator string.
+ * @param  {Boolean} $recursive: false      Optionally implode items of type list.
+ * @return {String}                         Imploded list as string.
+ */
+@function list-implode($list, $separator: '') {
+  $result: null;
+  @for $i from 1 through length($list) {
+    $e: nth($list, $i);
+    @if (type-of($e) == list) {
+      $e: list-implode($e, $separator);
+    }
+    $result: if($i != length($list), $result#{$e}#{$separator}, $result#{$e});
+  }
+  @return $result;
+}

data/stylesheets/functions/_list-px-to-em.scss

@@ -0,0 +1,14 @@
+/**
+ * Converts all px values in $list to em values based on $context.
+ * @param  {List} $list   List of values.
+ * @return {List}         List of modified values.
+ */
+@function list-px-to-em($list, $context) {
+  @for $i from 1 through length($list) {
+    $value: nth($list, $i);
+    @if(type-of($value) == number and unit($value) == px) {
+      $list: set-nth($list, $i, calc-em($value, $context));
+    }
+  }
+  @return $list;
+}

data/stylesheets/functions/_map-merge-r.scss

@@ -0,0 +1,24 @@
+/**
+ * Merges to SASS maps recursively
+ * @param  {Map}  $map1 Map to be merged into.
+ * @param  {Map}  $map2 Map to be merged into $map1.
+ * @return {Map}        Merged map.
+ */
+
+@function map-merge-r($map1, $map2) {
+  $map1-keys: map-keys($map1);
+  $map2-keys: map-keys($map2);
+  @each $key in $map1-keys {
+    @if(map-has-key($map1, $key)) {
+      $map1-value: map-get($map1, $key);
+      @if(type-of($map1-value) == map) {
+        $map2-value: map-get($map2, $key);
+        @if(type-of($map2-value) == map) {
+          $map1: map-set($map1, $key, map-merge-r($map1-value, $map2-value));
+        }
+        $map2: map-remove($map2, $key);
+      }
+    }
+  }
+  @return map-merge($map1, $map2);
+}

data/stylesheets/functions/_map-set.scss

@@ -0,0 +1,10 @@
+/**
+ * Sets a value in an existing 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 map-set($map, $key, $value) {
+  $new: ($key: $value);
+  @return map-merge($map, $new);
+}

data/stylesheets/functions/_px-to-em.scss

@@ -0,0 +1,9 @@
+/**
+ * Calculates a relative em value from $px relatively to $px-context.
+ * @param  {px value} $px         Value.
+ * @param  {px value} $px-context Context.
+ * @return {em value}             Relative em value.
+ */
+@function px-to-em($px, $px-context) {
+  @return $px / $px-context * 1em;
+}

data/stylesheets/functions/_px-to-pc.scss

@@ -0,0 +1,9 @@
+/**
+ * Calculates the percentage value of $px relatively to $px-context.
+ * @param  {px value} $px          Part.
+ * @param  {px value} $px-context  Context.
+ * @return {% value}               Percentage value.
+ */
+@function px-to-pc($px, $px-context) {
+  @return percentages($px / $px-context);
+}

data/stylesheets/functions/_px-to-rem.scss

@@ -0,0 +1,8 @@
+/**
+ * Returns rem value for $px relative to constan root font size.
+ * @param  {px value}  $px Absolute pixel value.
+ * @return {rem value}     Rem value relative to root font size.
+ */
+@function px-to-rem($px) {
+  @return $px / const('ROOT_FONT_SIZE') * 1rem;
+}

data/stylesheets/mixins/_color-set.scss

@@ -0,0 +1,9 @@
+/**
+ * Sets one or multiple tone values for a color palette.
+ * @param {String}              $palette        Name of color palette.
+ * @param {String|Map}          $tone           Name of tone or–if no $value is given–map of tone-value pairs.
+ * @param {Color value|Boolean} $value: false   Color value to be set for $tone.
+ */
+@mixin color-set($palette, $tone, $value: false) {
+  $color: color-set($palette, $tone, $value);
+}

data/stylesheets/mixins/_const.scss

@@ -0,0 +1,12 @@
+/**
+ * Defines a new constant.
+ * Based on code by Hugo Giraudel, http://www.sitepoint.com/dealing-constants-sass/
+ * @param  {String} $name  Name of new constant.
+ * @param  {Misc}   $value Value of constant
+ */
+@mixin const($name, $value) {
+  @if (map-has-key($CONSTANTS, $name)) {
+    @error 'Constant `#{$name}` is already defined.';
+  }
+  $CONSTANTS: map-merge($CONSTANTS, ( $name: $value )) !global;
+}

data/stylesheets/mixins/_layout-extend.scss

@@ -0,0 +1,13 @@
+/**
+ * Extends layout with map $extension.
+ * @param  {Map}    $extension              Map with additional layout settings.
+ * @param  {String} $layout-key: 'default'  Key of layout to be retrieved and returned after extension.
+ */
+@mixin layout-extend($with-layout) {
+  @if (type-of($with-layout) == map) {
+    $LAYOUT: layout-extend($with-layout) !global;
+  }
+  @else {
+    @error 'Expected $with-layout to be of type `map`, was `#{type-of($with-layout)}`.';
+  }
+}

data/stylesheets/mixins/_layout-init.scss

@@ -0,0 +1,17 @@
+/**
+ * Sets up layouts from map, initiates default layout, sets globals.
+ * @param  {Map}    $layouts Map of layout definitions
+ */
+@mixin layout-init($user-layouts) {
+  @if(type-of($user-layouts) == map) {
+    $LAYOUT: layout-extend($user-layouts) !global;
+    $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;
+    $local__line-height: $base__line-height !global;
+    $susy: layout-get(susy) !global;
+  }
+  @else {
+    @error 'Expected $layouts to be of type `map`, was `#{type-of($layouts)}`.';
+  }
+}

data/stylesheets/mixins/_layout-use.scss

@@ -0,0 +1,94 @@
+/**
+ * Implements settings for layout defined by $layout-key locally for @content. Wraps @content in a media query if `breakpoint` settings are present in layout definition.
+ * @param  {String} $layout-key: default       Layout key of layout which’s settings to be used as context for @content. Can contain modifiers like `up` or `down` to only use min- or max-values of breakpoints.
+ */
+
+@mixin layout-use($layout-key: default) {
+  $valid-modes: (only, up, down);
+  $mode: only;
+  @if (type-of($layout-key) == list) {
+    @if (length($layout-key) > 1 AND nth($layout-key, 2) in $valid-modes) {
+      $mode: nth($layout-key, 2);
+    }
+    $layout-key: nth($layout-key, 1);
+  }
+  // temporarily store layout settings of parent context
+  $LAYOUT--parent: $LAYOUT;
+  $susy--parent: $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;
+  $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;
+  }
+  @else {
+    $breakpoint: map-get($LAYOUT, breakpoint);
+    @if ($breakpoint) {
+      $query: ();
+
+      @if (type-of($breakpoint) != list) {
+        $breakpoint: ( $breakpoint, );
+      }
+      @each $bp in $breakpoint {
+        $sub-query: null;
+        @if (map-has-key($bp, medium)) {
+          $sub-query: (map-get($bp, medium) + unquote(''), );
+          $bp: map-remove($bq, medium);
+        }
+        @else {
+          $sub-query: ('all', );
+        }
+        @if ($mode == up) {
+          $bp: map-remove($bp, max-width);
+          $bp: map-remove($bp, max-device-width);
+          $bp: map-remove($bp, max-height);
+          $bp: map-remove($bp, max-device-height);
+        }
+        @if ($mode == down) {
+          $bp: map-remove($bp, min-width);
+          $bp: map-remove($bp, min-device-width);
+          $bp: map-remove($bp, min-height);
+          $bp: map-remove($bp, min-device-height);
+        }
+        @each $prop, $val in $bp {
+          @if (type-of($val) == 'number') {
+            @if(unit($val) == 'px') {
+              $val: px-to-em($val, const(ROOT_FONT_SIZE));
+            }
+          }
+          $sub-query: append($sub-query, '(' + $prop + ': ' + $val + ')');
+        }
+        $query: append($query, list-implode($sub-query, ' and '));
+      }
+      $query-string: list-implode($query, ', ');
+
+      @media #{$query-string} {
+        @include with-layout($susy) {
+          @content;
+        }
+      }
+    }
+  }
+  @else {
+    @content;
+  }
+  // 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;
+}

data/stylesheets/mixins/_type-base.scss

@@ -0,0 +1,31 @@
+/**
+ * Sets a base value and creates new absolute typographic context based on rem values.
+ * @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  {Booelan}            $set-styles:  true             Pass false to just switch type context without settings styles.
+ */
+@mixin type-base($font-size, $line-height: 1.25 * $font-size, $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);
+  // set new type values
+  $base__font-size: $font-size !global;
+  $base__line-height: $line-height !global;
+  $local__font-size: $base__font-size !global;
+  $local__line-height: $base__line-height !global;
+  //set styles
+  @if ($set-styles) {
+    font-size: $base__font-size;
+    font-size: calc-rem($base__font-size);
+    line-height: calc-em($base__line-height, $base__font-size);
+  }
+  // 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;
+}

data/stylesheets/mixins/_type-context.scss

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+@mixin type-context($font-size, $line-height: 1.25 * $font-size, $set-styles: true) {
+  // 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;
+  // set styles
+  @if($set-styles) {
+    font-size: calc-em($font-size, $local__font-size--parent);
+    line-height: calc-em($line-height, $local__font-size);
+  }
+  // include content
+  @content;
+  // restore previous context
+  $local__font-size: $local__font-size--parent !global;
+  $local__line-height: $local__line-height--parent !global;
+}

data/stylesheets/placeholders/_clearfix.scss

@@ -0,0 +1,7 @@
+%clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

metadata

@@ -0,0 +1,101 @@
+--- !ruby/object:Gem::Specification
+name: layout-tools-for-susy
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Oliver Wehn
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-11-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: susy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.2.7
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.2.7
+description: Organize and handle layouts over multiple breakpoints
+email:
+- hello@oliverwehn.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- README.md
+- lib/layout-tools-for-susy.rb
+- stylesheets/_layout-tools-for-susy.scss
+- stylesheets/config/_constants.scss
+- stylesheets/config/_globals.scss
+- stylesheets/config/_layouts.scss
+- stylesheets/functions/_color-get.scss
+- stylesheets/functions/_color-set.scss
+- stylesheets/functions/_const.scss
+- stylesheets/functions/_layout-build.scss
+- stylesheets/functions/_layout-extend.scss
+- stylesheets/functions/_layout-get.scss
+- stylesheets/functions/_list-implode.scss
+- stylesheets/functions/_list-px-to-em.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/_color-set.scss
+- stylesheets/mixins/_const.scss
+- stylesheets/mixins/_layout-extend.scss
+- stylesheets/mixins/_layout-init.scss
+- stylesheets/mixins/_layout-use.scss
+- stylesheets/mixins/_type-base.scss
+- stylesheets/mixins/_type-context.scss
+- stylesheets/placeholders/_clearfix.scss
+homepage: https://github.com/oliverwehn/layout-tools-for-susy
+licenses:
+- MIT
+- GPL-2.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: layout-tools-for-susy
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: Handy mixins and functions to handle layout settings for multiple breakpoints.
+test_files: []