susy 2.0.0.beta.3 → 2.0.0.rc.1

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +29 -29
  3. data/VERSION +1 -1
  4. data/docs/changelog.rst +32 -1
  5. data/sass/susy/_math.scss +1 -0
  6. data/sass/susy/language/_susy.scss +0 -2
  7. data/sass/susy/language/_susyone.scss +0 -4
  8. data/sass/susy/language/susy/_background.scss +31 -25
  9. data/sass/susy/language/susy/_bleed.scss +4 -4
  10. data/sass/susy/language/susy/_box-sizing.scss +1 -1
  11. data/sass/susy/language/susy/_container.scss +1 -1
  12. data/sass/susy/language/susy/_gallery.scss +2 -2
  13. data/sass/susy/language/susy/_gutters.scss +3 -3
  14. data/sass/susy/language/susy/_rows.scss +2 -2
  15. data/sass/susy/language/susy/_settings.scss +68 -116
  16. data/sass/susy/language/susy/_span.scss +2 -2
  17. data/sass/susy/language/susyone/_functions.scss +2 -2
  18. data/sass/susy/language/susyone/_grid.scss +5 -5
  19. data/sass/susy/math/_maps.scss +89 -0
  20. data/sass/susy/math/_settings.scss +51 -0
  21. data/sass/susy/math/_validation.scss +13 -7
  22. data/sass/susy/output/_float.scss +0 -1
  23. data/sass/susy/output/_shared.scss +3 -1
  24. data/sass/susy/output/_support.scss +9 -0
  25. data/sass/susy/output/float/_end.scss +11 -3
  26. data/sass/susy/output/float/_isolate.scss +10 -6
  27. data/sass/susy/output/float/_span.scss +10 -6
  28. data/sass/susy/output/shared/_background.scss +10 -20
  29. data/sass/susy/output/shared/_container.scss +7 -3
  30. data/sass/susy/output/shared/_margins.scss +6 -2
  31. data/sass/susy/output/shared/_output.scss +14 -0
  32. data/sass/susy/output/shared/_padding.scss +6 -2
  33. data/sass/susy/output/support/_background.scss +58 -0
  34. data/sass/susy/output/support/_box-sizing.scss +17 -0
  35. data/sass/susy/output/support/_clearfix.scss +18 -0
  36. data/sass/susy/output/support/_prefix.scss +19 -0
  37. data/sass/susy/output/support/_rem.scss +22 -0
  38. data/sass/susy/output/support/_support.scss +82 -0
  39. metadata +14 -14
  40. data/sass/susy/language/_shared.scss +0 -4
  41. data/sass/susy/language/shared/_maps.scss +0 -85
  42. data/sass/susy/language/susyone/_units.scss +0 -159
  43. data/sass/susy/output/float/_clearfix.scss +0 -15
  44. data/sass/susy/output/shared/_box-sizing.scss +0 -16
@@ -14,6 +14,10 @@
14
14
  $to: to($flow);
15
15
  $from: from($flow);
16
16
 
17
- padding-#{$from}: $before;
18
- padding-#{$to}: $after;
17
+ $output: (
18
+ padding-#{$from}: $before,
19
+ padding-#{$to}: $after,
20
+ );
21
+
22
+ @include output($output);
19
23
  }
