susy 2.0.0.alpha.6 → 2.0.0.beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +1 -1
  3. data/VERSION +1 -1
  4. data/docs/changelog.rst +568 -0
  5. data/lib/susy.rb +3 -3
  6. data/sass/susy/_helpers.scss +0 -1
  7. data/sass/susy/_math.scss +2 -1
  8. data/sass/susy/api/_float.scss +1 -0
  9. data/sass/susy/api/_shared.scss +2 -0
  10. data/sass/susy/{helpers → api/float}/_clearfix.scss +0 -0
  11. data/sass/susy/api/float/_container.scss +5 -5
  12. data/sass/susy/api/float/_end.scss +10 -3
  13. data/sass/susy/api/float/_isolate.scss +1 -1
  14. data/sass/susy/api/float/_span.scss +1 -1
  15. data/sass/susy/api/shared/_background.scss +2 -2
  16. data/sass/susy/{helpers → api/shared}/_box-sizing.scss +0 -0
  17. data/sass/susy/api/shared/_container.scss +4 -7
  18. data/sass/susy/{helpers → api/shared}/_direction.scss +10 -3
  19. data/sass/susy/api/shared/_margins.scss +1 -1
  20. data/sass/susy/api/shared/_padding.scss +1 -1
  21. data/sass/susy/language/_susy.scss +3 -1
  22. data/sass/susy/language/susy/_background.scss +1 -1
  23. data/sass/susy/language/susy/_bleed.scss +4 -2
  24. data/sass/susy/language/susy/_box-sizing.scss +31 -0
  25. data/sass/susy/language/susy/_breakpoint-plugin.scss +26 -0
  26. data/sass/susy/language/susy/_container.scss +22 -4
  27. data/sass/susy/language/susy/_context.scss +1 -1
  28. data/sass/susy/language/susy/_gallery.scss +20 -18
  29. data/sass/susy/language/susy/_grids.scss +18 -5
  30. data/sass/susy/language/susy/_gutters.scss +3 -3
  31. data/sass/susy/language/susy/_isolate.scss +4 -4
  32. data/sass/susy/language/susy/_rows.scss +66 -73
  33. data/sass/susy/language/susy/_settings.scss +54 -16
  34. data/sass/susy/language/susy/_span.scss +45 -22
  35. data/sass/susy/math/_columns.scss +21 -15
  36. data/sass/susy/math/_container.scss +6 -21
  37. data/sass/susy/math/_settings.scss +24 -0
  38. data/sass/susy/math/_validation.scss +62 -0
  39. data/templates/project/_base.scss +2 -2
  40. data/templates/project/manifest.rb +5 -8
  41. data/templates/project/screen.scss +2 -2
  42. metadata +10 -11
  43. data/CHANGELOG.mkdn +0 -269
  44. data/sass/susy/_core.scss +0 -6
  45. data/sass/susy/_settings.scss +0 -10
  46. data/sass/susy/helpers/_nth.scss +0 -15
  47. data/sass/susy/math/_location.scss +0 -48
  48. data/templates/project/README.md +0 -84
@@ -4,24 +4,27 @@
4
4
  // Set Grid
5
5
  // --------
6
6
  // Set a new grid using a shorthand
7
- // - $grid : <settings>
7
+ // - $grid: <settings>
8
8
  @mixin set-grid(
9
9
  $grid
10
10
  ) {
11
11
  $susy: map-merge($susy, parse-grid($grid)) !global;
12
12
  }
13
13
 
14
- // Alternative syntax
14
+ // Susy Set
15
+ // --------
16
+ // Change one setting
15
17
  @mixin susy-set(
16
- $grid
18
+ $key,
19
+ $value
17
20
  ) {
18
- @include set-grid($grid);
21
+ $susy: map-merge($susy, ($key: $value)) !global;
19
22
  }
20
23
 
21
24
  // Use Grid
22
25
  // --------
23
26
  // Use an arbitrary grid for a section of code
24
- // - $grid : <settings>
27
+ // - $grid: <settings>
25
28
  @mixin use-grid(
26
29
  $grid
27
30
  ) {
@@ -32,3 +35,13 @@
32
35
 
33
36
  $susy: $old !global;
34
37
  }
