susy 2.0.0.beta.2 → 2.0.0.beta.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9db5246394497a4752238d5b432ce4e2e173995a
-  data.tar.gz: 06daf5683a28b569dcbca57308e3c07f5ed918ed
+  metadata.gz: 3a8a770621f5c94d8e367a8019a22f9cbf70d4ad
+  data.tar.gz: 9a1c8cd9a1b701054eac039ac46036db8bb29a32
 SHA512:
-  metadata.gz: 21cf7cb67d634c0ed2a87819416148bbf9708b3b12b0ecf17e44b4675289a812522cb465f25f29101fe72b7d706ca7435a229ad14cffa80294f36bdd8e2562da
-  data.tar.gz: 39670449c17c8edbb172a4fc284627d0e3657c2efef048258c18f6a5f08260c31b92f4d7122369f9d45df89440e2facd831e82f72630b78eacdbb14f3ab05b4b
+  metadata.gz: 0547e1ab69123432985801feacc22c1a7c7e0386874c71940131a0a774d5a60c941c4b0911276ba8878dcc37ad5b814b0a8e7763c816fecafc9c07bf357eb3e3
+  data.tar.gz: 3bb35def7bf985cf7aba9f78e80dac528bedcb69788a3f0b78ced2d18155ab6e61802d7fd64b7fba69e33ca0af134a349a7ac5862820087be227facf7a18d6ff

data/VERSION

@@ -1 +1 @@
-2.0.0.beta.1
+2.0.0.beta.2

data/docs/changelog.rst

@@ -2,6 +2,15 @@ Changelog
 =========
 
 
+2.0.0.beta.3 — Jan 10 2014
+--------------------------
+
+- Fix a bug making ``show-grid`` unaware of local ``debug/output`` keywords.
+- Added Susyone syntax for those that need to use the old Susy syntax,
+  with updated Sass and Compass.
+
+  + ``@import 'susyone';``
+
 2.0.0.beta.2 — Jan 6 2014
 -------------------------
 

data/sass/_susyone.scss

@@ -0,0 +1,4 @@
+// Susy
+// ====
+
+@import "susy/language/susyone";

data/sass/susy/language/_susyone.scss

@@ -0,0 +1,15 @@
+// ---------------------------------------------------------------------------
+// Partials
+
+// temporary
+@import "susyone/units";
+
+// permanent
+@import "susyone/settings";
+@import "susyone/functions";
+@import "susyone/grid";
+@import "susyone/isolation";
+@import "susyone/padding";
+@import "susyone/margin";
+@import "susyone/media";
+@import "susyone/background";

data/sass/susy/language/susy/_background.scss

@@ -365,5 +365,5 @@ $susy-overlay-grid-head-exists: false;
   $grid: $susy
 ) {
   $key: join(debug, $key, space);
-  @return susy-get($key);
+  @return susy-get($key, $grid);
 }

data/sass/susy/language/susyone/_background.scss

@@ -0,0 +1,18 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "compass/layout/grid-background";
+@import "compass/css3/background-origin";
+@import "compass/css3/background-clip";
+
+// ---------------------------------------------------------------------------
+// Susy Grid Background
+//
+// A wrapper for the compass "column-grid-background" mixin
+// Uses all your settings to create a grid background for a container element.
+// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
+@mixin susy-grid-background(){
+  @include column-grid-background($total-columns, column(), gutter(), 0);
+  @include background-origin(content-box);
+  @include background-clip(content-box);
+}

data/sass/susy/language/susyone/_functions.scss