@@ -0,0 +1,58 @@
1
+ // Background Properties
2
+ // =====================
3
+
4
+ // Susy Background Image
5
+ // ---------------------
6
+ // Check for an existing support mixin, or provide a simple fallback.
7
+ // - $image: <background-image>
8
+ @mixin susy-background-image(
9
+ $image
10
+ ) {
11
+ @if susy-support(background-image, (mixin: background-image), $warn: false) {
12
+ @include background-image($image...);
13
+ } @else {
14
+ background-image: $image;
15
+ }
16
+ }
17
+
18
+ // Susy Background Size
19
+ // ---------------------
20
+ // Check for an existing support mixin, or provide a simple fallback.
21
+ // - $image: <background-size>
22
+ @mixin susy-background-size(
23
+ $size
24
+ ) {
25
+ @if susy-support(background-options, (mixin: background-size)) {
26
+ @include background-size($size);
27
+ } @else {
28
+ background-size: $size;
29
+ }
30
+ }
31
+
32
+ // Susy Background Origin
33
+ // ----------------------
34
+ // Check for an existing support mixin, or provide a simple fallback.
35
+ // - $image: <background-origin>
36
+ @mixin susy-background-origin(
37
+ $origin
38
+ ) {
39
+ @if susy-support(background-options, (mixin: background-origin)) {
40
+ @include background-origin($origin);
41
+ } @else {
42
+ background-origin: $origin;
43
+ }
44
+ }
45
+
46
+ // Susy Background Clip
47
+ // --------------------
48
+ // Check for an existing support mixin, or provide a simple fallback.
49
+ // - $image: <background-clip>
50
+ @mixin susy-background-clip(
51
+ $clip
52
+ ) {
53
+ @if susy-support(background-options, (mixin: background-clip)) {
54
+ @include background-clip($clip);
55
+ } @else {
56
+ background-clip: $clip;
57
+ }
58
+ }
@@ -0,0 +1,17 @@
1
+ // Box Sizing
2
+ // ==========
3
+
4
+ // Box Sizing
5
+ // ----------
6
+ // Check for an existing support mixin, or provide a simple fallback.
7
+ // - $model: <box-sizing>
8
+ @mixin susy-box-sizing(
9
+ $model: content-box
10
+ ) {
11
+ @if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
12
+ @include box-sizing($model);
13
+ } @else {
14
+ $prefix: (moz, webkit, official);
15
+ @include susy-prefix(box-sizing, $model, $prefix);
16
+ }
17
+ }
@@ -0,0 +1,18 @@
1
+ // Susy Fallback Clearfix
2
+ // ======================
3
+
4
+
5
+ // Clearfix
6
+ // --------
7
+ // Check for an existing support mixin, or provide a simple fallback.
8
+ @mixin susy-clearfix {
9
+ @if susy-support(clearfix, (mixin: clearfix)) {
10
+ @include clearfix;
11
+ } @else {
12
+ &::after {
13
+ content: " ";
14
+ display: block;
15
+ clear: both;
16
+ }
17
+ }
18
+ }
@@ -0,0 +1,19 @@
1
+ // Susy Prefix
2
+ // ===========
3
+
4
+ // Prefix
5
+ // ------
6
+ // Output simple prefixed properties.
7
+ // - $prop : <css property>
8
+ // - $val : <css value>
9
+ // - [$prefix] : <browser prefix list>
10
+ @mixin susy-prefix(
11
+ $prop,
12
+ $val,
13
+ $prefix: official
14
+ ) {
15
+ @each $fix in $prefix {
16
+ $fix: if($fix == official or not $fix, $prop, '-#{$fix}-#{$prop}');
17
+ @include susy-rem($fix, $val);
18
+ }
19
+ }
@@ -0,0 +1,22 @@
1
+ // rem Support
2
+ // ===========
3
+
4
+ // rem
5
+ // ---
6
+ // Check for an existing support mixin, or output directly.
7
+ // - $prop : <css property>
8
+ // - $val : <css value>
9
+ @mixin susy-rem(
10
+ $prop,
11
+ $val
12
+ ) {
13
+ $_reqs: (
14
+ variable: rem-with-px-fallback,
15
+ mixin: rem,
16
+ );
17
+ @if susy-support(rem, $_reqs, $warn: false) {
18
+ @include rem($prop, $val);
19
+ } @else {
20
+ #{$prop}: $val;
21
+ }
22
+ }
@@ -0,0 +1,82 @@
1
+ // Browser Support
2
+ // ===============
3
+
4
+ // Susy Support Defaults
5
+ // ---------------------
6
+ @include susy-defaults((
7
+ use-custom: (
8
+ clearfix: false,
9
+ background-image: true,
10
+ background-options: false,
11
+ box-sizing: true,
12
+ rem: true,
13
+ ),
14
+ ));
15
+
16
+
17
+ // Susy Support [mixin]
18
+ // --------------------
19
+ // Send property-value pairs to the proper support modules.
20
+ // - $prop : <css property>
21
+ // - $val : <css value>
22
+ @mixin susy-support(
23
+ $prop,
24
+ $val
25
+ ) {
26
+ // Background Support
27
+ @if $prop == background-image {
28
+ @include susy-background-image($val);
29
+ } @else if $prop == background-size {
30
+ @include susy-background-size($val);
31
+ } @else if $prop == background-origin {
32
+ @include susy-background-origin($val);
33
+ } @else if $prop == background-clip {
34
+ @include susy-background-clip($val);
35
+ }
36
+
37
+ // Box-Sizing Support
38
+ @else if $prop == box-sizing {
39
+ @include susy-box-sizing($val);
40
+ }
41
+
42
+ // Rem Support
43
+ @else {
44
+ @include susy-rem($prop, $val);
45
+ }
46
+ }
47
+
48
+
49
+ // Susy Support [function]
50
+ // -----------------------
51
+ // Check for support of a feature.
52
+ // - $feature : <string>
53
+ // - e.g "rem" or "box-sizing"
54
+ // - $requirements : <map>
55
+ // - e.g (variable: rem-with-px-fallback, mixin: rem)
56
+ // - $warn : <bool>
57
+ @function susy-support(
58
+ $feature,
59
+ $requirements: (),
60
+ $warn: true
61
+ ) {
62
+ $_support: susy-get(use-custom $feature);
63
+
64
+ @if $_support {
65
+ $_fail: false;
66
+
67
+ @each $_type, $_req in $requirements {
68
+ $_pass: call(#{$_type}-exists, $_req);
69
+
70
+ @if not $_pass {
71
+ $_fail: true;
72
+ @if $warn {
73
+ @warn "You requested custom support of #{$feature}, but the #{$_req} #{$_type} is not available.";
74
+ }
75
+ }
76
+ }
77
+
78
+ $_support: if($_fail, false, $_support);
79
+ }
80
+
81
+ @return $_support;
82
+ }
metadata CHANGED
@@ -1,17 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: susy
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.0.beta.3
4
+ version: 2.0.0.rc.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Eric Meyer
8
- - Mason Wendell
9
8
  - Tsachi Shlidor
10
- - Sam Richard
11
- - Danny Palmer
9
+ - Aaron Gray
12
10
  - Rachel Nabors
13
- - Scott Kellum
14
11
  - Jina Bolton
12
+ - Danny Palmer
15
13
  autorequire:
16
14
  bindir: bin
17
15
  cert_chain: []
@@ -35,13 +33,11 @@ description: Susy is a toolkit for building layouts of all types with a simple,
35
33
  syntax.
36
34
  email:
37
35
  - eric@oddbird.net
38
- - mason@zivtech.com
39
36
  - tsi.shlidor@gmail.com
40
- - snugug@gmail.com
41
- - danny@dannyprose.com
37
+ - aaron@hellometa.com
42
38
  - rachelnabors@gmail.com
43
- - scott@scottkellum.com
44
39
  - jina@sushiandrobots.com
40
+ - danny@dannyprose.com
45
41
  executables: []
46
42
  extensions: []
47
43
  extra_rdoc_files:
@@ -55,10 +51,8 @@ files:
55
51
  - sass/_susy.scss
56
52
  - sass/_susyone.scss
57
53
  - sass/susy/_math.scss
58
- - sass/susy/language/_shared.scss
59
54
  - sass/susy/language/_susy.scss
60
55
  - sass/susy/language/_susyone.scss
61
- - sass/susy/language/shared/_maps.scss
62
56
  - sass/susy/language/susy/_background.scss
63
57
  - sass/susy/language/susy/_bleed.scss
64
58
  - sass/susy/language/susy/_box-sizing.scss
@@ -82,23 +76,29 @@ files:
82
76
  - sass/susy/language/susyone/_media.scss
83
77
  - sass/susy/language/susyone/_padding.scss
84
78
  - sass/susy/language/susyone/_settings.scss
85
- - sass/susy/language/susyone/_units.scss
86
79
  - sass/susy/math/_columns.scss
80
+ - sass/susy/math/_maps.scss
87
81
  - sass/susy/math/_settings.scss
88
82
  - sass/susy/math/_validation.scss
89
83
  - sass/susy/output/_float.scss
90
84
  - sass/susy/output/_shared.scss
91
- - sass/susy/output/float/_clearfix.scss
85
+ - sass/susy/output/_support.scss
92
86
  - sass/susy/output/float/_container.scss
93
87
  - sass/susy/output/float/_end.scss
94
88
  - sass/susy/output/float/_isolate.scss
95
89
  - sass/susy/output/float/_span.scss
96
90
  - sass/susy/output/shared/_background.scss
97
- - sass/susy/output/shared/_box-sizing.scss
98
91
  - sass/susy/output/shared/_container.scss
99
92
  - sass/susy/output/shared/_direction.scss
100
93
  - sass/susy/output/shared/_margins.scss
94
+ - sass/susy/output/shared/_output.scss
101
95
  - sass/susy/output/shared/_padding.scss
96
+ - sass/susy/output/support/_background.scss
97
+ - sass/susy/output/support/_box-sizing.scss
98
+ - sass/susy/output/support/_clearfix.scss
99
+ - sass/susy/output/support/_prefix.scss
100
+ - sass/susy/output/support/_rem.scss
101
+ - sass/susy/output/support/_support.scss
102
102
  - templates/project/_base.scss
103
103
  - templates/project/manifest.rb
104
104
  - templates/project/screen.scss
@@ -1,4 +0,0 @@
1
- // Shared Language
2
- // ===============
3
-
4
- @import "shared/maps";
@@ -1,85 +0,0 @@
1
- // Map Toolkit
2
- // ===========
3
-
4
- // Truncate List
5
- // -------------
6
- // - Return a list, truncated to a given length
7
- @function truncate-list(
8
- $list,
9
- $length
10
- ) {
11
- $return: ();
12
-
13
- @for $i from 1 through length($list) {
14
- $return: if($i <= $length, append($return, nth($list, $i)), $return);
15
- }
16
-
17
- @return $return;
18
- }
19
-
20
- // Deep Get
21
- // --------
22
- // - Return a value deep in nested maps
23
- @function deep-get(
24
- $map,
25
- $keys...
26
- ) {
27
- $return: $map;
28
-
29
- @each $key in $keys {
30
- @if type-of($return) == map {
31
- $return: map-get($return, $key);
32
- }
33
- }
34
-
35
- @return $return;
36
- }
37
-
38
- // Deep Set
39
- // --------
40
- // - Set a value deep in nested maps
41
- @function deep-set(
42
- $map,
43
- $keys,
44
- $value
45
- ) {
46
- $length: length($keys);
47
- $return: ();
48
-
49
- @for $i from 1 through $length {
50
- $n: 0 - $i;
51
- $level: truncate-list($keys, $length + $n);
52
- $level: deep-get($map, $level...);
53
- $merge: (nth($keys, $n): $value);
54
- $value: if($level, map-merge($level, $merge), $merge);
55
- $return: $value;
56
- }
57
-
58
- @return $return;
59
- }
60
-
61
- // Deep Has-Key
62
- // ------------
63
- // - Return true if a deep key exists
64
- @function deep-has-key(
65
- $map,
66
- $keys...
67
- ) {
68
- $return: null;
69
- $break: false;
70
-
71
- @each $key in $keys {
72
- @if not $break {
73
- $return: map-has-key($map, $key);
74
- }
75
-
76
- @if $return {
77
- $map: map-get($map, $key);
78
- } @else {
79
- $break: true;
80
- }
81
- }
82
-
83
- @return $return;
84
- }
85
-
@@ -1,159 +0,0 @@
1
- // @private Default font-size for all browsers
2
- $browser-default-font-size: 16px;
3
-
4
- // Base font size in pixels, if not already defined.
5
- // Should be the same as the font-size of the html element.
6
- $base-font-size: 16px !default;
7
-
8
- // Whether to output fallback values in px when outputting rems.
9
- $rem-with-px-fallback: true !default;
10
-
11
- // Convert any CSS <length> or <percentage> value to any another.
12
- //
13
- // @param $length
14
- // A css <length> or <percentage> value
15
- //
16
- // @param $to-unit
17
- // String matching a css unit keyword, e.g. 'em', '%', etc.
18
- //
19
- // @param $from-context
20
- // When converting from relative units, the absolute length (in px) to
21
- // which $length refers (e.g. for $lengths in em units, would normally be the
22
- // font-size of the current element).
23
- //
24
- // @param $to-context
25
- // For converting to relative units, the absolute length in px to which the
26
- // output value will refer. Defaults to the same as $from-context, since it is
27
- // rarely needed.
28
- @function convert-length(
29
- $length,
30
- $to-unit,
31
- $from-context: $base-font-size,
32
- $to-context: $from-context
33
- ) {
34
-
35
- $from-unit: unit($length);
36
-
37
- // Optimize for cases where `from` and `to` units are accidentally the same.
38
- @if $from-unit == $to-unit { @return $length; }
39
-
40
- // Context values must be in px so we can determine a conversion ratio for
41
- // relative units.
42
- @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
43
- @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
44
-
45
- // Convert input length to pixels
46
- $px-length: $length;
47
-
48
- @if $from-unit != 'px' {
49
- // Convert relative units using the from-context parameter.
50
- @if $from-unit == 'em' { $px-length: $length * $from-context / 1em }
51
- @else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
52
- @else if $from-unit == '%' { $px-length: $length * $from-context / 100% }
53
- @else if $from-unit == 'ex' { $px-length: $length * $from-context / 2ex }
54
- // Convert absolute units using Sass' conversion table.
55
- @else if $from-unit == 'in' or
56
- $from-unit == 'mm' or
57
- $from-unit == 'cm' or
58
- $from-unit == 'pt' or
59
- $from-unit == 'pc' { $px-length: 0px + $length }
60
- // Certain units can't be converted.
61
- @else if $from-unit == 'ch' or
62
- $from-unit == 'vw' or
63
- $from-unit == 'vh' or
64
- $from-unit == 'vmin' {
65
- @warn "#{$from-unit} units can't be reliably converted; Returning original value.";
66
- @return $length;
67
- }
68
- @else {
69
- @warn "#{$from-unit} is an unknown length unit. Returning original value.";
70
- @return $length;
71
- }
72
- }
73
-
74
- // Convert length in pixels to the output unit
75
- $output-length: $px-length;
76
- @if $to-unit != 'px' {
77
- // Relative units
78
- @if $to-unit == 'em' { $output-length: $px-length * 1em / $to-context }
79
- @else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
80
- @else if $to-unit == '%' { $output-length: $px-length * 100% / $to-context }
81
- @else if $to-unit == 'ex' { $output-length: $px-length * 2ex / $to-context }
82
- // Absolute units
83
- @else if $to-unit == 'in' { $output-length: 0in + $px-length }
84
- @else if $to-unit == 'mm' { $output-length: 0mm + $px-length }
85
- @else if $to-unit == 'cm' { $output-length: 0cm + $px-length }
86
- @else if $to-unit == 'pt' { $output-length: 0pt + $px-length }
87
- @else if $to-unit == 'pc' { $output-length: 0pc + $px-length }
88
- // Non-convertible units
89
- @else if $to-unit == 'ch' or
90
- $to-unit == 'vw' or
91
- $to-unit == 'vh' or
92
- $to-unit == 'vmin' {
93
- @warn "#{$to-unit} units can't be reliably converted; Returning original value.";
94
- @return $length;
95
- }
96
- @else {
97
- @warn "#{$to-unit} is an unknown length unit. Returning original value.";
98
- @return $length;
99
- }
100
- }
101
-
102
- @return $output-length;
103
- }
104
-
105
-
106
- // Output a given style rule containing rem values along with an (optional)
107
- // fallback rule for older browsers (with rem values converted to px).
108
- //
109
- // @param $property
110
- // The css property name.
111
- //
112
- // @param $values
113
- // The value (or space-separated list of values) for the property.
114
- //
115
- // @param $use-px-fallback
116
- // [ true | false ]
117
- //
118
- @mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
119
- // Create a couple of empty lists as output buffers.
120
- $px-values: ();
121
- $rem-values: ();
122
-
123
- // Loop through the $values list
124
- @each $value in $values {
125
- // For each property value, if it's in rem or px, derive both rem and
126
- // px values for it and add those to the end of the appropriate buffer.
127
- // Ensure all pixel values are rounded to the nearest pixel.
128
- @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
129
- @if unit($value) == px {
130
- $px-values: join($px-values, round($value));
131
- $rem-values: join($rem-values, convert-length($value, rem));
132
- }
133
- @else {
134
- $px-values: join($px-values, round(convert-length($value, px)));
135
- $rem-values: join($rem-values, $value);
136
- }
137
- }
138
- @else {
139
- $px-values: join($px-values, $value);
140
- $rem-values: join($rem-values, $value);
141
- }
142
- }
143
-
144
- // Use pixel fallback for browsers that don't understand rem units.
145
- @if $use-px-fallback {
146
- #{$property}: $px-values;
147
- }
148
-
149
- // Use rem values for everyone else (overrides pixel values).
150
- #{$property}: $rem-values;
151
- }
152
-
153
- @mixin if-rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
154
- $has-rem: false;
155
- @each $value in $values { $has-rem: if(unit($value) == 'rem', true, $has-rem); }
156
- @if $has-rem { @include rem($property, $values, $use-px-fallback); }
157
- @else { #{$property}: $values; }
158
- }
159
-