susy 2.2.14 → 3.0.0.alpha.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/{docs/changelog.rst → CHANGELOG.md} +0 -34
  3. data/README.md +135 -10
  4. data/VERSION +1 -1
  5. data/sass/_prefix.scss +10 -0
  6. data/sass/_susy.scss +4 -3
  7. data/sass/susy/_api.scss +134 -0
  8. data/sass/susy/_grids.scss +192 -0
  9. data/sass/susy/_parser.scss +284 -0
  10. data/sass/susy/_settings.scss +120 -0
  11. data/sass/susy/_unprefix.scss +53 -0
  12. data/sass/susy/_validation.scss +132 -0
  13. metadata +26 -75
  14. data/sass/_su.scss +0 -4
  15. data/sass/_susyone.scss +0 -4
  16. data/sass/susy/_su.scss +0 -7
  17. data/sass/susy/language/_susy.scss +0 -24
  18. data/sass/susy/language/_susyone.scss +0 -13
  19. data/sass/susy/language/susy/_background.scss +0 -385
  20. data/sass/susy/language/susy/_bleed.scss +0 -200
  21. data/sass/susy/language/susy/_box-sizing.scss +0 -47
  22. data/sass/susy/language/susy/_breakpoint-plugin.scss +0 -185
  23. data/sass/susy/language/susy/_container.scss +0 -81
  24. data/sass/susy/language/susy/_context.scss +0 -36
  25. data/sass/susy/language/susy/_gallery.scss +0 -94
  26. data/sass/susy/language/susy/_grids.scss +0 -64
  27. data/sass/susy/language/susy/_gutters.scss +0 -154
  28. data/sass/susy/language/susy/_isolate.scss +0 -77
  29. data/sass/susy/language/susy/_margins.scss +0 -94
  30. data/sass/susy/language/susy/_padding.scss +0 -74
  31. data/sass/susy/language/susy/_rows.scss +0 -138
  32. data/sass/susy/language/susy/_settings.scss +0 -216
  33. data/sass/susy/language/susy/_span.scss +0 -163
  34. data/sass/susy/language/susy/_validation.scss +0 -16
  35. data/sass/susy/language/susyone/_background.scss +0 -18
  36. data/sass/susy/language/susyone/_functions.scss +0 -377
  37. data/sass/susy/language/susyone/_grid.scss +0 -312
  38. data/sass/susy/language/susyone/_isolation.scss +0 -51
  39. data/sass/susy/language/susyone/_margin.scss +0 -93
  40. data/sass/susy/language/susyone/_media.scss +0 -105
  41. data/sass/susy/language/susyone/_padding.scss +0 -92
  42. data/sass/susy/language/susyone/_settings.scss +0 -60
  43. data/sass/susy/output/_float.scss +0 -9
  44. data/sass/susy/output/_shared.scss +0 -15
  45. data/sass/susy/output/_support.scss +0 -9
  46. data/sass/susy/output/float/_container.scss +0 -16
  47. data/sass/susy/output/float/_end.scss +0 -40
  48. data/sass/susy/output/float/_isolate.scss +0 -22
  49. data/sass/susy/output/float/_span.scss +0 -35
  50. data/sass/susy/output/shared/_background.scss +0 -26
  51. data/sass/susy/output/shared/_container.scss +0 -21
  52. data/sass/susy/output/shared/_direction.scss +0 -42
  53. data/sass/susy/output/shared/_inspect.scss +0 -25
  54. data/sass/susy/output/shared/_margins.scss +0 -23
  55. data/sass/susy/output/shared/_output.scss +0 -14
  56. data/sass/susy/output/shared/_padding.scss +0 -23
  57. data/sass/susy/output/support/_background.scss +0 -58
  58. data/sass/susy/output/support/_box-sizing.scss +0 -19
  59. data/sass/susy/output/support/_clearfix.scss +0 -18
  60. data/sass/susy/output/support/_prefix.scss +0 -19
  61. data/sass/susy/output/support/_rem.scss +0 -22
  62. data/sass/susy/output/support/_support.scss +0 -95
  63. data/sass/susy/su/_grid.scss +0 -103
  64. data/sass/susy/su/_settings.scss +0 -73
  65. data/sass/susy/su/_utilities.scss +0 -111
  66. data/sass/susy/su/_validation.scss +0 -57
  67. data/templates/project/_grids.scss +0 -9
  68. data/templates/project/manifest.rb +0 -15
  69. data/templates/project/style.scss +0 -4
