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
@@ -1,33 +1,21 @@
1
- // ---------------------------------------------------------------------------
2
- // Sass List Helpers
3
- //
4
- // - list-sum()
5
- // - query-list()
6
-
7
- // ---------------------------------------------------------------------------
8
- // Functions
1
+ // List helpers
2
+ // ============
9
3
 
10
4
  // Return the sum of all items in a list.
11
- //
12
- // list-sum($list)
13
- // - $list : <list>
14
- @function list-sum($list) {
5
+ @function list-sum(
6
+ $list
7
+ ) {
15
8
  $sum: 0;
9
+
16
10
  @each $item in $list {
17
11
  $sum: $sum + $item;
18
12
  }
13
+
19
14
  @return $sum;
20
15
  }
21
16
 
22
17
  // Return list of index locations where a query appears in a list,
23
18
  // including unit queries.
24
- //
25
- // query-list($list, $query [, $mode])
26
- // - $list : <list>
27
- // - $query : <anything>
28
- // - $mode : none | unit
29
- // - "none" (default) runs a standard query.
30
- // - "unit" finds all items with the same unit.
31
19
  @function query-list(
32
20
  $list,
33
21
  $query,
@@ -35,37 +23,68 @@
35
23
  ) {
36
24
  $return: ();
37
25
 
38
- // loop through $list
39
26
  @for $i from 1 through length($list) {
40
27
  @if $mode == unit {
41
- // if the list item matches the query, write where it is to the list.
42
28
  @if unit(nth($list, $i)) == $query {
43
29
  $return: append($return, $i);
44
30
  }
45
31
  }
46
32
  @else {
47
- // if the list item matches the query, write where it is to the list.
48
33
  @if nth(nth($list, $i), 1) == $query {
49
34
  $return: append($return, $i);
50
35
  }
51
36
  }
52
37
  }
53
38
 
54
- // if nothing matches then return false.
55
39
  @if $return == () {
56
40
  $return: false;
57
41
  }
58
42
 
59
- // return list.
60
43
  @return $return;
61
44
  }
62
45
 
63
46
  // Reverses direction of a list
64
- @function reverse($list) {
47
+ @function reverse(
48
+ $list
49
+ ) {
65
50
  $length: length($list);
66
51
  $return: ();
52
+
67
53
  @for $i from 0 to $length {
68
54
  $return: append($return, nth($list, $length - $i), comma);
69
55
  }
56
+
70
57
  @return $return;
71
- }
58
+ }
59
+
60
+ // Return a list with specific items removed
61
+ @function filter(
62
+ $list,
63
+ $target
64
+ ) {
65
+ $clean: compact();
66
+
67
+ @if index($list, $target) {
68
+ @each $item in $list {
69
+ $clean: if($item == $target, $clean, append($clean, $item));
70
+ }
71
+ } @else {
72
+ $clean: $list;
73
+ }
74
+
75
+ @return $clean;
76
+ }
77
+
78
+ @function nth-filter(
79
+ $list,
80
+ $index
81
+ ) {
82
+ $clean: compact();
83
+
84
+ @each $item in $list {
85
+ $clean: if(index($list, $item) == $index, $clean, append($clean, $item));
86
+ }
87
+
88
+ @return $clean;
89
+ }
90
+
@@ -0,0 +1,6 @@
1
+ // Shared Language
2
+ // ===============
3
+
4
+ @import "shared/settings";
5
+ @import "shared/context";
6
+
@@ -0,0 +1,16 @@
1
+ // Language partials
2
+ // =================
3
+
4
+ @import "../core";
5
+ @import "../api/shared";
6
+ @import "../api/float";
7
+
8
+ @import "shared";
9
+ @import "susy/math";
10
+ @import "susy/functions";
11
+ @import "susy/background";
12
+ @import "susy/container";
13
+ @import "susy/span";
14
+ @import "susy/isolate";
15
+ @import "susy/gallery";
16
+ @import "susy/rows";
@@ -0,0 +1,9 @@
1
+ // Susy 1.0 Translation
2
+ // ====================
3
+
4
+ @import "../core";
5
+ @import "../api/shared";
6
+ @import "../api/float";
7
+
8
+ @import "shared";
9
+ @import "susy1/settings";
@@ -0,0 +1,35 @@
1
+ // Context syntax
2
+ // ==============
3
+ //
4
+ // Functions:
5
+ // - nested()
6
+ //
7
+ // Mixins:
8
+ // - nested()
9
+
10
+ // return the subset grid for nested context
11
+ @function nested(
12
+ $context
13
+ ) {
14
+ $context: parse-span($context);
15
+
16
+ $this-span : get-span-setting(span, $context);
17
+ $this-location : get-span-setting(location, $context);
18
+ $this-columns : get-span-setting(columns, $context);
19
+
20
+ $this-columns : if($this-columns, $this-columns, $columns);
21
+
22
+ @return get-columns($this-span, $this-location, $this-columns);
23
+ }
24
+
25
+ // use the subset grid for a nested context
26
+ @mixin nested(
27
+ $context
28
+ ) {
29
+ $old-columns: get-setting(columns);
30
+ $columns: nested($context);
31
+
32
+ @content;
33
+
34
+ $columns: $old-columns;
35
+ }
@@ -0,0 +1,216 @@
1
+ // Grid Syntax
2
+ // ===========
3
+
4
+ // Set a new grid using a shorthand
5
+ @mixin set-grid(
6
+ $grid,
7
+ $clean: false
8
+ ) {
9
+ $grid : parse-grid($grid);
10
+
11
+ // get values
12
+ $new-columns : get-setting(columns, $grid);
13
+ $new-gutters : get-setting(gutters, $grid);
14
+ $new-container : get-setting(container, $grid);
15
+ $new-column-width : get-setting(column-width, $grid);
16
+ $new-static : get-setting(static, $grid);
17
+ $new-isolate : get-setting(isolate, $grid);
18
+
19
+ $new-flow : get-setting(flow, $grid);
20
+ $new-gutter-place : get-setting(gutter-placement, $grid);
21
+ $new-show-grids : get-setting(show-grids, $grid);
22
+ $new-box : get-setting(box-sizing, $grid);
23
+
24
+ // fill missing values
25
+ @if not $clean {
26
+ $new-columns : if($new-columns, $new-columns, $columns);
27
+ $new-gutters : if($new-gutters, $new-gutters, $gutters);
28
+ $new-container : if($new-container, $new-container, $container);
29
+ $new-column-width : if($new-column-width, $new-column-width, $column-width);
30
+ $new-static : if($new-static, $new-static, $static);
31
+ $new-isolate : if($new-isolate, $new-isolate, $isolate);
32
+ $new-box : if($new-box, $new-box, $box-sizing);
33
+ }
34
+
35
+ // set values
36
+ $columns : $new-columns;
37
+ $gutters : $new-gutters;
38
+ $container : $new-container;
39
+ $column-width : $new-column-width;
40
+ $static : $new-static;
41
+ $isolate : $new-isolate;
42
+ $box-sizing : $new-box;
43
+
44
+ $flow : if($new-flow, $new-flow, $flow);
45
+ $gutter-placement : if($new-gutter-place, $new-gutter-place, $gutter-placement);
46
+ $show-grids : if($new-show-grids, $new-show-grids, $show-grids);
47
+ }
48
+
49
+ // Use an arbitrary grid for a section of code
50
+ @mixin use-grid(
51
+ $grid,
52
+ $clean: false
53
+ ) {
54
+ $old-grid: get-grid();
55
+
56
+ @include set-grid($grid, $clean);
57
+ @content;
58
+ @include set-grid($old-grid, $clean);
59
+ }
60
+
61
+ // Grid helpers
62
+ // ------------
63
+
64
+ // Get the current grid settings as a shorthand list
65
+ @function get-grid(
66
+ ) {
67
+ $gutter-setting : $gutters;
68
+ $static-setting : false;
69
+ $isolate-setting : false;
70
+ $show-grids-setting : false;
71
+
72
+ // Use units for column/gutter ratio if available
73
+ @if $column-width {
74
+ $gutter-setting: $column-width $column-width * $gutters;
75
+ }
76
+
77
+ // Create keyword for static setting
78
+ @if $static and $static != fluid {
79
+ $static-setting: static;
80
+ } @else {
81
+ $static-setting: fluid;
82
+ }
83
+
84
+ // Create keyword for isolate setting
85
+ @if $isolate and $isolate != float {
86
+ $isolate-setting: isolate;
87
+ } @else {
88
+ $isolate-setting: float;
89
+ }
90
+
91
+ // Create keyword for show-grids setting
92
+ @if $show-grids and $show-grids != hide {
93
+ $show-grids-setting: show;
94
+ } @else {
95
+ $show-grids-setting: hide;
96
+ }
97
+
98
+ // Return grid shorthand
99
+ @return compact($container $columns $gutter-setting $static-setting $isolate-setting $show-grids-setting $flow $gutter-placement $box-sizing);
100
+ }
101
+
102
+ // Parse a shorthand grid, and return an ordered list of settings
103
+ @function parse-grid(
104
+ $grid: get-grid()
105
+ ) {
106
+ $columns-setting : false;
107
+ $gutters-setting : false;
108
+ $container-setting : false;
109
+ $column-width-setting : false;
110
+ $static-setting : false;
111
+ $isolate-setting : false;
112
+ $flow-setting : false;
113
+ $gutter-place-setting : false;
114
+ $show-setting : false;
115
+ $box-setting : false;
116
+
117
+ $columns-check : false;
118
+
119
+ @each $value in $grid {
120
+ @if type-of($value) == string {
121
+ // output: static | fluid
122
+ @if $value == static {
123
+ $static-setting: static;
124
+ } @else if $value == fluid {
125
+ $static-setting: fluid;
126
+ }
127
+
128
+ // output: isolate | fluid
129
+ @if $value == isolate {
130
+ $isolate-setting: isolate;
131
+ } @else if $value == float {
132
+ $isolate-setting: float;
133
+ }
134
+
135
+ // flow: ltr | rtl
136
+ @if $value == rtl {
137
+ $flow-setting: rtl;
138
+ } @else if $value == ltr {
139
+ $flow-setting: ltr;
140
+ }
141
+
142
+ // show-grid: show | hide
143
+ @if $value == show {
144
+ $show-setting: show;
145
+ } @else if $value == hide {
146
+ $show-setting: hide;
147
+ }
148
+
149
+ // gutter-placement: before | after | split | no-gutters
150
+ @if $value == before {
151
+ $gutter-place-setting: before;
152
+ } @else if $value == after {
153
+ $gutter-place-setting: after;
154
+ } @else if $value == split {
155
+ $gutter-place-setting: split;
156
+ } @else if $value == inside {
157
+ $gutter-place-setting: inside;
158
+ } @else if $value == no-gutters {
159
+ $gutter-place-setting: no-gutters;
160
+ }
161
+
162
+ // box-sizing: border-box | content-box
163
+ @if $value == border-box {
164
+ $box-setting: border-box;
165
+ } @else if $value == content-box {
166
+ $box-setting: content-box;
167
+ }
168
+ }
169
+
170
+ // container, columns, or gutters
171
+ @else if type-of($value) == number {
172
+ @if not unitless($value) {
173
+ $container-setting: $value;
174
+ } @else if not $columns-check {
175
+ $columns-setting: $value;
176
+ $columns-check: true;
177
+ } @else {
178
+ $gutters-setting: $value;
179
+ }
180
+ }
181
+
182
+ // columns or gutters
183
+ @else if type-of($value) == list {
184
+ @if unitless(nth($value,1)) {
185
+ $columns-setting: $value;
186
+ $columns-check: true;
187
+ } @else {
188
+ $column-width-setting: nth($value,1);
189
+ $gutters-setting: nth($value,2) / nth($value,1);
190
+ }
191
+ }
192
+ }
193
+
194
+ @return $columns-setting $gutters-setting $container-setting $column-width-setting $static-setting $isolate-setting $flow-setting $gutter-place-setting $show-setting $box-setting;
195
+ }
196
+
197
+ // Return one setting from a shorhand grid
198
+ @function get-setting(
199
+ $setting,
200
+ $grid : parse-grid(get-grid()),
201
+ $parse : false
202
+ ) {
203
+ $options : columns gutters container column-width static isolate flow gutter-placement show-grids box-sizing;
204
+ $key : index($options, $setting);
205
+ $value : false;
206
+
207
+ @if $parse {
208
+ $grid: parse-grid($grid);
209
+ }
210
+
211
+ @if $key and not ($key > length($grid)) {
212
+ $value: nth($grid, $key);
213
+ }
214
+
215
+ @return $value;
216
+ }
@@ -0,0 +1,132 @@
1
+ // Background Grids
2
+ // ================
3
+
4
+ // The overlay is painted over your container's ::after pseudo-element,
5
+ // so we must give position to the container itself.
6
+ // If relative doesn't suit your layout, it can be replaced by absolute/fixed.
7
+ $overlay-position: relative !default;
8
+
9
+ // Set the location of the switch.
10
+ $grid-toggle-position: left bottom !default;
11
+
12
+ // Set the color of background grids/
13
+ $grid-background-color: rgba(#66f, .25) !default;
14
+
15
+ // Grid Background
16
+ // ---------------
17
+
18
+ @mixin grid-background(
19
+ $grid: parse-grid()
20
+ ) {
21
+ $stops : compact();
22
+ $color : $grid-background-color;
23
+
24
+ @if length($grid) == 2 and type-of(nth($grid,2)) == color {
25
+ $color: nth($grid,2);
26
+ $grid: nth($grid,1);
27
+ }
28
+
29
+ $trans : transparent;
30
+ $light : lighten($color, 15%);
31
+
32
+ $this-columns : get-setting(columns, $grid);
33
+ $this-gutters : get-setting(gutters, $grid);
34
+ $this-column-width : get-setting(column-width, $grid);
35
+ $this-static : get-setting(static, $grid);
36
+ $this-gutter-place : get-setting(gutter-placement, $grid);
37
+ $this-flow : get-setting(flow, $grid);
38
+
39
+ $this-static : if($this-static and $this-static != fluid, true, false);
40
+
41
+ @for $location from 1 through column-count($this-columns) {
42
+ $this-stop: compact();
43
+
44
+ @if $location > 1 {
45
+ $start: get-isolation(1, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
46
+ $this-stop: append($this-stop, $color $start, comma);
47
+ }
48
+
49
+ @if $location == column-count($this-columns) {
50
+ $this-stop: append($this-stop, $light 100%, comma);
51
+ } @else {
52
+ $end: get-span-width($location, 1, $this-columns, $this-gutters, $this-column-width, $this-static, $this-gutter-place);
53
+ $gutter: get-isolation(1, $location + 1, $this-columns, $this-gutters, $this-column-width, $this-static);
54
+
55
+ $this-stop: append($this-stop, $light $end, comma);
56
+ $this-stop: append($this-stop, $trans $end, comma);
57
+ $this-stop: append($this-stop, $trans $gutter, comma);
58
+ }
59
+
60
+ $stops: join($stops, $this-stop, comma);
61
+ }
62
+
63
+ @include grid-background-output($stops, $this-flow)
64
+ }
65
+
66
+ // Grid Overlay
67
+ // ------------
68
+
69
+ %grid-overlay-container {
70
+ position: unquote($overlay-position);
71
+ }
72
+
73
+ %grid-overlay {
74
+ content: " ";
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ right: 0;
79
+ bottom: 0;
80
+ height: 100%;
81
+ width: 100%;
82
+ z-index: 998;
83
+ background-color: rgba(red,.25);
84
+ }
85
+
86
+ @mixin grid-overlay (
87
+ $grids...
88
+ ) {
89
+ $vert: nth($grid-toggle-position, 1);
90
+ $horz: nth($grid-toggle-position, 2);
91
+
92
+ head {
93
+ @include transition(all .4s);
94
+ @include border-radius(.25em);
95
+ display: block;
96
+ position: fixed;
97
+ #{$horz}: 10px;
98
+ #{$vert}: 10px;
99
+ z-index: 999;
100
+ color: #333;
101
+ text-shadow: 0 0 3px #fff;
102
+ &::before {
103
+ content: "|||";
104
+ display: block;
105
+ padding: 10px 14px;
106
+ letter-spacing: -1;
107
+ font: {
108
+ family: sans-serif;
109
+ size: 26px;
110
+ weight: bold;
111
+ }
112
+ }
113
+ &:hover {
114
+ @include box-shadow(0 0 3px rgba(#333,.5));
115
+ color: #333;
116
+ background: rgba(white,.5);
117
+ @each $grid in $grids {
118
+ $selector: nth($grid, 1);
119
+ $grid: parse-grid(nth($grid,2));
120
+
121
+ ~ body #{$selector} {
122
+ @extend %grid-overlay-container;
123
+ }
124
+ ~ #{$selector}::before,
125
+ ~ body #{$selector}::before {
126
+ @extend %grid-overlay;
127
+ @include grid-background($grid);
128
+ }
129
+ }
130
+ }
131
+ }
132
+ }