singularitygs 1.1.2 → 1.2.0.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +7 -7
  2. data/lib/singularitygs.rb +2 -2
  3. data/stylesheets/_singularitygs.scss +13 -26
  4. data/stylesheets/singularitygs/_api.scss +89 -29
  5. data/stylesheets/singularitygs/_helpers.scss +6 -2
  6. data/stylesheets/singularitygs/api/_float.scss +87 -147
  7. data/stylesheets/singularitygs/api/_isolation.scss +81 -133
  8. data/stylesheets/singularitygs/grids/_add.scss +34 -16
  9. data/stylesheets/singularitygs/grids/_find.scss +6 -8
  10. data/stylesheets/singularitygs/gutter-styles/_add.scss +39 -16
  11. data/stylesheets/singularitygs/gutter-styles/_find.scss +10 -5
  12. data/stylesheets/singularitygs/gutter-styles/_helpers.scss +6 -10
  13. data/stylesheets/singularitygs/gutters/_add.scss +37 -14
  14. data/stylesheets/singularitygs/gutters/_find.scss +9 -5
  15. data/stylesheets/singularitygs/helpers/_background-grid.scss +155 -181
  16. data/stylesheets/singularitygs/helpers/_box-sizing.scss +17 -32
  17. data/stylesheets/singularitygs/helpers/_clearfix.scss +10 -95
  18. data/stylesheets/singularitygs/helpers/_columns.scss +4 -3
  19. data/stylesheets/singularitygs/helpers/_directions.scss +6 -0
  20. data/stylesheets/singularitygs/helpers/_find.scss +112 -64
  21. data/stylesheets/singularitygs/helpers/_layout.scss +39 -10
  22. data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
  23. data/stylesheets/singularitygs/helpers/_settings.scss +98 -0
  24. data/stylesheets/singularitygs/helpers/_sort.scss +56 -0
  25. data/stylesheets/singularitygs/helpers/_span-shared.scss +20 -2
  26. data/stylesheets/singularitygs/language/_parse-add.scss +52 -8
  27. data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
  28. data/stylesheets/singularitygs/math/_columns.scss +5 -4
  29. data/stylesheets/singularitygs/math/_context.scss +1 -1
  30. data/stylesheets/singularitygs/math/_gutters.scss +2 -1
  31. metadata +63 -54
@@ -1,89 +1,137 @@
1
+ //////////////////////////////
2
+ // Find Object Keys
3
+ //
4
+ // Returns
5
+ //////////////////////////////
6
+ @function find-object-keys($haystack) {
7
+ $Keys: map-keys($haystack);
8
+ $List: ();
9
+ @each $Key in $Keys {
10
+ @if $Key != -1px {
11
+ @if unit($Key) == 'em' {
12
+ $Key: $Key / 1em * 16px;
13
+ }
14
+ $List: append($List, $Key);
15
+ }
16
+ }
17
+ @return quicksort($List);
18
+ }
19
+
1
20
  //////////////////////////////
2
21
  // Find Object
3
22
  //
4
23
  // Finds relevant object
5
24
  // Must be using Breakpoint to work properly
6
25
  //////////////////////////////