38
+
39
+ // Layout
40
+ // ------
41
+ // Return a parsed layout map based on shorthand syntax
42
+ // - $grid: <settings>
43
+ @function layout(
44
+ $grid: $susy
45
+ ) {
46
+ @return parse-grid($grid);
47
+ }
@@ -58,10 +58,10 @@
58
58
  $context: $susy
59
59
  ) {
60
60
  $context : parse-gutters($context);
61
+ $gutters : susy-get(gutters, $context);
61
62
  $gutter : susy-get(gutter-override, $context);
62
63
 
63
- @if not $gutter {
64
- $gutters: susy-get(gutters, $context);
64
+ @if $gutters and ($gutters > 0) and not $gutter {
65
65
  $column-width: susy-get(column-width, $context);
66
66
  @if $column-width and gutter-math($context) == static {
67
67
  $gutter: $gutters * $column-width;
@@ -132,7 +132,7 @@
132
132
  @function gutter-math(
133
133
  $context: $susy
134
134
  ) {
135
- $return : susy-get(layout-math, $context);
135
+ $return : susy-get(math, $context);
136
136
  $return : if(susy-get(gutter-position, $context) == inside-static, static, $return);
137
137
 
138
138
  @return $return;
@@ -25,14 +25,14 @@
25
25
  $input
26
26
  ) {
27
27
  $span : susy-get(span, $input);
28
- $location : susy-get(location, $input);
28
+ $location : get-location($input);
29
29
  $columns : susy-get(columns, $input);
30
30
  $width : null;
31
31
 
32
32
  @if type-of($location) == number and not unitless($location) {
33
33
  $width: $location;
34
- } @else {
35
- $push: get-location($span, $location, $columns) - 1;
34
+ } @else if $location {
35
+ $push: $location - 1;
36
36
  @if $push > 0 {
37
37
  $push: map-merge($input, (
38
38
  span: $push,
@@ -47,5 +47,5 @@
47
47
  $width: if($width == null, gutters($input), $width + gutters($input));
48
48
  }
49
49
 
50
- @return $width;
50
+ @return $width or 0;
51
51
  }
@@ -1,46 +1,33 @@
1
1
  // Row Start & End
2
2
  // ===============
3
3
 
4
- // Row
5
- // ---
6
- // Apply to any layout element that should force a new layout row.
7
- // - [$flow] : ltr | rtl
8
- @mixin row(
9
- $flow: susy-get(flow)
10
- ) {
11
- @include susy-clearfix;
4
+
5
+ // Break
6
+ // -----
7
+ // Apply to any element that should force a line break.
8
+ @mixin break {
12
9
  clear: both;
13
10
  }
14
11
 
15
- // Unrow
16
- // -----
17
- // Cancel the row() effect, e.g. when using media queries.
18
- // - [$flow]: ltr | rtl
19
- @mixin unrow {
12
+
13
+ // NoBreak
14
+ // -------
15
+ // Cancel the break() effect, e.g. when using media queries.
16
+ @mixin nobreak {
20
17
  clear: none;
21
- &:after {
22
- content: none;
23
- display: inline;
24
- clear: none;
25
- }
26
18
  }
27
19
 
20
+
28
21
  // Full
29
22
  // ----
30
23
  // - [$span]: <span settings>
31
24
  @mixin full(
32
- $span: $susy
25
+ $context: $susy
33
26
  ) {
34
- $span: parse-span($span);
35
-
36
- @include row(susy-get(flow, $span));
37
- @if is-split($span) and not susy-get(is-container, $span) {
38
- @include gutters($span);
39
- }
40
- float: none;
41
- width: auto;
27
+ @include span(full of parse-grid($context) break);
42
28
  }
43
29
 
30
+
44
31
  // First
45
32
  // -----
46
33
  // - [$grid]: <settings>
@@ -49,9 +36,8 @@
49
36
  ) {
50
37
  $grid: parse-grid($grid);
51
38
  $flow: susy-get(flow, $grid);
52
- $split: if(susy-get(gutter-position, $grid) == split, true, false);
53
39
 
54
- @if not $split {
40
+ @if not is-split($grid) {
55
41
  @include float-first($flow);
56
42
  }
57
43
  }
@@ -62,32 +48,9 @@
62
48
  @include first($grid);
63
49
  }
64
50
 
65
- // Nth-First
66
- // ---------
67
- // - [$value] : first | last | only | <math>
68
- // - [$type] : child | last-child | of-type | last-of-type
69
- @mixin nth-first(
70
- $value: first,
71
- $type: child,
72
- $grid: $susy
73
- ) {
74
- &:#{format-nth($value,$type)} { @include first($grid); }
75
- }
76
-
77
- // Nth-Alpha
78
- // ---------
79
- // - [$value] : first | last | only | <math>
80
- // - [$type] : child | last-child | of-type | last-of-type
81
- @mixin nth-alpha(
82
- $value: first,
83
- $type: child,
84
- $grid: $susy
85
- ) {
86
- @include nth-first($value, $type, $grid);
87
- }
88
51
 
89
52
  // Last
90
- // -----
53
+ // ----
91
54
  // - [$grid]: <settings>
92
55
  @mixin last(
93
56
  $grid: $susy
@@ -95,7 +58,7 @@
95
58
  $grid: parse-grid($grid);
96
59
  $output: (
97
60
  flow: susy-get(flow, $grid),
98
- margin: if(susy-get(gutter-position, $grid) == split, gutters($grid), 0),
61
+ margin: if(is-split($grid), gutters($grid), 0),
99
62
  );
100
63
 
101
64
  @include float-last($output...);
@@ -107,28 +70,58 @@
107
70
  @include last($grid);
108
71
  }
109
72
 
110
- // Nth-Last
73
+
74
+ // Get Edge
111
75
  // --------
112
- // - [$value] : first | last | only | <math>
113
- // - [$type] : child | last-child | of-type | last-of-type
114
- // - [$grid] : <settings>
115
- @mixin nth-last(
116
- $value: last,
117
- $type: child,
118
- $grid: $susy
76
+ // Calculate edge value based on location, if possible
77
+ @function get-edge(
78
+ $span
119
79
  ) {
120
- &:#{format-nth($value,$type)} { @include last($grid); }
80
+ $span : parse-span($span);
81
+ $edge : susy-get(edge, $span);
82
+
83
+ @if not $edge {
84
+ $count: column-count(susy-get(columns, $span));
85
+ $location: susy-get(location, $span);
86
+ $n: susy-get(span, $span);
87
+
88
+ @if $n == $count {
89
+ $edge: full;
90
+ } @else if $location {
91
+ @if $location == 1 {
92
+ $edge: if($n == $count, full, first);
93
+ } @else if $location + $n - 1 == $count {
94
+ $edge: last;
95
+ }
96
+ }
97
+ }
98
+
99
+ @if $edge == alpha or $edge == omega {
100
+ $edge: if($edge == alpha, first, last);
101
+ }
102
+
103
+ @return $edge;
121
104
  }
122
105
 
123
- // Nth-Omega
124
- // ---------
125
- // - [$value] : first | last | only | <math>
126
- // - [$type] : child | last-child | of-type | last-of-type
127
- // - [$grid] : <settings>
128
- @mixin nth-omega(
129
- $value: last,
130
- $type: child,
131
- $grid: $susy
106
+
107
+ // Get Location
108
+ // ------------
109
+ // Calculate location value based on edge, if possible
110
+ @function get-location(
111
+ $span
132
112
  ) {
133
- @include nth-last($value, $type, $grid);
113
+ $span : parse-span($span);
114
+ $location : susy-get(location, $span);
115
+ $edge : get-edge($span);
116
+ $n : susy-get(span, $span);
117
+
118
+ @if $edge and not $location and type-of($n) == number and unitless($n) {
119
+ @if $edge == first {
120
+ $location: 1;
121
+ } @else if $edge == last {
122
+ $location: column-count(susy-get(columns, $span)) - $n + 1;
123
+ }
124
+ }
125
+
126
+ @return $location
134
127
  }
@@ -1,37 +1,39 @@
1
1
  // Susy Next Settings
2
2
  // ==================
3
3
 
4
- // Susy Defaults
5
- // -------------
6
- // - PRIVATE: DONT'T TOUCH
7
- $susy-defaults: map-merge($susy-defaults, (
4
+ // Susy Language Defaults
5
+ // ----------------------
6
+ // - PRIVATE
7
+ @include susy-defaults((
8
8
  container: auto,
9
- last-flow: to,
10
- layout-math: fluid,
11
- layout-method: float,
12
- flow: ltr,
13
- box-sizing: false,
9
+ math: fluid,
10
+ output: float,
14
11
  container-position: center,
15
12
  gutter-position: after,
16
- show-grids: show,
13
+ show-grids: hide,
14
+ global-box-sizing: content-box,
17
15
  ));
18
16
 
17
+ $nullable: gutters container-position;
18
+
19
19
  // Valid Keyword Values
20
20
  // --------------------
21
21
  // - PRIVATE: DONT'T TOUCH
22
22
  $susy-keywords: (
23
23
  container: auto,
24
- layout-math: static fluid,
25
- layout-method: isolate float,
24
+ math: static fluid,
25
+ output: isolate float,
26
26
  container-position: left center right,
27
27
  flow: ltr rtl,
28
28
  show-grids: show hide show-columns show-baseline,
29
29
  gutter-position: before after split inside inside-static,
30
30
  box-sizing: border-box content-box,
31
- location: first alpha last omega,
31
+ span: full,
32
+ edge: first alpha last omega full,
32
33
  spread: narrow wide wider,
33
34
  gutter-override: no-gutters no-gutter,
34
- is-container: container,
35
+ role: nest,
36
+ clear: break nobreak,
35
37
  );
36
38
 
37
39
  // User Settings
@@ -182,7 +184,31 @@ $susy: () !default;
182
184
  @function parse-gutters(
183
185
  $short: $susy
184
186
  ) {
185
- @return parse-span($short, gutter-override);
187
+ $gutters: parse-span($short, gutter-override);
188
+ $span: susy-get(gutter-override, $gutters);
189
+
190
+ @if $span and not map-get($gutters, columns) {
191
+ $context: ();
192
+ $new: ();
193
+
194
+ @each $item in $span {
195
+ @if type-of($item) == number and unitless($item) {
196
+ $context: append($context, $item);
197
+ } @else {
198
+ $new: append($new, $item);
199
+ }
200
+ }
201
+
202
+ $context: parse-grid($context);
203
+ $new: if(length($new) == 0, null, $new);
204
+ $new: if(length($new) == 1, nth($new, 1), $new);
205
+ $new: (gutter-override: if($new != $span, $new, $span));
206
+
207
+ $gutters: map-merge($gutters, $new);
208
+ $gutters: map-merge($gutters, $context);
209
+ }
210
+
211
+ @return $gutters;
186
212
  }
187
213
 
188
214
  // Susy Get
@@ -195,6 +221,18 @@ $susy: () !default;
195
221
  $grid: map-merge($susy-defaults, $susy)
196
222
  ) {
197
223
  $grid: parse-grid($grid);
224
+ $options: $grid $susy $susy-defaults;
225
+ $nullish: index($nullable, $key);
226
+ $break: false;
227
+ $return: null;
228
+
229
+ @each $opt in $options {
230
+ $keyset: index(map-keys($opt), $key);
231
+ @if not $break {
232
+ $return: map-get($opt, $key);
233
+ $break: $return or if($keyset and $nullish, true, false);
234
+ }
235
+ }
198
236
 
199
- @return map-get($grid, $key) or map-get($susy, $key) or map-get($susy-defaults, $key);
237
+ @return $return;
200
238
  }
@@ -8,13 +8,29 @@
8
8
  @mixin span(
9
9
  $span
10
10
  ) {
11
- $span : parse-span($span);
12
- $output : span-math($span);
13
- $box : susy-get(box-sizing, $span) or if(is-inside($span), border-box, null);
11
+ $span: parse-span($span);
12
+ $output: span-math($span);
13
+ $nesting: susy-get(span, $span);
14
+ $clear: susy-get(clear, $span);
15
+
16
+ $box: susy-get(box-sizing, $span);
17
+ $content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
18
+ $box: $box or if(is-inside($span) and $content-box, border-box, null);
19
+
20
+ @if $clear == break {
21
+ @include break;
22
+ } @else if $clear == nobreak {
23
+ @include nobreak;
24
+ }
14
25
 
15
26
  @include susy-box-sizing($box);
16
27
  @include float-span-output($output...);
17
- @include nested($span) { @content; }
28
+
29
+ @if type-of($nesting) == number and unitless($nesting) {
30
+ @include nested($span) { @content; }
31
+ } @else {
32
+ @content;
33
+ }
18
34
  }
19
35
 
20
36
  // Span [function]
@@ -34,7 +50,10 @@
34
50
  @function span-math(
35
51
  $span
36
52
  ) {
37
- $split-container : if(is-split($span) and susy-get(is-container, $span), true, false);
53
+ $nest : if(susy-get(role, $span) == nest, true, false);
54
+ $split-nest : if(is-split($span) and $nest, true, false);
55
+ $edge : get-edge($span);
56
+ $location : get-location($span);
38
57
 
39
58
  $float : from;
40
59
  $padding-before : null;
@@ -44,38 +63,36 @@
44
63
 
45
64
  // calculate widths
46
65
  $spread: index(map-values($span), spread);
47
- $span: if($split-container and not $spread, map-merge($span, (spread: wide)), $span);
66
+ $span: if($split-nest and not $spread, map-merge($span, (spread: wide)), $span);
48
67
  $width: get-span-width($span);
49
68
  $gutters: get-gutters($span);
50
69
 
51
70
  // apply gutters
52
71
  @if is-inside($span) {
53
- @if not susy-get(is-container, $span) {
72
+ @if not susy-get(role, $span) {
54
73
  $padding-before: map-get($gutters, before);
55
74
  $padding-after: map-get($gutters, after);
56
75
  }
57
76
  } @else {
58
- @if not ($split-container) {
77
+ @if not ($split-nest) {
59
78
  $margin-before: map-get($gutters, before);
60
79
  $margin-after: map-get($gutters, after);
61
80
  }
62
81
  }
63
82
 
64
83
  // special margin handling
65
- @if susy-get(layout-method, $span) == isolate {
84
+ @if susy-get(output, $span) == isolate and $location {
66
85
  $margin-before: get-isolation($span);
67
86
  $margin-after: -100%;
68
- } @else {
69
- $location: susy-get(location, $span);
70
- @if $location {
71
- $last: is-last(susy-get(span, $span), $location, susy-get(columns, $span));
72
- $is-split: is-split($span);
73
- @if $last {
74
- $float: susy-get(last-flow, $span);
75
- $margin-after: if($is-split, $margin-after, null);
76
- } @else if is-first($location) {
77
- $margin-before: if($is-split, $margin-before, null);
78
- }
87
+ } @else if $edge {
88
+ $is-split: is-split($span);
89
+ @if $edge == last or $edge == full {
90
+ $margin-after: if($is-split, $margin-after, null);
91
+ }
92
+ @if $edge == first or $edge == full {
93
+ $margin-before: if($is-split, $margin-before, null);
94
+ } @else if $edge == last {
95
+ $float: susy-get(last-flow, $span);
79
96
  }
80
97
  }
81
98
 
@@ -100,7 +117,7 @@
100
117
  $span : parse-span($span);
101
118
 
102
119
  $n : susy-get(span, $span);
103
- $location : susy-get(location, $span);
120
+ $location : get-location($span);
104
121
  $columns : susy-get(columns, $span);
105
122
  $gutters : susy-get(gutters, $span);
106
123
  $spread : susy-get(spread, $span);
@@ -109,11 +126,17 @@
109
126
  $span-sum : null;
110
127
  $width : null;
111
128
 
129
+ @if $n == 'full' {
130
+ $pos: susy-get(gutter-position, $span);
131
+ $role: susy-get(role, $span);
132
+ $n: if($pos == split and $role != nest, column-count($columns), 100%);
133
+ }
134
+
112
135
  @if unitless($n) {
113
136
  $context: column-sum($columns, $gutters, if(is-split($span), wide, narrow));
114
137
  $span-sum: get-column-span-sum($n, $location, $columns, $gutters, if(is-inside($span), wide, $spread));
115
138
 
116
- @if susy-get(layout-math, $span) == static {
139
+ @if susy-get(math, $span) == static {
117
140
  $width: $span-sum * susy-get(column-width, $span);
118
141
  } @else {
119
142
  $width: percentage($span-sum / $context);