singularitygs 1.1.2 → 1.8.0

data/stylesheets/singularitygs/helpers/_find.scss

@@ -1,89 +1,136 @@
+//////////////////////////////
+// Find Object Keys
+//
+// Returns
+//////////////////////////////
+@function find-object-keys($haystack) {
+  $Keys: map-keys($haystack);
+  $List: ();
+  @each $Key in $Keys {
+    @if $Key != -1px {
+      @if unit($Key) == 'em' {
+        $Key: $Key / 1em * 16px;
+      }
+      $List: append($List, $Key);
+    }
+  }
+  @return quicksort($List);
+}
+
 //////////////////////////////
 // Find Object
 //
 // Finds relevant object
 // Must be using Breakpoint to work properly
 //////////////////////////////
-@function find-object($haystack, $user-object: false) {
-  $length: length($haystack);
-
-  @if $user-object != false {
+@function find-object($haystack, $user-object: null) {
+  // If a user object has been passed in, bypass the whole function and just return that object.
+  @if $user-object != null and $user-object != false {
     @return $user-object;
   }
-  @else if $length > 1 {
-    //////////////////////////////
-    // @TODO! REplace with Native Sass Fucntion when vailable!
-    // https://github.com/nex3/sass/pull/689
-    //////////////////////////////
-    @if (is-breakpoint-list($haystack) != false) {
-      $query-min: breakpoint-get-context('min-width');
-      $query-max: breakpoint-get-context('max-width');
 
-      // If we've got a min-width or max-width
-      @if $query-min or $query-max {
-        // Reverse the grid so we can step through it
-        $reverse-haystack: ();
-        @for $i from 2 through $length {
-          $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
-        }
-        $reverse-haystack: reverse($reverse-haystack);
-        $rg-length: $length - 1;
+  $Length: length($haystack);
+  $Mobile-First: sgs-get('mobile first');
 
-        // Grab the largest and smallest MQs
-        $smallest: nth(nth($haystack, 2), 2);
-        $largest: nth(nth($reverse-haystack, 1), 2);
-        $context: $query-min;
+  // Haystack must be map
+  @if type-of($haystack) != 'map' {
+    @warn "DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single `$singularity` variable. Please refer to our documentation (https://github.com/Team-Sass/Singularity/wiki) on how to update your settings. In the next version of Singularity, this warning will be removed. #{nth($haystack, 1)} has been returned.";
+    @return nth($haystack, 1);
+  }
 
-        @if not ($mobile-first) {
-          $context: $query-max;
+  @if $Length > 1 {
+    // Grab Breakpoint Context
+    @if not function-exists(breakpoint-get-context) {
+      @warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. First item used.";
+      @return map-get($haystack, -1px);
+    }
+    // Get Breakpoint Contexts
+    $Query-Min: breakpoint-get-context('min-width');
+    $Query-Max: breakpoint-get-context('max-width');
+
+    @if length($Query-Min) == 1 {
+      $Query-Min: nth($Query-Min, 1);
+    }
+    @else if length($Query-Min) > 1 {
+      @warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
+      @return map-get($haystack, -1px);
+    }
+
+
+    @if length($Query-Max) == 1 {
+      $Query-Max: nth($Query-Max, 1);
+    }
+    @else if length($Query-Max) > 1 {
+      @warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
+      @return map-get($haystack, -1px);
+    }
+
+    // If there is no min or max context, return first item
+    @if $Query-Min == false and $Query-Max == false {
+      $RETURN: map-get($haystack, -1px);
+      @return $RETURN;
+    }
+
+    // Convert to PX
+    @if $Query-Min != false and  unit($Query-Min) == 'em' {
+      $Query-Min: $Query-Min / 1em * 16px;
+    }
+    @if $Query-Max != false and unit($Query-Max) == 'em' {
+      $Query-Max: $Query-Max / 1em * 16px;
+    }
+
+    $Find-Haystack: find-object-keys($haystack);
+    $Reverse-Haystack: reverse($Find-Haystack);
+
+    $Smallest: nth($Find-Haystack, 1);
+    $Largest: nth($Reverse-Haystack, 1);
+    $Context: $Query-Min;
+
+    @if not $Mobile-First {
+      $Context: $Query-Max;
+    }
+
+    // Loop over each item in Context to find if any of the items pass.
+    @each $Query-Context in $Context {
+      @if $Query-Context != false {
+        // If it's smallest than the smallest MQ, use the 1st grid
+        @if $Query-Context < $Smallest {
+          $RETURN: map-get($haystack, -1px);
+          @return $RETURN;
         }
+        // If it's larger than or equal to the largest MQ, use the last grid
+        @else if $Query-Context >= $Largest {
+          $RETURN: map-get($haystack, $Largest);
+          @return $RETURN;
+        }
+        // If it's in between the smallest and largest, go run a check.
+        @else {
+          // Loop through each MQ.
+          @for $j from 1 through length($Reverse-Haystack) {
+            $Query: nth($Reverse-Haystack, $j);
 
-	// Loop over each item in Context to find if any of the items pass.
-	@each $query-context in $context {
-	  @if $query-context != false {
-	    // If it's smallest than the smallest MQ, use the 1st grid
-	    @if $query-context < $smallest {
-	      @return nth($haystack, 1);
-	    }
-	    // If it's larger than or equal to the largest MQ, use the last grid
-	    @else if $query-context >= $largest {
-	      @return nth(nth($reverse-haystack, 1), 1);
+            // If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
+            @if ($Mobile-First) {
+              @if $Query-Context >= $Query {
+                $RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
+                @return $RETURN;
+              }
             }
-	    // If it's in between the smallest and largest, go run a check.
+            // If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
             @else {
-	      // Loop through each MQ.
-	      @for $j from 1 through $rg-length {
-		$query: nth(nth($reverse-haystack, $j), 2);
-
-		// If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
-		@if ($mobile-first) {
-		  @if $query-context >= $query {
-		    @return nth(nth($reverse-haystack, $j), 1);
-		  }
-		}
-		// If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
-		@else {
-		  @if $query-context <= $query {
-		    @return nth(nth($reverse-haystack, $j), 1);
-		  }
-		}
+              @if $Query-Context <= $Query {
+                $RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
+                @return $RETURN;
               }
             }
           }
         }
-	@return nth($haystack, 1);
-      }
-      // All else fails, return the first grid
-      @else {
-        @return nth($haystack, 1);
       }
     }
-    @else {
-      @return $haystack;
-    }
   }
-  // All else fails, return the first grid
+  // All else fails, return the first item
   @else {
-    @return nth($haystack, 1);
+    $RETURN: map-get($haystack, -1px);
+    @return $RETURN;
   }
-}
+}

data/stylesheets/singularitygs/helpers/_layout.scss

@@ -1,28 +1,125 @@
 //////////////////////////////
 // Wrapper mixin for overriding the global contexts as a block
 //////////////////////////////
-@mixin layout($grid: false, $gutter: false, $output-style: false) {
+@mixin layout($grid: false, $gutter: false, $output-style: false, $gutter-style: false) {
+
+  @if type-of($grid) == 'map' {
+    $layout: $grid;
+    @if map-has-key($layout, 'grid') {
+      $grid: map-get($layout, 'grid');
+    }
+
+    @if map-has-key($layout, 'gutter') {
+      $gutter: map-get($layout, 'gutter');
+    }
+
+    @if map-has-key($layout, 'output style') {
+      $output-style: map-get($layout, 'output style');
+    }
+    @if map-has-key($layout, 'output') {
+      $output-style: map-get($layout, 'output');
+    }
+
+    @if map-has-key($layout, 'gutter style') {
+      $gutter-style: map-get($layout, 'gutter style');
+    }
+  }
+
   // Private holder for current global context
-  $layout-private-grid-holder: $grids;
-  $layout-private-gutter-holder: $gutters;
-  $layout-private-output-holder: $output;
+  $layout-private-grid-holder: sgs-get('grids');
+  $layout-private-gutter-holder: sgs-get('gutters');
+  $layout-private-output-holder: sgs-get('output');
+  $layout-private-gutter-style-holder: sgs-get('gutter styles');
 
   // Overides current global contexts, but only if needed
   @if $grid != false {
-    $grids: $grid;
+    @include sgs-reset('grids');
+    @if type-of($grid) != 'map' {
+      @include sgs-change('grids', (-1px: $grid));
+    }
+    @else {
+      @include sgs-change('grids', $grid);
+    }
   }
   @if $gutter != false {
-    $gutters: $gutter;
+    @include sgs-reset('gutters');
+    @if type-of($gutter) != 'map' {
+      @include sgs-change('gutters', (-1px: $gutter));
+    }
+    @else {
+      @include sgs-change('gutters', $gutter);
+    }
   }
   @if $output-style != false {
-    $output: $output-style;
+    @include sgs-reset('output');
+    @include sgs-change('output', $output-style);
+  }
+  @if $gutter-style != false {
+    @include sgs-reset('gutter styles');
+    @if type-of($gutter-style) != 'map' {
+      @include sgs-change('gutter styles', (-1px: $gutter-style));
+    }
+    @else {
+      @include sgs-change('gutter styles', $gutter-style);
+    }
   }
 
   // All the things!
   @content;
 
+  // REset ALL the settings
+  @include sgs-reset('grids');
+  @include sgs-reset('gutters');
+  @include sgs-reset('output');
+  @include sgs-reset('gutter styles');
   // Resets global contexts
-  $grids: $layout-private-grid-holder;
-  $gutters: $layout-private-gutter-holder;
-  $output: $layout-private-output-holder;
+  @include sgs-change('grids', $layout-private-grid-holder);
+  @include sgs-change('gutters', $layout-private-gutter-holder);
+  @include sgs-change('output', $layout-private-output-holder);
+  @include sgs-change('gutter styles', $layout-private-gutter-style-holder);
+}
+
+//////////////////////////////
+// Layout At
+// Wrapper mixin for a combined Breakpoint/Layout call
+//////////////////////////////
+@mixin layout-at($layout, $breakpoint) {
+  @include breakpoint($breakpoint) {
+    // If a single value is passed in, assume it's a grid
+    @if type-of($layout) != map {
+      @include layout($layout) {
+        @content;
+      }
+    }
+    // If it is a map, we've got key/values to work with
+    @else {
+      $grid: false;
+      $gutter: false;
+      $output-style: false;
+      $gutter-style: false;
+
+      @if map-has-key($layout, 'grid') {
+        $grid: map-get($layout, 'grid');
+      }
+
+      @if map-has-key($layout, 'gutter') {
+        $gutter: map-get($layout, 'gutter');
+      }
+
+      @if map-has-key($layout, 'output style') {
+        $output-style: map-get($layout, 'output style');
+      }
+      @if map-has-key($layout, 'output') {
+        $output-style: map-get($layout, 'output');
+      }
+
+      @if map-has-key($layout, 'gutter style') {
+        $gutter-style: map-get($layout, 'gutter style');
+      }
+
+      @include layout($grid, $gutter, $output-style, $gutter-style) {
+        @content;
+      }
+    }
+  }
 }

data/stylesheets/singularitygs/helpers/_sass-lists.scss

@@ -65,7 +65,7 @@
   $length: length($list);
   $return: ();
   @for $i from 0 to $length {
-    $return: append($return, nth($list, $length - $i), comma);
+    $return: append($return, nth($list, $length - $i));
   }
   @return $return;
 }

data/stylesheets/singularitygs/helpers/_settings.scss

@@ -0,0 +1,60 @@
+//////////////////////////////
+// Has Setting
+//////////////////////////////
+@function sgs-has($setting) {
+  @if map-has-key($singularity, $setting) {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}
+
+//////////////////////////////
+// Get Settings
+//////////////////////////////
+@function sgs-get($setting) {
+  @if sgs-has($setting) {
+    @return map-get($singularity, $setting);
+  }
+  @else {
+    @return map-get($Singularity-Settings, $setting);
+  }
+}
+
+//////////////////////////////
+// Set Settings
+//////////////////////////////
+@function sgs-set($setting, $value) {
+  @if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
+    @warn "Words in Singularity settings should be spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
+  }
+  $singularity: map-merge($singularity, ($setting: $value)) !global;
+  @return true;
+}
+
+@mixin sgs-change($setting, $value) {
+  $sgs-change: sgs-set($setting, $value);
+}
+
+@mixin sgs-set($setting, $value) {
+  @include sgs-change($setting, $value);
+}
+
+//////////////////////////////
+// Remove Setting
+//////////////////////////////
+@function sgs-reset($settings...) {
+  @if length($settings) == 1 {
+    $settings: nth($settings, 1);
+  }
+
+  @each $setting in $settings {
+    $singularity: map-remove($singularity, $setting) !global;
+  }
+  @return true;
+}
+
+@mixin sgs-reset($settings...) {
+  $sgs-reset: sgs-reset($settings);
+}

data/stylesheets/singularitygs/helpers/_sort.scss

@@ -0,0 +1,56 @@
+//////////////////////////////
+// Quicksort
+// http://rosettacode.org/wiki/Sorting_algorithms/Quicksort
+//////////////////////////////
+@function quicksort($list) {
+
+  $QS-Less: ();
+  $QS-Equal: ();
+  $QS-Large: ();
+
+  $QS-Length: length($list);
+
+  $QS-Seed: round($QS-Length / 2);
+
+  @if $QS-Length > 1 {
+    $QS-Seed: nth($list, $QS-Seed);
+    @each $Item in $list {
+      @if $Item < $QS-Seed {
+        $QS-Less: append($QS-Less, $Item);
+      }
+      @else if $Item == $QS-Seed {
+        $QS-Equal: append($QS-Equal, $Item);
+      }
+      @else {
+        $QS-Large: append($QS-Large, $Item);
+      }
+    }
+    $QS-Less: quicksort($QS-Less);
+    $QS-Large: quicksort($QS-Large);
+
+    $QS-Return: join($QS-Less, $QS-Equal);
+    $QS-Return: join($QS-Return, $QS-Large);
+
+    @return $QS-Return;
+  }
+
+  @return $list;
+}
+
+//////////////////////////////
+// Sort Map function
+//////////////////////////////
+@function sort-map($map, $reverse: false) {
+  $Sort-Map-Keys: quicksort(map-keys($map));
+  $Sort-Map-Map: ();
+
+  @if $reverse {
+    $Sort-Map-Keys: reverse($Sort-Map-Keys);
+  }
+
+  @each $key in $Sort-Map-Keys {
+    $Sort-Map-Map: map-merge($Sort-Map-Map, ($key: map-get($map, $key)));
+  }
+
+  @return $Sort-Map-Map;
+}

data/stylesheets/singularitygs/helpers/_span-shared.scss

@@ -1,9 +1,27 @@
 @mixin span-shared {
+  $include-border-box: sgs-get('include border box');
+  $include-clearfix: sgs-get('include clearfix');
+
   @if $include-border-box {
-    @include box-sizing('border-box');
+    @if mixin-exists(box-sizing) {
+      @include box-sizing(border-box);
+    }
+    @else {
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
   }
 
   @if $include-clearfix {
-    @include clearfix;
+    @if mixin-exists(clearfix) {
+      @include clearfix;
+    }
+    @else {
+      &:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
   }
 }

data/stylesheets/singularitygs/language/_parse-add.scss

@@ -1,19 +1,63 @@
+//////////////////////////////
+// Parse add string
+//
+// Retrieve add and media query values from a definition
+// parse-add($definition)
+//  $definition : <list>
+//        - A list like: .25 at 300px
+//
+//////////////////////////////
 @function parse-add($definition) {
-  $grid: ();
-  $mq: false;
-  $mq-find: false;
+  $parse-find: ();
+  $parse-mq: null;
+  $parse-mq-find: false;
+  $Mobile-First: sgs-get('mobile first');
 
   @each $item in $definition {
-    @if $item != 'at' and $mq-find != true {
-      $grid: append($grid, $item, 'space');
+    @if $item != 'at' and $parse-mq-find != true {
+      $parse-find: append($parse-find, $item, 'space');
     }
     @else if $item == 'at' {
-      $mq-find: true;
+      $parse-mq-find: true;
     }
     @else {
-      $mq: $item;
+      $parse-mq: $item;
     }
   }
 
-  @return ($grid $mq);
-}
+  @if $parse-mq {
+    @if not function-exists(breakpoint) {
+      @warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. Context set to -1px.";
+      $parse-mq: -1px;
+    }
+    @else {
+      $breakpoint-parse: breakpoint($parse-mq);
+      $breakpoint-parse: map-get($breakpoint-parse, 'context holder');
+      $breakpoint-mq: null;
+      @if $Mobile-First {
+        $breakpoint-mq: map-get($breakpoint-parse, 'min-width');
+      }
+      @else {
+        $breakpoint-mq: map-get($breakpoint-parse, 'max-width');
+      }
+
+      @if length($breakpoint-mq) > 1 {
+        @warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Context set to -1px.";
+        $parse-mq: -1px;
+      }
+      @else if length($breakpoint-mq) < 1 {
+        @warn "No " + if($Mobile-First, 'min-width', 'max-width') + ' context found. Please use a media query with the correct context. Context set to -1px.';
+        $parse-mq: -1px;
+      }
+      @else {
+        $parse-mq: nth($breakpoint-mq, 1);
+      }
+    }
+  }
+
+  @if $parse-mq and unit($parse-mq) == 'em' {
+    $parse-mq: $parse-mq / 1em * 16px;
+  }
+
+  @return ($parse-find $parse-mq);
+}

data/stylesheets/singularitygs/language/_parse-list.scss

@@ -4,9 +4,10 @@
 // Retrieve values from the natural language string.
 // parse-string($var, $list)
 //  $var  : <string>
-//        - at/span/of or any other keywords.
+//        - 'at'/'span'/'of' or any other keywords.
 //        - 'span' queries the unprefixed span declaration.
 //        - 'at' can also query first, last, alpha, and omega.
+//        - 'grid' will return the same as 'of'
 //  $list : <list>
 //        - A list like this: last 2 of (1 1 2) push 1
 //
@@ -19,7 +20,6 @@
 
   // Loop through list.
   @each $item in $list {
-
     // if 'span' - return the first numeric.
     // if keyword was found - return the following item.
     @if (type-of($item) == number and $var == span and $found != 'grid') or $found == true {
@@ -29,7 +29,7 @@
     }
 
     // Special handling for Grids
-    @else if $item == $var and $var == 'of' {
+    @else if ($item == $var or $item == 'grid' or $item == 'of') and ($var == 'of' or $var == 'grid') {
       $found: 'grid';
     }
 

data/stylesheets/singularitygs/math/_columns.scss

@@ -1,11 +1,11 @@
 //////////////////////////////
 // Find width, in percentages, of the column span
 //////////////////////////////
-@function column-span($span, $location, $grid: false, $gutter: false, $gutter-style: false) {
-
+@function column-span($span, $location, $grid: null, $gutter: null, $gutter-style: null) {
   // Find the grid and gutters
   $grid: find-grid($grid);
   $gutter: find-gutter($gutter);
+  $gutter-style: find-gutter-style($gutter-style);
 
   @if fixed-gutter($grid, $gutter, $gutter-style) {
     $gutter: 0;
@@ -15,7 +15,7 @@
   // @debug $gutter;
 
   // Combine the grid and gutters
-  $grid-and-gutters: column-sum($grid, $gutter);
+  $grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
 
   // @debug $grid-and-gutters;
 
@@ -35,8 +35,10 @@
     }
     @else {
       $total: $location + $span - 1;
-      @for $i from $location through $total {
-        $span-and-gutters: $span-and-gutters + nth($grid, $i) + $gutter;
+      @if $total != 0 {
+        @for $i from $location through $total {
+          $span-and-gutters: $span-and-gutters + nth($grid, $i) + $gutter;
+        }
       }
     }
     $span-and-gutters: $span-and-gutters - $gutter;
@@ -52,8 +54,8 @@
 //////////////////////////////
 // Find the total sum of the grid
 //////////////////////////////
-@function column-sum($grid, $gutter) {
-  $split: if(index(find-gutter-style(), split), true, false);
+@function column-sum($grid, $gutter, $gutter-style) {
+  $split: if(index($gutter-style, 'split'), true, false);
 
   @if type-of($grid) == 'number' or length($grid) == 1 {
     @if $split {

data/stylesheets/singularitygs/math/_context.scss

@@ -1,3 +1,3 @@
 @function context($primary, $secondary) {
-  @return ($primary * $secondary) / 100%;;
+  @return ($primary / $secondary) * 100%;
 }

data/stylesheets/singularitygs/math/_gutters.scss

@@ -3,13 +3,14 @@
   // Find the columns and gutters
   $grid: find-grid($grid);
   $gutter: find-gutter($gutter);
+  $gutter-style: find-gutter-style($gutter-style);
 
   @if fixed-gutter($grid, $gutter, $gutter-style) {
     @return nth($gutter, 1);
   }
 
   // Combine the columns and gutters
-  $grid-and-gutters: column-sum($grid, $gutter);
+  $grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
 
   @return (nth($gutter, 1) / $grid-and-gutters) * 100%
 }