7
- @function find-object($haystack, $user-object: false) {
8
- $length: length($haystack);
9
-
10
- @if $user-object != false {
26
+ @function find-object($haystack, $user-object: null) {
27
+ // If a user object has been passed in, bypass the whole function and just return that object.
28
+ @if $user-object != null and $user-object != false {
11
29
  @return $user-object;
12
30
  }
13
- @else if $length > 1 {
14
- //////////////////////////////
15
- // @TODO! REplace with Native Sass Fucntion when vailable!
16
- // https://github.com/nex3/sass/pull/689
17
- //////////////////////////////
18
- @if (is-breakpoint-list($haystack) != false) {
19
- $query-min: breakpoint-get-context('min-width');
20
- $query-max: breakpoint-get-context('max-width');
21
31
 
22
- // If we've got a min-width or max-width
23
- @if $query-min or $query-max {
24
- // Reverse the grid so we can step through it
25
- $reverse-haystack: ();
26
- @for $i from 2 through $length {
27
- $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
28
- }
29
- $reverse-haystack: reverse($reverse-haystack);
30
- $rg-length: $length - 1;
32
+ $Deprecate-Warning: singularity-deprecation-warning();
33
+ $Length: length($haystack);
34
+ $Mobile-First: sgs-get('mobile first');
31
35
 
32
- // Grab the largest and smallest MQs
33
- $smallest: nth(nth($haystack, 2), 2);
34
- $largest: nth(nth($reverse-haystack, 1), 2);
35
- $context: $query-min;
36
+ // Haystack must be map
37
+ @if type-of($haystack) != 'map' {
38
+ @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.";
39
+ @return nth($haystack, 1);
40
+ }
36
41
 
37
- @if not ($mobile-first) {
38
- $context: $query-max;
42
+ // Grab Breakpoint Context
43
+ @if not function-exists(breakpoint-get-context) {
44
+ @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.";
45
+ @return map-get($haystack, -1px);
46
+ }
47
+ // Get Breakpoint Contexts
48
+ $Query-Min: breakpoint-get-context('min-width');
49
+ $Query-Max: breakpoint-get-context('max-width');
50
+
51
+ @if length($Query-Min) == 1 {
52
+ $Query-Min: nth($Query-Min, 1);
53
+ }
54
+ @else if length($Query-Min) > 1 {
55
+ @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.";
56
+ @return map-get($haystack, -1px);
57
+ }
58
+
59
+
60
+ @if $Length > 1 {
61
+ @if length($Query-Max) == 1 {
62
+ $Query-Max: nth($Query-Max, 1);
63
+ }
64
+ @else if length($Query-Max) > 1 {
65
+ @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.";
66
+ @return map-get($haystack, -1px);
67
+ }
68
+
69
+ // If there is no min or max context, return first item
70
+ @if $Query-Min == false and $Query-Max == false {
71
+ $RETURN: map-get($haystack, -1px);
72
+ @return $RETURN;
73
+ }
74
+
75
+ // Convert to PX
76
+ @if $Query-Min != false and unit($Query-Min) == 'em' {
77
+ $Query-Min: $Query-Min / 1em * 16px;
78
+ }
79
+ @if $Query-Max != false and unit($Query-Max) == 'em' {
80
+ $Query-Max: $Query-Max / 1em * 16px;
81
+ }
82
+
83
+ $Find-Haystack: find-object-keys($haystack);
84
+ $Reverse-Haystack: reverse($Find-Haystack);
85
+
86
+ $Smallest: nth($Find-Haystack, 1);
87
+ $Largest: nth($Reverse-Haystack, 1);
88
+ $Context: $Query-Min;
89
+
90
+ @if not $Mobile-First {
91
+ $Context: $Query-Max;
92
+ }
93
+
94
+ // Loop over each item in Context to find if any of the items pass.
95
+ @each $Query-Context in $Context {
96
+ @if $Query-Context != false {
97
+ // If it's smallest than the smallest MQ, use the 1st grid
98
+ @if $Query-Context < $Smallest {
99
+ $RETURN: map-get($haystack, -1px);
100
+ @return $RETURN;
39
101
  }
102
+ // If it's larger than or equal to the largest MQ, use the last grid
103
+ @else if $Query-Context >= $Largest {
104
+ $RETURN: map-get($haystack, $Largest);
105
+ @return $RETURN;
106
+ }
107
+ // If it's in between the smallest and largest, go run a check.
108
+ @else {
109
+ // Loop through each MQ.
110
+ @for $j from 1 through length($Reverse-Haystack) {
111
+ $Query: nth($Reverse-Haystack, $j);
40
112
 
41
- // Loop over each item in Context to find if any of the items pass.
42
- @each $query-context in $context {
43
- @if $query-context != false {
44
- // If it's smallest than the smallest MQ, use the 1st grid
45
- @if $query-context < $smallest {
46
- @return nth($haystack, 1);
47
- }
48
- // If it's larger than or equal to the largest MQ, use the last grid
49
- @else if $query-context >= $largest {
50
- @return nth(nth($reverse-haystack, 1), 1);
113
+ // If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
114
+ @if ($Mobile-First) {
115
+ @if $Query-Context >= $Query {
116
+ $RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
117
+ @return $RETURN;
118
+ }
51
119
  }
52
- // If it's in between the smallest and largest, go run a check.
120
+ // If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
53
121
  @else {
54
- // Loop through each MQ.
55
- @for $j from 1 through $rg-length {
56
- $query: nth(nth($reverse-haystack, $j), 2);
57
-
58
- // If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
59
- @if ($mobile-first) {
60
- @if $query-context >= $query {
61
- @return nth(nth($reverse-haystack, $j), 1);
62
- }
63
- }
64
- // If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
65
- @else {
66
- @if $query-context <= $query {
67
- @return nth(nth($reverse-haystack, $j), 1);
68
- }
69
- }
122
+ @if $Query-Context <= $Query {
123
+ $RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
124
+ @return $RETURN;
70
125
  }
71
126
  }
72
127
  }
73
128
  }
74
- @return nth($haystack, 1);
75
- }
76
- // All else fails, return the first grid
77
- @else {
78
- @return nth($haystack, 1);
79
129
  }
80
130
  }
81
- @else {
82
- @return $haystack;
83
- }
84
131
  }
85
- // All else fails, return the first grid
132
+ // All else fails, return the first item
86
133
  @else {
87
- @return nth($haystack, 1);
134
+ $RETURN: map-get($haystack, -1px);
135
+ @return $RETURN;
88
136
  }
89
137
  }
@@ -1,28 +1,57 @@
1
1
  //////////////////////////////
2
2
  // Wrapper mixin for overriding the global contexts as a block
3
3
  //////////////////////////////
4
- @mixin layout($grid: false, $gutter: false, $output-style: false) {
4
+ @mixin layout($grid: false, $gutter: false, $output-style: false, $gutter-style: false) {
5
5
  // Private holder for current global context
6
- $layout-private-grid-holder: $grids;
7
- $layout-private-gutter-holder: $gutters;
8
- $layout-private-output-holder: $output;
6
+ $layout-private-grid-holder: sgs-get('grids');
7
+ $layout-private-gutter-holder: sgs-get('gutters');
8
+ $layout-private-output-holder: sgs-get('output');
9
+ $layout-private-gutter-style-holder: sgs-get('gutter styles');
9
10
 
10
11
  // Overides current global contexts, but only if needed
11
12
  @if $grid != false {
12
- $grids: $grid;
13
+ @include sgs-reset('grids');
14
+ @if type-of($grid) != 'map' {
15
+ @include sgs-change('grids', (-1px: $grid));
16
+ }
17
+ @else {
18
+ @include sgs-change('grids', $grid);
19
+ }
13
20
  }
14
21
  @if $gutter != false {
15
- $gutters: $gutter;
22
+ @include sgs-reset('gutters');
23
+ @if type-of($gutter) != 'map' {
24
+ @include sgs-change('gutters', (-1px: $gutter));
25
+ }
26
+ @else {
27
+ @include sgs-change('gutters', $gutter);
28
+ }
16
29
  }
17
30
  @if $output-style != false {
18
- $output: $output-style;
31
+ @include sgs-reset('output');
32
+ @include sgs-change('output', $output-style);
33
+ }
34
+ @if $gutter-style != false {
35
+ @include sgs-reset('gutter styles');
36
+ @if type-of($gutter-style) != 'map' {
37
+ @include sgs-change('gutter styles', (-1px: $gutter-style));
38
+ }
39
+ @else {
40
+ @include sgs-change('gutter styles', $gutter-style);
41
+ }
19
42
  }
20
43
 
21
44
  // All the things!
22
45
  @content;
23
46
 
47
+ // REset ALL the settings
48
+ @include sgs-reset('grids');
49
+ @include sgs-reset('gutters');
50
+ @include sgs-reset('output');
51
+ @include sgs-reset('gutter styles');
24
52
  // Resets global contexts
25
- $grids: $layout-private-grid-holder;
26
- $gutters: $layout-private-gutter-holder;
27
- $output: $layout-private-output-holder;
53
+ @include sgs-change('grids', $layout-private-grid-holder);
54
+ @include sgs-change('gutters', $layout-private-gutter-holder);
55
+ @include sgs-change('output', $layout-private-output-holder);
56
+ @include sgs-change('gutter styles', $layout-private-gutter-style-holder);
28
57
  }
@@ -65,7 +65,7 @@
65
65
  $length: length($list);
66
66
  $return: ();
67
67
  @for $i from 0 to $length {
68
- $return: append($return, nth($list, $length - $i), comma);
68
+ $return: append($return, nth($list, $length - $i));
69
69
  }
70
70
  @return $return;
71
71
  }
@@ -0,0 +1,98 @@
1
+ //////////////////////////////
2
+ // Deprecation Warnings for new Setting System
3
+ //////////////////////////////
4
+ @function singularity-deprecation-warning() {
5
+ $Singularity-Global-Vars: 'grids', 'gutters', 'gutter-styles', 'mobile-first', 'output', 'direction', 'include-border-box', 'include-clearfix';
6
+
7
+ @each $var in $Singularity-Global-Vars {
8
+ @if global-variable-exists($var) {
9
+ $Singularity-Warning-Output: "DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single `$singularity` variable.";
10
+
11
+ @if $var == 'grids' or $var == 'gutters' or $var == 'gutter-styles' {
12
+ $Singularity-Singleton-Var: str_slice($var, 1, -2);
13
+ $Singularity-Warning-Output: $Singularity-Warning-Output + " Please replace all `$#{$var}` definitions, and all `add-#{$Singularity-Singleton-Var}()` calls to `@include add-#{$Singularity-Singleton-Var}()`";
14
+ }
15
+ @else {
16
+ // String Replace
17
+ $Singularity-Replace-Index: -1;
18
+ $Singularity-Replace-Holder: '';
19
+ $Singularity-Replace-Spaced: $var;
20
+ @while $Singularity-Replace-Index != 0 {
21
+ $Singularity-Replace-Index: str-index($Singularity-Replace-Spaced, '-');
22
+ @if $Singularity-Replace-Index != 0 {
23
+ $Singularity-Replace-Holder: str-slice($Singularity-Replace-Spaced, 1, $Singularity-Replace-Index - 1) + ' ';
24
+ $Singularity-Replace-Spaced: str-slice($Singularity-Replace-Spaced, $Singularity-Replace-Index + 1);
25
+ $Singularity-Replace-Spaced: $Singularity-Replace-Holder + $Singularity-Replace-Spaced;
26
+ $Singularity-Replace-Index: str-index($Singularity-Replace-Spaced, '-');
27
+ }
28
+ }
29
+ $Singularity-Warning-Output: $Singularity-Warning-Output + " Please replace all `$#{$var}` definitions with `@include sgs-change('#{$Singularity-Replace-Spaced}', $value)`";
30
+ }
31
+
32
+ $Singularity-Warning-Output: $Singularity-Warning-Output + " In the next version of Singularity, this warning will be removed";
33
+
34
+ @warn $Singularity-Warning-Output;
35
+ }
36
+ }
37
+
38
+ @return false;
39
+ }
40
+
41
+ $DEPRECATE:singularity-deprecation-warning();
42
+
43
+ //////////////////////////////
44
+ // Has Setting
45
+ //////////////////////////////
46
+ @function sgs-has($setting) {
47
+ @if map-has-key($singularity, $setting) {
48
+ @return true;
49
+ }
50
+ @else {
51
+ @return false;
52
+ }
53
+ }
54
+
55
+ //////////////////////////////
56
+ // Get Settings
57
+ //////////////////////////////
58
+ @function sgs-get($setting) {
59
+ @if sgs-has($setting) {
60
+ @return map-get($singularity, $setting);
61
+ }
62
+ @else {
63
+ @return map-get($Singularity-Settings, $setting);
64
+ }
65
+ }
66
+
67
+ //////////////////////////////
68
+ // Set Settings
69
+ //////////////////////////////
70
+ @function sgs-set($setting, $value) {
71
+ @if str-index($setting, '-') > 0 {
72
+ @warn "Singularity settings should contain spaces, not dashes. Please replace dashes with spaces. Settings will not work as expected until changed.";
73
+ }
74
+ $singularity: map-merge($singularity, ($setting: $value)) !global;
75
+ @return true;
76
+ }
77
+
78
+ @mixin sgs-change($setting, $value) {
79
+ $sgs-change: sgs-set($setting, $value);
80
+ }
81
+
82
+ //////////////////////////////
83
+ // Remove Setting
84
+ //////////////////////////////
85
+ @function sgs-reset($setting) {
86
+ $Return: ();
87
+
88
+ @each $Key, $Value in $singularity {
89
+ $Return: if($setting == $Key, $Return, map-merge($Return, ($Key: $Value)));
90
+ }
91
+
92
+ $singularity: $Return !global;
93
+ @return true;
94
+ }
95
+
96
+ @mixin sgs-reset($setting) {
97
+ $sgs-reset: sgs-reset($setting);
98
+ }
@@ -0,0 +1,56 @@
1
+ //////////////////////////////
2
+ // Quicksort
3
+ // http://rosettacode.org/wiki/Sorting_algorithms/Quicksort
4
+ //////////////////////////////
5
+ @function quicksort($list) {
6
+
7
+ $QS-Less: ();
8
+ $QS-Equal: ();
9
+ $QS-Large: ();
10
+
11
+ $QS-Length: length($list);
12
+
13
+ $QS-Seed: round($QS-Length / 2);
14
+
15
+ @if $QS-Length > 1 {
16
+ $QS-Seed: nth($list, $QS-Seed);
17
+ @each $Item in $list {
18
+ @if $Item < $QS-Seed {
19
+ $QS-Less: append($QS-Less, $Item);
20
+ }
21
+ @else if $Item == $QS-Seed {
22
+ $QS-Equal: append($QS-Equal, $Item);
23
+ }
24
+ @else {
25
+ $QS-Large: append($QS-Large, $Item);
26
+ }
27
+ }
28
+ $QS-Less: quicksort($QS-Less);
29
+ $QS-Large: quicksort($QS-Large);
30
+
31
+ $QS-Return: join($QS-Less, $QS-Equal);
32
+ $QS-Return: join($QS-Return, $QS-Large);
33
+
34
+ @return $QS-Return;
35
+ }
36
+
37
+ @return $list;
38
+ }
39
+
40
+ //////////////////////////////
41
+ // Sort Map function
42
+ //////////////////////////////
43
+ @function sort-map($map, $reverse: false) {
44
+ $Sort-Map-Keys: quicksort(map-keys($map));
45
+ $Sort-Map-Map: ();
46
+
47
+ @if $reverse {
48
+ $Sort-Map-Keys: reverse($Sort-Map-Keys);
49
+ }
50
+
51
+ @each $key in $Sort-Map-Keys {
52
+ $Sort-Map-Map: map-merge($Sort-Map-Map, ($key: map-get($map, $key)));
53
+ }
54
+
55
+ @return $Sort-Map-Map;
56
+ }
@@ -1,9 +1,27 @@
1
1
  @mixin span-shared {
2
+ $include-border-box: sgs-get('include border box');
3
+ $include-clearfix: sgs-get('include clearfix');
4
+
2
5
  @if $include-border-box {
3
- @include box-sizing('border-box');
6
+ @if mixin-exists(box-sizing) {
7
+ @include box-sizing(border-box);
8
+ }
9
+ @else {
10
+ -moz-box-sizing: border-box;
11
+ box-sizing: border-box;
12
+ }
4
13
  }
5
14
 
6
15
  @if $include-clearfix {
7
- @include clearfix;
16
+ @if mixin-exists(clearfix) {
17
+ @include clearfix;
18
+ }
19
+ @else {
20
+ &:after {
21
+ content: "";
22
+ display: table;
23
+ clear: both;
24
+ }
25
+ }
8
26
  }
9
27
  }
@@ -1,19 +1,63 @@
1
+ //////////////////////////////
2
+ // Parse add string
3
+ //
4
+ // Retrieve add and media query values from a definition
5
+ // parse-add($definition)
6
+ // $definition : <list>
7
+ // - A list like: .25 at 300px
8
+ //
9
+ //////////////////////////////
1
10
  @function parse-add($definition) {
2
- $grid: ();
3
- $mq: false;
4
- $mq-find: false;
11
+ $parse-find: ();
12
+ $parse-mq: null;
13
+ $parse-mq-find: false;
14
+ $Mobile-First: sgs-get('mobile first');
5
15
 
6
16
  @each $item in $definition {
7
- @if $item != 'at' and $mq-find != true {
8
- $grid: append($grid, $item, 'space');
17
+ @if $item != 'at' and $parse-mq-find != true {
18
+ $parse-find: append($parse-find, $item, 'space');
9
19
  }
10
20
  @else if $item == 'at' {
11
- $mq-find: true;
21
+ $parse-mq-find: true;
12
22
  }
13
23
  @else {
14
- $mq: $item;
24
+ $parse-mq: $item;
15
25
  }
16
26
  }
17
27
 
18
- @return ($grid $mq);
28
+ @if $parse-mq {
29
+ @if not function-exists(breakpoint) {
30
+ @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.";
31
+ $parse-mq: -1px;
32
+ }
33
+ @else {
34
+ $breakpoint-parse: breakpoint($parse-mq);
35
+ $breakpoint-parse: map-get($breakpoint-parse, 'context holder');
36
+ $breakpoint-mq: null;
37
+ @if $Mobile-First {
38
+ $breakpoint-mq: map-get($breakpoint-parse, 'min-width');
39
+ }
40
+ @else {
41
+ $breakpoint-mq: map-get($breakpoint-parse, 'max-width');
42
+ }
43
+
44
+ @if length($breakpoint-mq) > 1 {
45
+ @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.";
46
+ $parse-mq: 1px;
47
+ }
48
+ @else if length($breakpoint-mq) < 1 {
49
+ @warn "No " + if($Mobile-First, 'min-width', 'max-width') + ' context found. Please use a media query with the correct context. Context set to -1px.';
50
+ $parse-mq: -1px;
51
+ }
52
+ @else {
53
+ $parse-mq: nth($breakpoint-mq, 1);
54
+ }
55
+ }
56
+ }
57
+
58
+ @if $parse-mq and unit($parse-mq) == 'em' {
59
+ $parse-mq: $parse-mq / 1em * 16px;
60
+ }
61
+
62
+ @return ($parse-find $parse-mq);
19
63
  }
@@ -4,9 +4,10 @@
4
4
  // Retrieve values from the natural language string.
5
5
  // parse-string($var, $list)
6
6
  // $var : <string>
7
- // - at/span/of or any other keywords.
7
+ // - 'at'/'span'/'of' or any other keywords.
8
8
  // - 'span' queries the unprefixed span declaration.
9
9
  // - 'at' can also query first, last, alpha, and omega.
10
+ // - 'grid' will return the same as 'of'
10
11
  // $list : <list>
11
12
  // - A list like this: last 2 of (1 1 2) push 1
12
13
  //
@@ -19,7 +20,6 @@
19
20
 
20
21
  // Loop through list.
21
22
  @each $item in $list {
22
-
23
23
  // if 'span' - return the first numeric.
24
24
  // if keyword was found - return the following item.
25
25
  @if (type-of($item) == number and $var == span and $found != 'grid') or $found == true {
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  // Special handling for Grids
32
- @else if $item == $var and $var == 'of' {
32
+ @else if ($item == $var or $item == 'grid' or $item == 'of') and ($var == 'of' or $var == 'grid') {
33
33
  $found: 'grid';
34
34
  }
35
35
 
@@ -1,11 +1,12 @@
1
1
  //////////////////////////////
2
2
  // Find width, in percentages, of the column span
3
3
  //////////////////////////////
4
- @function column-span($span, $location, $grid: false, $gutter: false, $gutter-style: false) {
4
+ @function column-span($span, $location, $grid: null, $gutter: null, $gutter-style: null) {
5
5
 
6
6
  // Find the grid and gutters
7
7
  $grid: find-grid($grid);
8
8
  $gutter: find-gutter($gutter);
9
+ $gutter-style: find-gutter-style($gutter-style);
9
10
 
10
11
  @if fixed-gutter($grid, $gutter, $gutter-style) {
11
12
  $gutter: 0;
@@ -15,7 +16,7 @@
15
16
  // @debug $gutter;
16
17
 
17
18
  // Combine the grid and gutters
18
- $grid-and-gutters: column-sum($grid, $gutter);
19
+ $grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
19
20
 
20
21
  // @debug $grid-and-gutters;
21
22
 
@@ -52,8 +53,8 @@
52
53
  //////////////////////////////
53
54
  // Find the total sum of the grid
54
55
  //////////////////////////////
55
- @function column-sum($grid, $gutter) {
56
- $split: if(index(find-gutter-style(), split), true, false);
56
+ @function column-sum($grid, $gutter, $gutter-style) {
57
+ $split: if(index($gutter-style, 'split'), true, false);
57
58
 
58
59
  @if type-of($grid) == 'number' or length($grid) == 1 {
59
60
  @if $split {
@@ -1,3 +1,3 @@
1
1
  @function context($primary, $secondary) {
2
- @return ($primary * $secondary) / 100%;;
2
+ @return ($primary / $secondary) * 100%;
3
3
  }
@@ -3,13 +3,14 @@
3
3
  // Find the columns and gutters
4
4
  $grid: find-grid($grid);
5
5
  $gutter: find-gutter($gutter);
6
+ $gutter-style: find-gutter-style($gutter-style);
6
7
 
7
8
  @if fixed-gutter($grid, $gutter, $gutter-style) {
8
9
  @return nth($gutter, 1);
9
10
  }
10
11
 
11
12
  // Combine the columns and gutters
12
- $grid-and-gutters: column-sum($grid, $gutter);
13
+ $grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
13
14
 
14
15
  @return (nth($gutter, 1) / $grid-and-gutters) * 100%
15
16
  }