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,100 @@
1
+ // Container Syntax
2
+ // ================
3
+
4
+ // Set a container element
5
+ @mixin container(
6
+ $container: get-container()
7
+ ) {
8
+ $container : parse-container($container);
9
+ $grid : parse-grid(nth($container,1));
10
+ $justify : nth($container,2);
11
+ $show : nth($container,3);
12
+ $box : get-setting(box-sizing, $grid);
13
+
14
+ // if there is a container width, use it
15
+ $width : get-setting(container, $grid);
16
+
17
+ @if not $width {
18
+ // if we have a column width, calculate container from that
19
+ $column-width-setting: get-setting(column-width, $grid);
20
+
21
+ @if $column-width-setting {
22
+ $columns-setting: get-setting(columns, $grid);
23
+ $gutters-setting: get-setting(gutters, $grid);
24
+ $outer: if(get-setting(gutter-placement, $grid) == inside, true, false);
25
+
26
+ $width: calculate-container-width($columns-setting, $gutters-setting, $column-width-setting, $outer);
27
+ } @else {
28
+ // if we have nothing, default to 100%
29
+ $width: 100%;
30
+ }
31
+ }
32
+
33
+ @if $show and $show != hide {
34
+ @include grid-background($grid);
35
+ }
36
+
37
+ @if $box == border-box {
38
+ @include box-sizing(border-box);
39
+ } @else if $box == content-box {
40
+ @include box-sizing(content-box);
41
+ }
42
+
43
+ @include float-container($width, $justify, $show);
44
+ }
45
+
46
+ // Container Helpers
47
+ // -----------------
48
+
49
+ // Get the current container-related settings
50
+ @function get-container(
51
+ ) {
52
+ $show: false;
53
+
54
+ // Create keyword for show-grids setting
55
+ @if $show-grids and $show-grids != "hide" {
56
+ $show: show;
57
+ } @else {
58
+ $show: hide;
59
+ }
60
+
61
+ @return get-grid() $container-position $show;
62
+ }
63
+
64
+ // parse the container shorthand syntax, and return an ordered list
65
+ @function parse-container(
66
+ $container: get-container()
67
+ ) {
68
+ $grid : false;
69
+ $justify : $container-position;
70
+ $show : $show-grids;
71
+
72
+ // justify: left | center | right
73
+ @if index($container, left) {
74
+ $justify: left;
75
+ $container: filter($container, left);
76
+ } @else if index($container, center) {
77
+ $justify: center;
78
+ $container: filter($container, center);
79
+ } @else if index($container, right) {
80
+ $justify: right;
81
+ $container: filter($container, right);
82
+ }
83
+
84
+ // show-grids: show | hide
85
+ @if index($container, show) {
86
+ $show: true;
87
+ $container: filter($container, show);
88
+ } @else if index($container, hide) {
89
+ $show: false;
90
+ $container: filter($container, hide);
91
+ }
92
+
93
+ @if length($container) == 1 {
94
+ $grid: nth($container,1);
95
+ } @else {
96
+ $grid: $container;
97
+ }
98
+
99
+ @return $grid $justify $show;
100
+ }
@@ -0,0 +1,58 @@
1
+ // Math Functions
2
+ // ==============
3
+
4
+ // Return the width of a span
5
+ @function span(
6
+ $span: 1
7
+ ) {
8
+ $span : parse-span($span);
9
+
10
+ $width : get-span-setting(span, $span);
11
+
12
+ $this-location : get-span-setting(location, $span);
13
+ $this-columns : get-span-setting(columns, $span);
14
+ $this-gutters : get-span-setting(gutters, $span);
15
+ $this-column-width : get-span-setting(column-width, $span);
16
+ $this-static : get-span-setting(static, $span);
17
+
18
+ $this-location : if($this-location, $this-location, 1);
19
+ $this-columns : if($this-columns, $this-columns, $columns);
20
+ $this-gutters : if($this-gutters, $this-gutters, $gutters);
21
+ $this-column-width : if($this-column-width, $this-column-width, $column-width);
22
+ $this-static : if($this-static, $this-static, $static);
23
+
24
+ $width: get-span-width($width, $this-location, $this-columns, $this-gutters, $this-column-width, $this-static);
25
+
26
+ @return $width;
27
+ }
28
+
29
+ // Return the width of a gutter
30
+ @function gutter(
31
+ $context: get-grid()
32
+ ) {
33
+ $context : parse-grid($context);
34
+
35
+ $this-columns : get-setting(columns, $context);
36
+ $this-gutters : get-setting(gutters, $context);
37
+ $this-column-width : get-setting(column-width, $context);
38
+ $this-static : get-setting(static, $context);
39
+
40
+ $this-columns : if($this-columns, $this-columns, $columns);
41
+ $this-gutters : if($this-gutters, $this-gutters, $gutters);
42
+ $this-column-width : if($this-column-width, $this-column-width, $column-width);
43
+ $this-static : if($this-static, $this-static, $static);
44
+
45
+ $width: get-gutter-width($this-columns, $this-gutters, $this-column-width, $this-static);
46
+
47
+ @return $width;
48
+ }
49
+
50
+ // Return the width of a span, plus any attached gutters
51
+ @function outer-span(
52
+ $span: 1
53
+ ) {
54
+ $width : span($span);
55
+ $gutter : gutter($span);
56
+
57
+ @return $width + $gutter;
58
+ }
@@ -0,0 +1,94 @@
1
+ // Gallery Syntax
2
+ // ==============
3
+
4
+ // Create a gallery
5
+ @mixin gallery(
6
+ $input,
7
+ $selector: child
8
+ ) {
9
+ $this-isolate: get-span-setting(isolate, $input, parse);
10
+
11
+ @if $this-isolate {
12
+ @include isolate-gallery($input);
13
+ } @else {
14
+ @include nth-gallery($input);
15
+ }
16
+ }
17
+
18
+ // Gallery Helpers
19
+ // ---------------
20
+
21
+ // Create a floated gallery
22
+ @mixin nth-gallery(
23
+ $input,
24
+ $selector: child
25
+ ) {
26
+ $this-input : parse-span($input);
27
+
28
+ $span : get-span-setting(span, $this-input);
29
+ $this-columns : get-span-setting(columns, $this-input);
30
+ $context : column-count($this-columns);
31
+ $line : floor($context / $span);
32
+
33
+ @if is-symmetrical($this-columns) {
34
+ @include span($input);
35
+ @include nth-first('#{$line}n + 1');
36
+ @include nth-last('#{$line}n');
37
+ } @else {
38
+ $location : 1;
39
+
40
+ @for $item from 1 through $line {
41
+ $nth: '#{$line}n + #{$item}';
42
+ &:#{format-nth($nth,$selector)} {
43
+ $location-input: join($input, at $location);
44
+
45
+ @include span($location-input);
46
+
47
+ $location: $location + $span;
48
+ @if $location > $context { $location: 1; }
49
+ }
50
+ }
51
+ }
52
+ }
53
+
54
+ // Create an isolated gallery
55
+ @mixin isolate-gallery(
56
+ $input,
57
+ $selector: child
58
+ ) {
59
+ $input : parse-span($input);
60
+ $width : null;
61
+ $location : 1;
62
+
63
+ $span : get-span-setting(span, $input);
64
+ $this-columns : get-span-setting(columns, $input);
65
+ $this-gutters : get-span-setting(gutters, $input);
66
+ $this-column-width : get-span-setting(column-width, $input);
67
+ $this-static : get-span-setting(static, $input);
68
+ $this-flow : get-span-setting(flow, $input);
69
+
70
+ $from : from($this-flow);
71
+ $context : column-count($this-columns);
72
+ $line : floor($context / $span);
73
+
74
+ @if is-symmetrical($this-columns) {
75
+ $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
76
+ }
77
+
78
+ @include float-span-output($width, $from, null, -100%, null, null, $this-flow);
79
+
80
+ @for $item from 1 through $line {
81
+ $nth: '#{$line}n + #{$item}';
82
+ &:#{format-nth($nth,$selector)} {
83
+ $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
84
+ $width: if(is-symmetrical($columns), null, $width);
85
+ $before: get-isolation($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
86
+
87
+ @include float-span-output($width, null, $before, null, null, null, $this-flow);
88
+
89
+ @if $location == 1 { clear: $from; }
90
+ $location: $location + $span;
91
+ @if $location > $context { $location: 1; }
92
+ }
93
+ }
94
+ }
@@ -0,0 +1,51 @@
1
+ // Isolation Syntax
2
+ // ================
3
+
4
+ // Isolation Override
5
+ @mixin isolate(
6
+ $input
7
+ ) {
8
+ $input : parse-span($input);
9
+
10
+ $span : get-span-setting(span, $input);
11
+ $location : get-span-setting(location, $input);
12
+ $this-columns : get-span-setting(columns, $input);
13
+ $this-gutters : get-span-setting(gutters, $input);
14
+ $this-column-width : get-span-setting(column-width, $input);
15
+ $this-static : get-span-setting(static, $input);
16
+ $this-flow : get-span-setting(flow, $input);
17
+
18
+ $push: get-isolation($span, $location, $columns, $gutters, $column-width, $static);
19
+
20
+ @include isolate-output($push,$this-flow);
21
+ }
22
+
23
+ // Isolation Helpers
24
+ // -----------------
25
+
26
+ // Return the isolation position
27
+ @function get-isolation(
28
+ $span,
29
+ $location,
30
+ $columns : $columns,
31
+ $gutters : $gutters,
32
+ $column-width : $column-width,
33
+ $static : $static,
34
+ $gutter-place : $gutter-placement
35
+ ) {
36
+ $context : column-sum($columns, $gutters);
37
+ $width : null;
38
+
39
+ @if type-of($location) == number and not unitless($location) {
40
+ $width: $location;
41
+ } @else {
42
+ $push: get-location-position($span, $location, $columns) - 1;
43
+ @if $push > 0 {
44
+ $width: get-span-width($push, 1, $columns, $gutters, $column-width, $static, $gutter-place, outer);
45
+ } @else {
46
+ $width: null;
47
+ }
48
+ }
49
+
50
+ @return $width;
51
+ }
@@ -0,0 +1,153 @@
1
+ // Susy Math
2
+ // =========
3
+
4
+ // Get all the span results
5
+ @function span-math(
6
+ $span,
7
+ $location,
8
+ $columns : $columns,
9
+ $gutters : $gutters,
10
+ $column-width : $column-width,
11
+ $isolate : $isolate,
12
+ $static : $static,
13
+ $flow : $flow,
14
+ $gutter-place : $gutter-placement,
15
+ $is-container : false,
16
+ $gutter-override : false
17
+ ) {
18
+ $float : from($flow);
19
+ $width : $span;
20
+
21
+ $column : null;
22
+ $padding-before : null;
23
+ $padding-after : null;
24
+ $margin-before : null;
25
+ $margin-after : null;
26
+
27
+ $static : if($static and $static != fluid, true, false);
28
+ $isolate : if($isolate and $isolate != float, true, false);
29
+
30
+ // calculations
31
+ $width: get-span-width($span, $location, $columns, $gutters, $column-width, $static, $gutter-place);
32
+
33
+ // gutter location
34
+ $gutter-location : get-gutters($columns, $gutters, $column-width, $static, $gutter-place, $gutter-override);
35
+
36
+ @if $gutter-place == inside {
37
+ @if not $is-container {
38
+ $padding-before: nth($gutter-location,1);
39
+ $padding-after: nth($gutter-location,2);
40
+ }
41
+ } @else {
42
+ $margin-before: nth($gutter-location,1);
43
+ $margin-after: nth($gutter-location,2);
44
+ }
45
+
46
+ // special margin handling
47
+ @if $isolate {
48
+ $margin-before: get-isolation($span, $location, $columns, $gutters, $column-width, $static);
49
+ $margin-after: -100%;
50
+ } @else {
51
+ @if is-last($span, $location, $columns) {
52
+ $float: to($flow);
53
+ $margin-after: null;
54
+ } @else if is-first($location) {
55
+ $margin-before: null;
56
+ }
57
+ }
58
+
59
+ @return $width $float $margin-before $margin-after $padding-before $padding-after $flow;
60
+ }
61
+
62
+ // Return gutter width
63
+ @function get-gutter-width(
64
+ $columns : $columns,
65
+ $gutters : $gutters,
66
+ $column-width : $columns-width,
67
+ $static : $static
68
+ ) {
69
+ $context : column-sum($columns, $gutters);
70
+ $gutter : null;
71
+
72
+ @if $static {
73
+ @if $column-width {
74
+ $gutter: $gutters * $column-width;
75
+ } @else {
76
+ @warn "Please set a $column-width to use for static output.";
77
+ }
78
+ } @else {
79
+ $gutter: percentage($gutters / $context);
80
+ }
81
+
82
+ @return $gutter;
83
+ }
84
+
85
+ @function get-gutters(
86
+ $columns : $columns,
87
+ $gutters : $gutters,
88
+ $column-width : $column-width,
89
+ $static : $static,
90
+ $gutter-place : $gutter-placement,
91
+ $gutter-override : false
92
+ ) {
93
+ $static : if($gutter-place == inside and $column-width, true, $static);
94
+ $gutter : null;
95
+ $before : null;
96
+ $after : null;
97
+
98
+ @if $gutter-override {
99
+ $gutter: $gutter-override;
100
+ } @else {
101
+ $gutter: get-gutter-width($columns, $gutters, $column-width, $static);
102
+ }
103
+
104
+ @if $gutter-place == before {
105
+ $before: $gutter;
106
+ } @else if $gutter-place == after {
107
+ $after: $gutter;
108
+ } @else if $gutter-place == split or $gutter-place == inside {
109
+ $gutter: if($gutter-override, $gutter, $gutter / 2);
110
+ $before: $gutter;
111
+ $after: $gutter;
112
+ }
113
+
114
+ @return $before $after;
115
+ }
116
+
117
+ // Return span width
118
+ @function get-span-width(
119
+ $span,
120
+ $location,
121
+ $columns : $columns,
122
+ $gutters : $gutters,
123
+ $column-width : $column-width,
124
+ $static : $static,
125
+ $gutter-place : $gutter-placement,
126
+ $outer : null
127
+ ) {
128
+ $context : null;
129
+ $span-sum : null;
130
+ $width : null;
131
+
132
+ @if unitless($span) {
133
+ @if $gutter-place == inside {
134
+ $context: column-sum($columns, $gutters, outer);
135
+ $span-sum: column-sum(get-columns($span, $location, $columns), $gutters, outer);
136
+ } @else {
137
+ $context: column-sum($columns, $gutters);
138
+ $outer: if($outer, $gutters, 0);
139
+ $span-sum: get-column-span-sum($span, $location, $columns, $gutters) + $outer;
140
+ }
141
+
142
+ @if $static {
143
+ $width: $span-sum * $column-width;
144
+ } @else {
145
+ $width: percentage($span-sum / $context);
146
+ }
147
+ } @else {
148
+ $width: $span;
149
+ }
150
+
151
+ @return $width;
152
+ }
153
+