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.
- data/lib/susy.rb +0 -1
- data/sass/_susy.scss +3 -54
- data/sass/susy/_core.scss +6 -0
- data/sass/susy/_helpers.scss +5 -13
- data/sass/susy/_math.scss +5 -2
- data/sass/susy/_settings.scss +52 -0
- data/sass/susy/api/_float.scss +6 -71
- data/sass/susy/api/_shared.scss +7 -0
- data/sass/susy/api/float/_container.scss +12 -0
- data/sass/susy/api/float/_end.scss +21 -0
- data/sass/susy/api/float/_isolate.scss +14 -0
- data/sass/susy/api/float/_span.scss +23 -0
- data/sass/susy/api/shared/_container.scss +22 -0
- data/sass/susy/api/shared/_grid-background.scss +20 -0
- data/sass/susy/api/shared/_margins.scss +15 -0
- data/sass/susy/api/shared/_padding.scss +15 -0
- data/sass/susy/helpers/_direction.scss +28 -0
- data/sass/susy/helpers/_nth.scss +15 -0
- data/sass/susy/helpers/_sass-lists.scss +45 -26
- data/sass/susy/language/_shared.scss +6 -0
- data/sass/susy/language/_susy.scss +16 -0
- data/sass/susy/language/_susy1.scss +9 -0
- data/sass/susy/language/shared/_context.scss +35 -0
- data/sass/susy/language/shared/_settings.scss +216 -0
- data/sass/susy/language/susy/_background.scss +132 -0
- data/sass/susy/language/susy/_container.scss +100 -0
- data/sass/susy/language/susy/_functions.scss +58 -0
- data/sass/susy/language/susy/_gallery.scss +94 -0
- data/sass/susy/language/susy/_isolate.scss +51 -0
- data/sass/susy/language/susy/_math.scss +153 -0
- data/sass/susy/language/susy/_rows.scss +78 -0
- data/sass/susy/language/susy/_span.scss +204 -0
- data/sass/susy/language/susy1/_settings.scss +60 -0
- data/sass/susy/math/_columns.scss +79 -55
- data/sass/susy/math/_container.scss +45 -0
- data/sass/susy/math/_location.scss +47 -0
- data/templates/project/README.md +36 -11
- data/templates/project/_base.scss +1 -1
- data/templates/project/manifest.rb +0 -3
- data/templates/project/screen.scss +1 -1
- metadata +33 -45
- data/sass/README.md +0 -33
- data/sass/susy/_api.scss +0 -39
- data/sass/susy/_grids.scss +0 -2
- data/sass/susy/_gutters.scss +0 -2
- data/sass/susy/_language.scss +0 -3
- data/sass/susy/api/_isolation.scss +0 -16
- data/sass/susy/grids/_add.scss +0 -10
- data/sass/susy/grids/_find.scss +0 -10
- data/sass/susy/gutters/_add.scss +0 -10
- data/sass/susy/gutters/_find.scss +0 -10
- data/sass/susy/helpers/_background-grid.scss +0 -65
- data/sass/susy/helpers/_box-sizing.scss +0 -25
- data/sass/susy/helpers/_clearfix.scss +0 -51
- data/sass/susy/helpers/_columns.scss +0 -15
- data/sass/susy/helpers/_find.scss +0 -63
- data/sass/susy/helpers/_span-shared.scss +0 -9
- data/sass/susy/language/_parse-add.scss +0 -19
- data/sass/susy/language/_parse-list.scss +0 -53
- data/sass/susy/language/_span.scss +0 -20
- data/sass/susy/math/_context.scss +0 -3
- data/sass/susy/math/_gutters.scss +0 -11
- data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
- data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
- data/templates/box-sizing/manifest.rb +0 -4
- data/templates/project/behaviors/box-sizing/boxsizing.htc +0 -399
- 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
|
-
//
|
3
|
-
//////////////////////////////
|
4
|
-
@function column-span($span, $location, $columns: false, $gutter: false) {
|
1
|
+
// Column math
|
2
|
+
// ===========
|
5
3
|
|
6
|
-
|
7
|
-
|
8
|
-
$
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
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
|
-
|
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
|
-
|
25
|
-
|
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
|
-
|
29
|
-
$
|
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
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
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
|
-
|
46
|
-
|
42
|
+
|
43
|
+
@if is-symmetrical($columns) {
|
44
|
+
$column-sum: is-symmetrical($columns);
|
45
|
+
} @else {
|
47
46
|
@each $column in $columns {
|
48
|
-
$sum: $sum +
|
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
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
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
|
+
}
|