@@ -0,0 +1,372 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+// We need access to some basic font settings for handling media-queries.
+@import "compass/typography/vertical_rhythm";
+
+// For now, we also need this...
+$browser-default-font-size-px       : 16px;
+$browser-default-font-size-percent  : 100%;
+$browser-default-font-size-pt       : 12pt;
+
+$rem-with-px-fallback               : true !default;
+
+// ---------------------------------------------------------------------------
+// Sass list Functions
+
+// Return a list with specific items removed
+//
+// filter($list, $target)
+// - $list    : The list to filter.
+// - $target  : An item to be removed from the list.
+@function filter($list, $target) {
+  $clean: compact();
+  @if index($list, $target) {
+    @each $item in $list {
+      $clean: if($item == $target, $clean, append($clean, $item));
+    }
+  } @else { $clean: $list; }
+  @return $clean;
+}
+
+// ---------------------------------------------------------------------------
+// Don't use static output when it will break things
+
+// Switch element-level output to fluid, when container-width is wrong for static
+//
+// fix-static-misalignment([$style, $width])
+// - $style: $container-style.
+// - $width: $container-width.
+@function fix-static-misalignment(
+  $style: $container-style,
+  $width: $container-width
+) {
+  @if $container-width and $container-width != container-outer-width($width: false) {
+    $style: fluid;
+  }
+  @return $style;
+}
+
+// ---------------------------------------------------------------------------
+// Grid Functions
+
+// Returns the full width of a grid based on your grid settings.
+//
+//  $columns  : The number of columns to get width for.
+@function columns-width(
+  $columns  : $total-columns
+) {
+  @if round($columns) != $columns {
+    @warn "Susy works best with integer column-spans.
+    For partial-columns, you may need to finesse the math by hand using functions directly.";
+  }
+  @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
+}
+
+// Return the grid width after adding or subtracting grid padding
+//
+// $width     : the width of the grid without padding;
+// $operation : ( add | subtract ) if padding should be added or subtracted;
+@function handle-grid-padding(
+  $width,
+  $operation : subtract
+) {
+  $pad: $grid-padding*2;
+
+  @if comparable($width, $grid-padding) {
+    $width: if($operation == subtract, $width - $pad, $width + $pad);
+  } @else {
+    @warn "$grid-padding must be set in units comparable to the container width.";
+  }
+
+  @return $width;
+}
+
+// Return the full outer width of a Container element.
+//
+//  $columns  : The number of columns in the Grid Layout.
+@function container-outer-width(
+  $columns  : $total-columns,
+  $width    : $container-width
+) {
+  $outerwidth: if($width, $width, columns-width($columns));
+
+  @if $width {
+    @if not $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, subtract); }
+  } @else {
+    @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
+  }
+
+  @return $outerwidth;
+}
+
+// Return the percentage width of a single column in a given 'context'.
+//
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function column(
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, $column-width, relative-width($column-width, $context));
+}
+
+// Return the percentage width of multiple 'columns' in a given 'context'.
+//
+//  $columns  : The number of columns to get relative width for.
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function columns(
+  $columns,
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
+}
+
+// Return the percentage width of a single gutter in a given 'context'.
+//
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function gutter(
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, $gutter-width, relative-width($gutter-width, $context));
+}
+
+// Return the percentage width of a given value in a given 'context'.
+//
+//  $width    : Any given width value.
+//  $context  : The grid context in columns, if nested.
+@function relative-width(
+  $width,
+  $context : $total-columns
+) {
+  @return percentage($width / columns-width($context));
+}
+
+// Return the total space occupied by multiple columns and associated gutters.
+// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
+//
+//  $columns  : The number of columns to get relative space for.
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function space(
+  $columns,
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
+}
+
+// Accept a list including column-count and (optional) position.
+// Return either the column count or the position alone.
+//
+//  $columns  : the list to split and interprate.
+//  $request  : The value to return, either 'columns' or 'position'.
+@function split-columns-value(
+  $columns,
+  $request : columns
+) {
+  $pos  : false;
+  $cols : false;
+
+  @each $var in $columns {
+    @if (type-of($var) == 'string') {
+      $pos: $var;
+    } @else {
+      @if (type-of($var) == 'number') and (unitless($var)) {
+        $cols: $var;
+      } @else {
+        @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
+      }
+    }
+  }
+
+  @if $request == 'columns' {
+    @return $cols;
+  } @else {
+    @if $request == 'position' {
+      @return $pos;
+    } @else {
+      @warn '"#{$request}"" is not a valid value for $request';
+    }
+  }
+}
+
+// Accept nth-selector variables, and format them as a valid CSS3 selector.
+//
+// $n         : [first | only | last | <equation>]
+// $selector  : [child | last-child | of-type | last-of-type ]
+@function format-nth(
+  $n        : last,
+  $selector : child
+) {
+  @if ($n == 'last') or ($n =='first') or ($n =='only') {
+    $selector: '#{$n}-#{$selector}';
+  } @else {
+    $selector: 'nth-#{$selector}(#{$n})';
+  }
+  @return $selector;
+}
+
+// ---------------------------------------------------------------------------
+// Media Functions
+
+// Return an em value adjusted to match the browser default font size.
+// Note: This only works if actual sizes are set relative to browser defaults.
+//
+// $ems         : The initial value to be converted.
+// $font-size   : The current font-size in.
+@function base-ems(
+  $ems,
+  $font-size: $base-font-size
+){
+  $font-size  : if(unit($ems) == 'rem', $base-font-size, $font-size);
+  $unit       : unit($font-size);
+  $mult       : $ems / ($ems * 0 + 1);
+
+  @if $unit == 'px' {
+    @return $font-size / $browser-default-font-size-px * $mult * 1em;
+  }
+  @else if $unit == '%' {
+    @return $font-size / $browser-default-font-size-percent * $mult * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $font-size / 1em * $mult * 1em;
+  }
+  @else if $unit == 'pt' {
+    @return $font-size / $browser-default-font-size-pt * $mult * 1em;
+  }
+  @else {
+    @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
+  }
+}
+
+// This name will be deprecated...
+@function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); }
+
+// Return a length, after any em-values have been sent through absolute-ems().
+//
+// $length      : The length value to be checked and adjusted if necessary.
+// $font-size   : The current font-size in px.
+@function fix-ems(
+  $length,
+  $font-size: $base-font-size
+){
+  @if $length {
+    @if (unit($length) == 'em') or (unit($length) == 'rem') {
+      $length: absolute-ems($length,$font-size);
+    }
+  }
+  @return $length;
+}
+
+// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
+//
+// $media-layout  : a list of values [$min $layout $max $ie] including...
+//                : - one unitless number (columns in a layout)
+//                : - two optional lengths (min and max-width media-query breakpoints).
+//                : - one optional boolean or string to trigger fallback support for IE.
+// $font-size     : [optional] The base font-size of your layout, if you are using ems.
+//                : - defaults to $base-font-size
+@function medialayout(
+  $media-layout,
+  $font-size: $base-font-size
+) {
+  $media        : false;
+  $min          : false;
+  $layout       : false;
+  $max          : false;
+  $ie           : false;
+  $has-layout   : false;
+
+  @each $val in $media-layout {
+    @if (type-of($val) == "number") {
+      @if unitless($val) {
+        $layout     : $val;
+        $has-layout : true;
+      } @else {
+        @if ($has-layout) and (not $media) {
+          $max: $val;
+        } @else {
+          @if $media {
+            $media: join($media,$val);
+          } @else {
+            $media: $val;
+          }
+        }
+      }
+    } @else {
+      $ie: $val;
+    }
+  }
+  @if (length($media) > 0) {
+    @if (length($media) == 1) {
+      $min: nth($media,1);
+    } @else {
+      $min: nth($media,1);
+      $max: nth($media,2);
+      @if comparable($min, $max) {
+        @if ($min > $max) {
+          $max: nth($media,1);
+          $min: nth($media,2);
+        }
+      } @else {
+        @warn "Can't compare incompatible units.
+         Using #{$min} for min-width, and #{$max} for max-width";
+      }
+      @if (length($media) > 2) {
+        @warn "You can only send two lengths: a min-width and an (optional) max-width.
+         You sent #{length($media)}: #{$media}";
+      }
+    }
+  }
+
+  // media-queries must be set in ems relative to the browser default
+  // rather than the font-size set in CSS.
+  $min: fix-ems($min,$font-size);
+  $max: fix-ems($max,$font-size);
+
+  @return $min $layout $max $ie;
+}
+
+// Return the nearest layout (column-count) above a given breakpoint.
+//
+// $min : The min-width media-query breakpoint above which to establish a new layout.
+@function get-layout (
+  $min
+) {
+  $min      : fix-ems($min);
+  $return   : false;
+
+  @if comparable($min, $column-width) {
+    $return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
+  } @else {
+    @warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
+  }
+
+  @return $return;
+}
+
+// Check to see if a given $media-layout list is simply the default.
+//
+// $media-layout  : a list of values including -
+//                : One unitless number (columns in a layout)
+//                : Two optional lengths (min and max-width media-query breakpoints).
+//                : One optional boolean or string to trigger fallback support for IE.
+@function is-default-layout(
+  $media-layout
+) {
+  $media-layout : medialayout($media-layout);
+  $min          : nth($media-layout,1);
+  $layout-cols  : nth($media-layout,2);
+  $max          : nth($media-layout,3);
+
+  @if $min or $max {
+    @return false;
+  } @else {
+    @return if($layout-cols == $total-columns,true,false);
+  }
+}