@@ -1,74 +0,0 @@
1
- // Padding Syntax
2
- // ==============
3
-
4
- // Prefix
5
- // ------
6
- // Add spanning-padding before an element.
7
- // - $span : <span>
8
- @mixin prefix(
9
- $span
10
- ) {
11
- $inspect : $span;
12
- $span : map-merge((spread: wide), parse-span($span));
13
- $flow : susy-get(flow, $span);
14
- $width : span($span);
15
-
16
- @if is-inside($span) {
17
- $gutter: gutter($span);
18
- $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
19
- }
20
-
21
- @include susy-inspect(prefix, $inspect);
22
- @include padding-output($width, null, $flow);
23
- }
24
-
25
- // Suffix
26
- // ------
27
- // Add spanning-padding after an element.
28
- // - $span : <span>
29
- @mixin suffix(
30
- $span
31
- ) {
32
- $inspect : $span;
33
- $span : map-merge((spread: wide), parse-span($span));
34
- $flow : susy-get(flow, $span);
35
- $width : span($span);
36
-
37
- @if is-inside($span) {
38
- $gutter: gutter($span);
39
- $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
40
- }
41
-
42
- @include susy-inspect(suffix, $inspect);
43
- @include padding-output(null, $width, $flow);
44
- }
45
-
46
- // Pad
47
- // ---
48
- // Add spanning-padding before and after an element.
49
- // - $pre : <span>
50
- // - [$post] : <span>
51
- @mixin pad(
52
- $pre,
53
- $post: false
54
- ) {
55
- $inspect : ($pre, $post);
56
- $pre : map-merge((spread: wide), parse-span($pre));
57
-
58
- @if $post {
59
- $post: map-merge((spread: wide), parse-span($post));
60
- } @else {
61
- $span: susy-get(span, $pre);
62
- @if length($span) > 1 {
63
- $pre: map-merge($pre, (span: nth($span, 1)));
64
- $post: map-merge($pre, (span: nth($span, 2)));
65
- } @else {
66
- $post: $pre;
67
- }
68
- }
69
-
70
- @include susy-inspect(pad, $inspect);
71
- @include prefix($pre);
72
- @include suffix($post);
73
-
74
- }
@@ -1,138 +0,0 @@
1
- // Row Start & End
2
- // ===============
3
-
4
- // Break
5
- // -----
6
- // Apply to any element that should force a line break.
7
- @mixin break {
8
- @include output((clear: both));
9
- }
10
-
11
-
12
- // NoBreak
13
- // -------
14
- // Cancel the break() effect, e.g. when using media queries.
15
- @mixin nobreak {
16
- @include output((clear: none));
17
- }
18
-
19
-
20
- // Full
21
- // ----
22
- // - [$context]: <layout shorthand>
23
- @mixin full(
24
- $context: $susy
25
- ) {
26
- $inspect : $context;
27
- @include susy-inspect(full, $inspect);
28
- @include span(full of parse-grid($context) break);
29
- }
30
-
31
-
32
- // First
33
- // -----
34
- // - [$context]: <settings>
35
- @mixin first(
36
- $context: $susy
37
- ) {
38
- $inspect : $context;
39
- $context : parse-grid($context);
40
- $flow : susy-get(flow, $context);
41
-
42
- @include susy-inspect(first, $inspect);
43
- @if not(is-split($context)) {
44
- @include float-first($flow);
45
- }
46
- }
47
-
48
- @mixin alpha(
49
- $context: $susy
50
- ) {
51
- @include first($context);
52
- }
53
-
54
-
55
- // Last
56
- // ----
57
- // - [$context]: <settings>
58
- @mixin last(
59
- $context: $susy
60
- ) {
61
- $inspect : $context;
62
- $context : parse-grid($context);
63
-
64
- @include susy-inspect(last, $inspect);
65
-
66
- $output: (
67
- flow: susy-get(flow, $context),
68
- last-flow: susy-get(last-flow, $context),
69
- margin: if(is-split($context), null, 0),
70
- );
71
-
72
- @include float-last($output...);
73
- }
74
-
75
- @mixin omega(
76
- $context: $susy
77
- ) {
78
- @include last($context);
79
- }
80
-
81
-
82
- // Get Edge
83
- // --------
84
- // Calculate edge value based on location, if possible
85
- @function get-edge(
86
- $span
87
- ) {
88
- $span : parse-span($span);
89
- $edge : susy-get(edge, $span);
90
-
91
- @if not($edge) {
92
- $count: susy-count(susy-get(columns, $span));
93
- $location: susy-get(location, $span);
94
- $n: susy-get(span, $span);
95
-
96
- $number: if(type-of($location) == number, true, false);
97
- $index: if($number and unitless($location), true, false);
98
-
99
- @if $n == $count {
100
- $edge: full;
101
- } @else if $location and $n and $index {
102
- @if $location == 1 {
103
- $edge: if($n == $count, full, first);
104
- } @else if $location + $n - 1 == $count {
105
- $edge: last;
106
- }
107
- }
108
- }
109
-
110
- @if $edge == alpha or $edge == omega {
111
- $edge: if($edge == alpha, first, last);
112
- }
113
-
114
- @return $edge;
115
- }
116
-
117
-
118
- // Get Location
119
- // ------------
120
- // Calculate location value based on edge, if possible
121
- @function get-location(
122
- $span
123
- ) {
124
- $span : parse-span($span);
125
- $location : susy-get(location, $span);
126
- $edge : get-edge($span);
127
- $n : susy-get(span, $span);
128
-
129
- @if $edge and not($location) and type-of($n) == number and unitless($n) {
130
- @if $edge == first {
131
- $location: 1;
132
- } @else if $edge == last {
133
- $location: susy-count(susy-get(columns, $span)) - $n + 1;
134
- }
135
- }
136
-
137
- @return $location
138
- }
@@ -1,216 +0,0 @@
1
- // Susy Settings
2
- // =============
3
-
4
- // Susy Language Defaults
5
- // ----------------------
6
- // - PRIVATE
7
- @include susy-defaults((
8
- container: auto,
9
- math: fluid,
10
- output: float,
11
- container-position: center,
12
- gutter-position: after,
13
- global-box-sizing: content-box,
14
- debug: (
15
- image: hide,
16
- color: rgba(#66f, .25),
17
- output: background,
18
- toggle: top right,
19
- ),
20
- ));
21
-
22
-
23
- // Valid Keyword Values
24
- // --------------------
25
- // - PRIVATE: DONT'T TOUCH
26
- $susy-keywords: (
27
- container: auto,
28
- math: static fluid,
29
- output: isolate float,
30
- container-position: left center right,
31
- flow: ltr rtl,
32
- gutter-position: before after split inside inside-static,
33
- box-sizing: border-box content-box,
34
- span: full,
35
- edge: first alpha last omega full,
36
- spread: narrow wide wider,
37
- gutter-override: no-gutters no-gutter,
38
- role: nest,
39
- clear: break nobreak,
40
- debug image: show hide show-columns show-baseline,
41
- debug output: background overlay,
42
- );
43
-
44
-
45
- // Parse Susy Keywords and Maps
46
- // ----------------------------
47
- @function parse-settings(
48
- $short: $susy
49
- ) {
50
- $_return: ();
51
-
52
- @if type-of($short) == map {
53
- $_return: $short;
54
- } @else {
55
- @each $item in $short {
56
- // strings
57
- @if type-of($item) == string {
58
- @each $key, $value in $susy-keywords {
59
- @if index($value, $item) {
60
- $_key-value: append($key, $item);
61
- $_return: _susy-deep-set($_return, $_key-value...);
62
- }
63
- }
64
- // maps
65
- } @else if type-of($item) == map {
66
- $_return: map-merge($_return, $item);
67
- }
68
- }
69
- }
70
-
71
- @return $_return;
72
- }
73
-
74
-
75
- // Parse Columns & Gutters
76
- // -----------------------
77
- @function parse-layout(
78
- $short
79
- ) {
80
- $_return: ();
81
- $_columns: ();
82
- $_gutters: null;
83
-
84
- @if not(unitless(nth(nth($short, 1), 1))) {
85
- $_gutters: nth($short, 1);
86
- } @else {
87
- $_columns: (columns: nth($short, 1));
88
- $_gutters: if(length($short) > 1, nth($short, 2), $_gutters);
89
- }
90
-
91
- @if type-of($_gutters) == list and length($_gutters) > 0 {
92
- $_gutters: (
93
- gutters: nth($_gutters, 2) / nth($_gutters, 1),
94
- column-width: nth($_gutters, 1),
95
- );
96
- } @else {
97
- $_gutters: if($_gutters, (gutters: $_gutters), ());
98
- }
99
-
100
- $_return: map-merge($_return, $_columns);
101
- $_return: map-merge($_return, $_gutters);
102
-
103
- @return $_return;
104
- }
105
-
106
-
107
- // Parse Grid/Context
108
- // ------------------
109
- @function parse-grid(
110
- $short: $susy
111
- ) {
112
- $_return: parse-settings($short);
113
- $_layout: ();
114
-
115
- @if type-of($short) == map {
116
- $_return: $short;
117
- } @else {
118
- @each $item in $short {
119
- // number or list
120
- @if type-of($item) == number or type-of($item) == list {
121
- @if type-of($item) == list or unitless($item) {
122
- $_layout: append($_layout, $item);
123
- } @else {
124
- $_return: map-merge($_return, (container: $item));
125
- }
126
- }
127
- }
128
-
129
- $_layout: if(length($_layout) > 0, parse-layout($_layout), $_layout);
130
- }
131
-
132
- @return map-merge($_return, $_layout);
133
- }
134
-
135
-
136
- // Parse Span
137
- // ----------
138
- @function parse-span(
139
- $short,
140
- $key: span
141
- ) {
142
- $_return: ();
143
-
144
- @if type-of($short) == map {
145
- $_return: $short;
146
- } @else {
147
- $_at: index($short, at);
148
-
149
- @if $_at {
150
- $_loci: $_at + 1;
151
- $_location: nth($short, $_loci);
152
- $_return: map-merge($_return, (location: $_location));
153
- $short: set-nth($short, $_at, null);
154
- $short: set-nth($short, $_loci, null);
155
- }
156
-
157
- $_i: 1;
158
- $_span: ();
159
-
160
- @while $_i <= length($short) {
161
- $_this: nth($short, $_i);
162
-
163
- @if type-of($_this) == number {
164
- $_span: append($_span, $_this);
165
- $short: set-nth($short, $_i, null);
166
- } @else if $_this == of {
167
- $short: set-nth($short, $_i, null);
168
- $_i: length($short) + 1;
169
- }
170
-
171
- $_i: $_i + 1;
172
- }
173
-
174
- @if length($_span) > 0 {
175
- $_span: if(length($_span) == 1, nth($_span, 1), $_span);
176
- $_return: map-merge($_return, ($key: $_span));
177
- }
178
-
179
- $_return: map-merge($_return, parse-grid($short));
180
- }
181
-
182
- @return $_return;
183
- }
184
-
185
-
186
- // Parse Gutters
187
- // -------------
188
- @function parse-gutters(
189
- $short: $susy
190
- ) {
191
- $_gutters: parse-span($short, gutter-override);
192
- $_span: susy-get(gutter-override, $_gutters);
193
-
194
- @if $_span and not(map-get($_gutters, columns)) {
195
- $_context: ();
196
- $_new: ();
197
-
198
- @each $item in $_span {
199
- @if type-of($item) == number and unitless($item) {
200
- $_context: append($_context, $item);
201
- } @else {
202
- $_new: append($_new, $item);
203
- }
204
- }
205
-
206
- $_context: parse-grid($_context);
207
- $_new: if(length($_new) == 0, null, $_new);
208
- $_new: if(length($_new) == 1, nth($_new, 1), $_new);
209
- $_new: (gutter-override: if($_new != $_span, $_new, $_span));
210
-
211
- $_gutters: map-merge($_gutters, $_new);
212
- $_gutters: map-merge($_gutters, $_context);
213
- }
214
-
215
- @return $_gutters;
216
- }
@@ -1,163 +0,0 @@
1
- // Span Syntax
2
- // ===========
3
-
4
- // Span [mixin]
5
- // ------------
6
- // Set a spanning element using shorthand syntax.
7
- // - $span : <span>
8
- @mixin span(
9
- $span
10
- ) {
11
- $inspect: $span;
12
- $span: parse-span($span);
13
- $output: span-math($span);
14
- $nesting: susy-get(span, $span);
15
- $clear: susy-get(clear, $span);
16
-
17
- $box: susy-get(box-sizing, $span);
18
- $content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
19
- $box: $box or if(is-inside($span) and $content-box, border-box, null);
20
-
21
- @if $clear == break {
22
- @include break;
23
- } @else if $clear == nobreak {
24
- @include nobreak;
25
- }
26
-
27
- @include susy-inspect(span, $inspect);
28
- @include output((box-sizing: $box));
29
- @include float-span-output($output...);
30
-
31
- @if valid-columns($nesting, silent) {
32
- @include nested($span) { @content; }
33
- } @else {
34
- @content;
35
- }
36
- }
37
-
38
- // Span [function]
39
- // ---------------
40
- // Return the width of a span.
41
- // - $span : <span>
42
- @function span(
43
- $span
44
- ) {
45
- @return get-span-width($span);
46
- }
47
-
48
- // Span Math
49
- // ---------
50
- // Get all the span results.
51
- // - $span: <map>
52
- @function span-math(
53
- $span
54
- ) {
55
- $nest : if(susy-get(role, $span) == nest, true, false);
56
- $split-nest : if(is-split($span) and $nest, true, false);
57
- $edge : get-edge($span);
58
- $location : get-location($span);
59
-
60
- $float : from;
61
- $padding-before : null;
62
- $padding-after : null;
63
- $margin-before : null;
64
- $margin-after : null;
65
-
66
- // calculate widths
67
- $spread: index(map-values($span), spread);
68
- $span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span);
69
- $width: get-span-width($span);
70
- $gutters: get-gutters($span);
71
-
72
- // apply gutters
73
- @if is-inside($span) {
74
- @if not(susy-get(role, $span)) {
75
- $padding-before: map-get($gutters, before);
76
- $padding-after: map-get($gutters, after);
77
- }
78
- } @else {
79
- @if not($split-nest) {
80
- $margin-before: map-get($gutters, before);
81
- $margin-after: map-get($gutters, after);
82
- }
83
- }
84
-
85
- // special margin handling
86
- @if susy-get(output, $span) == isolate and $location {
87
- $margin-before: get-isolation($span);
88
- $margin-after: -100%;
89
- } @else if $edge {
90
- $is-split: is-split($span);
91
- $pos: susy-get(gutter-position, $span);
92
-
93
- @if $edge == last {
94
- $float: susy-get(last-flow, $span);
95
- }
96
-
97
- @if not($is-split) {
98
- @if $edge == full or ($edge == first and $pos == before) {
99
- $margin-before: 0;
100
- }
101
- @if $edge == full or ($edge == last and $pos == after) {
102
- $margin-after: 0;
103
- }
104
- }
105
-
106
- }
107
-
108
- @return (
109
- width : $width,
110
- float : $float,
111
- margin-before : $margin-before,
112
- margin-after : $margin-after,
113
- padding-before : $padding-before,
114
- padding-after : $padding-after,
115
- flow : susy-get(flow, $span),
116
- );
117
- }
118
-
119
- // Get Span Width
120
- // --------------
121
- // Return span width.
122
- // - $span: <map>
123
- @function get-span-width(
124
- $span
125
- ) {
126
- $span : parse-span($span);
127
-
128
- $n : susy-get(span, $span);
129
- $location : get-location($span);
130
- $columns : susy-get(columns, $span);
131
- $gutters : susy-get(gutters, $span);
132
- $spread : susy-get(spread, $span);
133
-
134
- $context : null;
135
- $span-sum : null;
136
- $width : null;
137
-
138
- @if $n == 'full' {
139
- $pos: susy-get(gutter-position, $span);
140
- $role: susy-get(role, $span);
141
- $n: if($pos == split and $role != nest, susy-count($columns), 100%);
142
- }
143
-
144
- @if type-of($n) != number {
145
- @warn "(#{type-of($n)}) #{$n} is not a valid span.";
146
- } @else if unitless($n) {
147
- $context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow));
148
- $spread: if(is-inside($span), $spread or wide, $spread);
149
- $span-sum: susy($n, $location, $columns, $gutters, $spread);
150
-
151
- $_math: susy-get(math, $span);
152
- $_column-width: susy-get(column-width, $span);
153
- @if $_math == static {
154
- $width: $span-sum * valid-column-math($_math, $_column-width);
155
- } @else {
156
- $width: percentage($span-sum / $context);
157
- }
158
- } @else {
159
- $width: $n;
160
- }
161
-
162
- @return $width;
163
- }