susy 2.0.0.alpha.1 → 2.0.0.alpha.2

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 (67) hide show
  1. data/lib/susy.rb +0 -1
  2. data/sass/_susy.scss +3 -54
  3. data/sass/susy/_core.scss +6 -0
  4. data/sass/susy/_helpers.scss +5 -13
  5. data/sass/susy/_math.scss +5 -2
  6. data/sass/susy/_settings.scss +52 -0
  7. data/sass/susy/api/_float.scss +6 -71
  8. data/sass/susy/api/_shared.scss +7 -0
  9. data/sass/susy/api/float/_container.scss +12 -0
  10. data/sass/susy/api/float/_end.scss +21 -0
  11. data/sass/susy/api/float/_isolate.scss +14 -0
  12. data/sass/susy/api/float/_span.scss +23 -0
  13. data/sass/susy/api/shared/_container.scss +22 -0
  14. data/sass/susy/api/shared/_grid-background.scss +20 -0
  15. data/sass/susy/api/shared/_margins.scss +15 -0
  16. data/sass/susy/api/shared/_padding.scss +15 -0
  17. data/sass/susy/helpers/_direction.scss +28 -0
  18. data/sass/susy/helpers/_nth.scss +15 -0
  19. data/sass/susy/helpers/_sass-lists.scss +45 -26
  20. data/sass/susy/language/_shared.scss +6 -0
  21. data/sass/susy/language/_susy.scss +16 -0
  22. data/sass/susy/language/_susy1.scss +9 -0
  23. data/sass/susy/language/shared/_context.scss +35 -0
  24. data/sass/susy/language/shared/_settings.scss +216 -0
  25. data/sass/susy/language/susy/_background.scss +132 -0
  26. data/sass/susy/language/susy/_container.scss +100 -0
  27. data/sass/susy/language/susy/_functions.scss +58 -0
  28. data/sass/susy/language/susy/_gallery.scss +94 -0
  29. data/sass/susy/language/susy/_isolate.scss +51 -0
  30. data/sass/susy/language/susy/_math.scss +153 -0
  31. data/sass/susy/language/susy/_rows.scss +78 -0
  32. data/sass/susy/language/susy/_span.scss +204 -0
  33. data/sass/susy/language/susy1/_settings.scss +60 -0
  34. data/sass/susy/math/_columns.scss +79 -55
  35. data/sass/susy/math/_container.scss +45 -0
  36. data/sass/susy/math/_location.scss +47 -0
  37. data/templates/project/README.md +36 -11
  38. data/templates/project/_base.scss +1 -1
  39. data/templates/project/manifest.rb +0 -3
  40. data/templates/project/screen.scss +1 -1
  41. metadata +33 -45
  42. data/sass/README.md +0 -33
  43. data/sass/susy/_api.scss +0 -39
  44. data/sass/susy/_grids.scss +0 -2
  45. data/sass/susy/_gutters.scss +0 -2
  46. data/sass/susy/_language.scss +0 -3
  47. data/sass/susy/api/_isolation.scss +0 -16
  48. data/sass/susy/grids/_add.scss +0 -10
  49. data/sass/susy/grids/_find.scss +0 -10
  50. data/sass/susy/gutters/_add.scss +0 -10
  51. data/sass/susy/gutters/_find.scss +0 -10
  52. data/sass/susy/helpers/_background-grid.scss +0 -65
  53. data/sass/susy/helpers/_box-sizing.scss +0 -25
  54. data/sass/susy/helpers/_clearfix.scss +0 -51
  55. data/sass/susy/helpers/_columns.scss +0 -15
  56. data/sass/susy/helpers/_find.scss +0 -63
  57. data/sass/susy/helpers/_span-shared.scss +0 -9
  58. data/sass/susy/language/_parse-add.scss +0 -19
  59. data/sass/susy/language/_parse-list.scss +0 -53
  60. data/sass/susy/language/_span.scss +0 -20
  61. data/sass/susy/math/_context.scss +0 -3
  62. data/sass/susy/math/_gutters.scss +0 -11
  63. data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
  64. data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
  65. data/templates/box-sizing/manifest.rb +0 -4
  66. data/templates/project/behaviors/box-sizing/boxsizing.htc +0 -399
  67. data/templates/project/behaviors/box-sizing/boxsizing.php +0 -23
@@ -0,0 +1,78 @@
1
+ // Row Start & End
2
+ // ===============
3
+
4
+ // Apply to any layout element that should force a new layout row.
5
+ @mixin row(
6
+ $flow: $flow
7
+ ) {
8
+ $clear: $flow;
9
+
10
+ @if $flow == ltr or $flow == rtl {
11
+ $clear: from($flow);
12
+ }
13
+
14
+ clear: $clear;
15
+ }
16
+
17
+ // Cancel the row() effect, e.g. when using media queries.
18
+ @mixin unrow {
19
+ clear: none;
20
+ }
21
+
22
+ // First item
23
+ // ----------
24
+
25
+ @mixin first(
26
+ $flow: $flow
27
+ ) {
28
+ @include float-first($flow);
29
+ }
30
+
31
+ @mixin alpha(
32
+ $flow: $flow
33
+ ) {
34
+ @include float-first($flow);
35
+ }
36
+
37
+ @mixin nth-first(
38
+ $value: first,
39
+ $type: child
40
+ ) {
41
+ &:#{format-nth($value,$type)} { @include first($flow); }
42
+ }
43
+
44
+ @mixin nth-alpha(
45
+ $value: first,
46
+ $type: child
47
+ ) {
48
+ @include nth-first($value, $type);
49
+ }
50
+
51
+ // Last item
52
+ // ---------
53
+
54
+ @mixin last(
55
+ $flow: $flow
56
+ ) {
57
+ @include float-last($flow);
58
+ }
59
+
60
+ @mixin omega(
61
+ $flow: $flow
62
+ ) {
63
+ @include float-last($flow);
64
+ }
65
+
66
+ @mixin nth-last(
67
+ $value: last,
68
+ $type: child
69
+ ) {
70
+ &:#{format-nth($value,$type)} { @include last($flow); }
71
+ }
72
+
73
+ @mixin nth-omega(
74
+ $value: last,
75
+ $type: child
76
+ ) {
77
+ @include nth-last($value, $type);
78
+ }
@@ -0,0 +1,204 @@
1
+ // Span language parsing
2
+ // =====================
3
+
4
+ // Set a spanning element using shorthand syntax
5
+ @mixin span(
6
+ $span
7
+ ) {
8
+ $span : parse-span($span);
9
+ $output : span-math($span...);
10
+ $box : get-span-setting(box-sizing, $span);
11
+ $inside : if(get-span-setting(gutter-placement, $span) == inside, true, false);
12
+
13
+ @if $box == border-box or $inside {
14
+ @include box-sizing(border-box);
15
+ } @else if $box == content-box {
16
+ @include box-sizing(content-box);
17
+ }
18
+
19
+ @include float-span-output($output...);
20
+ }
21
+
22
+ // Span Helpers
23
+ // ------------
24
+
25
+ // Parse the span shortcut syntax
26
+ @function parse-span(
27
+ $string
28
+ ) {
29
+ $new-span : false;
30
+ $new-location : false;
31
+ $new-context : false;
32
+ $new-isolate : false;
33
+ $new-static : false;
34
+ $new-columns : false;
35
+ $new-gutters : false;
36
+ $new-column-width : false;
37
+ $new-flow : false;
38
+ $new-gutter-place : false;
39
+ $gutter-override : false;
40
+
41
+ $is-container : false;
42
+
43
+ $i: 1;
44
+
45
+ @while $i <= length($string) {
46
+ $value : nth($string,$i);
47
+ $at : false;
48
+ $of : false;
49
+ $gutter : false;
50
+
51
+ // keywords
52
+ @if type-of($value) == string {
53
+
54
+ // location keywords: first | last | alpha | omega
55
+ @if $value == first or $value == alpha {
56
+ $new-location: 1;
57
+ } @else if $value == last or $value == omega {
58
+ $new-location: last;
59
+ }
60
+
61
+ // isolate
62
+ @else if $value == isolate {
63
+ $new-isolate: isolate;
64
+ } @else if $value == float {
65
+ $new-isolate: float;
66
+ }
67
+
68
+ // static | fluid
69
+ @else if $value == static {
70
+ $new-static: static;
71
+ } @else if $value == fluid {
72
+ $new-static: fluid;
73
+ }
74
+
75
+ // ltr | rtl
76
+ @else if $value == rtl {
77
+ $new-flow: rtl;
78
+ } @else if $value == ltr {
79
+ $new-flow: ltr;
80
+ }
81
+
82
+ // after | before | split | inside | no-gutters
83
+ @else if $value == after {
84
+ $new-gutter-place: after;
85
+ } @else if $value == before {
86
+ $new-gutter-place: before;
87
+ } @else if $value == split {
88
+ $new-gutter-place: split;
89
+ } @else if $value == inside {
90
+ $new-gutter-place: inside;
91
+ } @else if $value == no-gutters {
92
+ $new-gutter-place: no-gutters;
93
+ }
94
+
95
+ // container
96
+ @if $value == container {
97
+ $is-container: container;
98
+ }
99
+
100
+ // at
101
+ @else if $value == at {
102
+ $at: true;
103
+ }
104
+
105
+ // of
106
+ @else if $value == of {
107
+ $of: true;
108
+ }
109
+
110
+ // gutter
111
+ @else if $value == gutter or $value == gutters {
112
+ $gutter: true;
113
+ }
114
+
115
+ // span
116
+ } @else if not $new-span and type-of($value) == number {
117
+ $new-span: $value;
118
+ }
119
+
120
+ // location integer
121
+ @if $at {
122
+ $i: $i + 1;
123
+ $new-location: nth($string, $i);
124
+ }
125
+
126
+ // gutter override
127
+ @if $gutter {
128
+ $i: $i + 1;
129
+ $gutter-override: nth($string, $i);
130
+ }
131
+
132
+ // context
133
+ @if $of {
134
+ $i: $i + 1;
135
+ $new-context: compact();
136
+
137
+ @while $of and $i <= length($string) {
138
+ $this: nth($string,$i);
139
+ @if type-of($this) != string {
140
+ $new-context: append($new-context, $this);
141
+ $i: $i + 1;
142
+ } @else {
143
+ $of: false;
144
+ $i: $i - 1;
145
+ }
146
+ }
147
+ }
148
+
149
+ $i: $i + 1;
150
+ }
151
+
152
+ // parse the context
153
+ @if $new-context {
154
+ $new-columns: get-setting(columns, $new-context);
155
+ $new-gutters: get-setting(gutters, $new-context);
156
+ $new-column-width: get-setting(column-width, $new-context);
157
+ }
158
+
159
+ // use global values for empty grid settings
160
+ @if not $new-columns {
161
+ $new-columns: $columns;
162
+ }
163
+ @if not $new-gutters {
164
+ $new-gutters: $gutters;
165
+ }
166
+ @if not $new-column-width {
167
+ $new-column-width: $column-width;
168
+ }
169
+ @if not $new-static {
170
+ $new-static: $static;
171
+ }
172
+ @if not $new-isolate {
173
+ $new-isolate: $isolate;
174
+ }
175
+ @if not $new-flow {
176
+ $new-flow: $flow;
177
+ }
178
+ @if not $new-gutter-place {
179
+ $new-gutter-place: $gutter-placement;
180
+ }
181
+
182
+ @return $new-span $new-location $new-columns $new-gutters $new-column-width $new-isolate $new-static $new-flow $new-gutter-place $is-container $gutter-override;
183
+ }
184
+
185
+ // Return one particular span setting from a list
186
+ @function get-span-setting(
187
+ $setting,
188
+ $span,
189
+ $parse: false
190
+ ) {
191
+ $options : span location columns gutters column-width isolate static flow gutter-placement is-container gutter-override;
192
+ $key : index($options, $setting);
193
+ $value : false;
194
+
195
+ @if $parse {
196
+ $span: parse-span($span);
197
+ }
198
+
199
+ @if $key {
200
+ $value: nth($span, $key);
201
+ }
202
+
203
+ @return $value;
204
+ }
@@ -0,0 +1,60 @@
1
+ // Susy 1.0 Settings
2
+ // =================
3
+
4
+ $total-columns : 12;
5
+ $column-width : 4em;
6
+ $gutter-width : 1em;
7
+ $grid-padding : $gutter-width;
8
+
9
+ $from-direction : left;
10
+ $container-width : false;
11
+
12
+ $container-style : magic;
13
+
14
+ // no translation (yet)
15
+ // --------------------
16
+
17
+ // $omega-float : opposite-position($from-direction);
18
+ // $border-box-sizing : false;
19
+
20
+ // $breakpoint-media-output : true;
21
+ // $breakpoint-ie-output : true;
22
+ // $breakpoint-raw-output : false;
23
+
24
+ // from compass
25
+ // ------------
26
+
27
+ $show-column-grid-backgrounds: true;
28
+ $show-grid-backgrounds: true;
29
+
30
+ // translation mixin
31
+ // -----------------
32
+
33
+ @mixin translate-susy1-settings(
34
+ ) {
35
+ $columns: $total-columns;
36
+
37
+ $gutters: $gutter-width / $column-width;
38
+ $column-width: $column-width;
39
+ $flow: if($from-direction == right, rtl, ltr);
40
+
41
+ $isolate: false;
42
+ $gutter-placement: after;
43
+ $show-grids: $show-grid-backgrounds or $show-column-grid-backgrounds;
44
+
45
+ @if $container-style == static {
46
+ $static: static;
47
+ @if $container-width {
48
+ @warn "For static output, we use your $column-width setting and ignore any $container-width override.";
49
+ }
50
+ } @else {
51
+ $static: false;
52
+ $container: $container-width;
53
+
54
+ @if $container-width {
55
+ $column-width: false;
56
+ } @else if $container-style == fluid and unit($column-width) != '%' {
57
+ $container: 100%;
58
+ }
59
+ }
60
+ }
@@ -1,70 +1,94 @@
1
- //////////////////////////////
2
- // Find width, in percentages, of the column span
3
- //////////////////////////////
4
- @function column-span($span, $location, $columns: false, $gutter: false) {
1
+ // Column math
2
+ // ===========
5
3
 
6
- // Find the columns and gutters
7
- $columns: find-grid($columns);
8
- $gutter: find-gutter($gutter);
9
-
10
- // Combine the columns and gutters
11
- $columns-and-gutters: column-sum($columns, $gutter);
12
-
13
- // Equal width columns are easy! Deal with them!
14
- @if type-of($columns) == 'number' or length($columns) == 1 {
15
- $span-and-gutters: $span + (($span - 1) * nth($gutter, 1));
16
- @return $span-and-gutters / $columns-and-gutters * 100%;
4
+ // Returns true if a grid is symmetrical
5
+ @function is-symmetrical(
6
+ $columns: $columns
7
+ ) {
8
+ @if type-of($columns) == number {
9
+ @return $columns;
10
+ } @else {
11
+ @return null;
17
12
  }
18
- // Asymmetric lists are harder, so we're going to treat them as their own columns
19
- @else if type-of($columns) == 'list' or length($columns) > 1 {
20
- // Build a fake column set
21
- $sum: 0;
22
- $holder: ();
13
+ }
23
14
 
24
- @for $i from $location to ($location + $span) {
25
- $holder: append($holder, nth(nth($columns, $i), 1), comma);
26
- }
15
+ // Find the number of columns in a given layout
16
+ @function column-count(
17
+ $columns: $columns
18
+ ) {
19
+ $count: is-symmetrical($columns);
27
20
 
28
- // Get sub-column sum
29
- $span-and-gutters: column-sum($holder, $gutter);
30
- @return $span-and-gutters / $columns-and-gutters * 100%;
31
- }
32
- @else {
33
- @warn "Can't find a working set of columns! That's terrible!";
34
- @return false;
21
+ @if not $count {
22
+ $count: length($columns);
35
23
  }
24
+
25
+ @return $count;
36
26
  }
37
27
 
38
- //////////////////////////////
39
- // Find the total sum of the columns
40
- //////////////////////////////
41
- @function column-sum($columns, $gutter) {
42
- @if type-of($columns) == 'number' or length($columns) == 1 {
43
- @return nth($columns, 1) + ((column-count(nth($columns, 1)) - 1) * nth($gutter, 1));
28
+ // Find the total sum of column-units in a layout
29
+ @function column-sum(
30
+ $columns : $columns,
31
+ $gutters : $gutters,
32
+ $outer : false
33
+ ) {
34
+ $column-sum: 0;
35
+ $gutter-sum: 0;
36
+
37
+ @if $outer {
38
+ $gutter-sum: column-count($columns) * $gutters;
39
+ } @else {
40
+ $gutter-sum: (column-count($columns) - 1) * $gutters;
44
41
  }
45
- @else if type-of($columns) == 'list' {
46
- $sum: 0;
42
+
43
+ @if is-symmetrical($columns) {
44
+ $column-sum: is-symmetrical($columns);
45
+ } @else {
47
46
  @each $column in $columns {
48
- $sum: $sum + nth($column, 1);
47
+ $column-sum: $column-sum + $column;
49
48
  }
50
- $sum: $sum + (column-count($columns) - 1) * nth($gutter, 1);
51
- @return $sum;
52
49
  }
50
+
51
+ @return $column-sum + $gutter-sum;
53
52
  }
54
53
 
55
- //////////////////////////////
56
- // Find the number of columns
57
- //////////////////////////////
58
- @function column-count($columns) {
59
- @if type-of($columns) == 'number' {
60
- @return $columns;
61
- }
62
- @if type-of($columns) == 'list' {
63
- @if length($columns) == 1 {
64
- @return nth($columns, 1);
65
- }
66
- @else {
67
- @return length($columns);
54
+ // Return a subset of columns at a given location
55
+ @function get-columns(
56
+ $span,
57
+ $location,
58
+ $columns: $columns
59
+ ) {
60
+ $location : get-location-position($span, $location, $columns);
61
+ $sub-columns : ();
62
+
63
+ @if is-symmetrical($columns) {
64
+ $sub-columns: nth($span,1);
65
+ } @else {
66
+ $location: if($location, $location, 1);
67
+
68
+ @for $i from $location to ($location + $span) {
69
+ $sub-columns: append($sub-columns, nth($columns, $i));
68
70
  }
69
71
  }
70
- }
72
+
73
+ @return $sub-columns;
74
+ }
75
+
76
+ // Find the sum of a column-span
77
+ @function get-column-span-sum(
78
+ $span,
79
+ $location : false,
80
+ $columns : $columns,
81
+ $gutters : $gutters,
82
+ $outer : false
83
+ ) {
84
+ $span-sum : false;
85
+
86
+ @if is-symmetrical($columns) {
87
+ $span-sum: column-sum($span, $gutters, $outer);
88
+ } @else {
89
+ $span-columns: get-columns($span, $location, $columns);
90
+ $span-sum: column-sum($span-columns, $gutters, $outer);
91
+ }
92
+
93
+ @return $span-sum;
94
+ }