susy 2.0.0.alpha.6 → 2.0.0.beta.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 (48) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +1 -1
  3. data/VERSION +1 -1
  4. data/docs/changelog.rst +568 -0
  5. data/lib/susy.rb +3 -3
  6. data/sass/susy/_helpers.scss +0 -1
  7. data/sass/susy/_math.scss +2 -1
  8. data/sass/susy/api/_float.scss +1 -0
  9. data/sass/susy/api/_shared.scss +2 -0
  10. data/sass/susy/{helpers → api/float}/_clearfix.scss +0 -0
  11. data/sass/susy/api/float/_container.scss +5 -5
  12. data/sass/susy/api/float/_end.scss +10 -3
  13. data/sass/susy/api/float/_isolate.scss +1 -1
  14. data/sass/susy/api/float/_span.scss +1 -1
  15. data/sass/susy/api/shared/_background.scss +2 -2
  16. data/sass/susy/{helpers → api/shared}/_box-sizing.scss +0 -0
  17. data/sass/susy/api/shared/_container.scss +4 -7
  18. data/sass/susy/{helpers → api/shared}/_direction.scss +10 -3
  19. data/sass/susy/api/shared/_margins.scss +1 -1
  20. data/sass/susy/api/shared/_padding.scss +1 -1
  21. data/sass/susy/language/_susy.scss +3 -1
  22. data/sass/susy/language/susy/_background.scss +1 -1
  23. data/sass/susy/language/susy/_bleed.scss +4 -2
  24. data/sass/susy/language/susy/_box-sizing.scss +31 -0
  25. data/sass/susy/language/susy/_breakpoint-plugin.scss +26 -0
  26. data/sass/susy/language/susy/_container.scss +22 -4
  27. data/sass/susy/language/susy/_context.scss +1 -1
  28. data/sass/susy/language/susy/_gallery.scss +20 -18
  29. data/sass/susy/language/susy/_grids.scss +18 -5
  30. data/sass/susy/language/susy/_gutters.scss +3 -3
  31. data/sass/susy/language/susy/_isolate.scss +4 -4
  32. data/sass/susy/language/susy/_rows.scss +66 -73
  33. data/sass/susy/language/susy/_settings.scss +54 -16
  34. data/sass/susy/language/susy/_span.scss +45 -22
  35. data/sass/susy/math/_columns.scss +21 -15
  36. data/sass/susy/math/_container.scss +6 -21
  37. data/sass/susy/math/_settings.scss +24 -0
  38. data/sass/susy/math/_validation.scss +62 -0
  39. data/templates/project/_base.scss +2 -2
  40. data/templates/project/manifest.rb +5 -8
  41. data/templates/project/screen.scss +2 -2
  42. metadata +10 -11
  43. data/CHANGELOG.mkdn +0 -269
  44. data/sass/susy/_core.scss +0 -6
  45. data/sass/susy/_settings.scss +0 -10
  46. data/sass/susy/helpers/_nth.scss +0 -15
  47. data/sass/susy/math/_location.scss +0 -48
  48. data/templates/project/README.md +0 -84
data/lib/susy.rb CHANGED
@@ -4,9 +4,9 @@ begin
4
4
  Compass::Frameworks.register('susy', :stylesheets_directory => susy_stylesheets_path)
5
5
  rescue LoadError
6
6
  # compass not found, register on the Sass path via the environment.
7
- if ENV.has_key?("SASSPATH")
8
- ENV["SASSPATH"] = ENV["SASSPATH"] + File::PATH_SEPARATOR + susy_stylesheets_path
7
+ if ENV.has_key?("SASS_PATH")
8
+ ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + susy_stylesheets_path
9
9
  else
10
- ENV["SASSPATH"] = susy_stylesheets_path
10
+ ENV["SASS_PATH"] = susy_stylesheets_path
11
11
  end
12
12
  end
@@ -4,4 +4,3 @@
4
4
  @import "helpers/clearfix";
5
5
  @import "helpers/box-sizing";
6
6
  @import "helpers/direction";
7
- @import "helpers/nth";
data/sass/susy/_math.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  // Math
2
2
  // ====
3
3
 
4
+ @import "math/settings";
5
+ @import "math/validation";
4
6
  @import "math/container";
5
7
  @import "math/columns";
6
- @import "math/location";
@@ -3,6 +3,7 @@
3
3
 
4
4
  @import "shared";
5
5
 
6
+ @import "float/clearfix";
6
7
  @import "float/container";
7
8
  @import "float/span";
8
9
  @import "float/end";
@@ -1,6 +1,8 @@
1
1
  // Shared API
2
2
  // ==========
3
3
 
4
+ @import "shared/box-sizing";
5
+ @import "shared/direction";
4
6
  @import "shared/background";
5
7
  @import "shared/container";
6
8
  @import "shared/margins";
File without changes
@@ -5,12 +5,12 @@
5
5
  // ---------------
6
6
  // - [$width] : <length>
7
7
  // - [$justify] : left | center | right
8
- // - [$layout-math] : fluid | static
8
+ // - [$math] : fluid | static
9
9
  @mixin float-container(
10
- $width : susy-get(container),
11
- $justify : susy-get(container-position),
12
- $layout-math : susy-get(layout-math)
10
+ $width,
11
+ $justify: auto auto,
12
+ $property: max-width
13
13
  ) {
14
14
  @include susy-clearfix;
15
- @include container-output($width, $justify, $layout-math);
15
+ @include container-output($width, $justify, $property);
16
16
  }
@@ -1,12 +1,19 @@
1
1
  // Float Ends API
2
2
  // ==============
3
3
 
4
+ // Susy End Defaults
5
+ // -----------------
6
+ // - PRIVATE
7
+ @include susy-defaults((
8
+ last-flow: to,
9
+ ));
10
+
4
11
  // Float Last
5
12
  // ----------
6
13
  // - [$flow] : ltr | rtl
7
14
  @mixin float-last(
8
- $flow: susy-get(flow),
9
- $last-flow: susy-get(last-flow),
15
+ $flow: map-get($susy-defaults, flow),
16
+ $last-flow: map-get($susy-defaults, last-flow),
10
17
  $margin: 0
11
18
  ) {
12
19
  $to: to($flow);
@@ -19,7 +26,7 @@
19
26
  // -----------
20
27
  // - [$flow] : ltr | rtl
21
28
  @mixin float-first(
22
- $flow: susy-get(flow)
29
+ $flow: map-get($susy-defaults, flow)
23
30
  ) {
24
31
  margin-#{from($flow)}: 0;
25
32
  }
@@ -7,7 +7,7 @@
7
7
  // - [$flow] : ltr | rtl
8
8
  @mixin isolate-output(
9
9
  $push,
10
- $flow : susy-get(flow)
10
+ $flow : map-get($susy-defaults, flow)
11
11
  ) {
12
12
  $to : to($flow);
13
13
  $from : from($flow);
@@ -17,7 +17,7 @@
17
17
  $margin-after : null,
18
18
  $padding-before : null,
19
19
  $padding-after : null,
20
- $flow : susy-get(flow)
20
+ $flow : map-get($susy-defaults, flow)
21
21
  ) {
22
22
  $to : to($flow);
23
23
  $from : from($flow);
@@ -12,10 +12,10 @@
12
12
  $image,
13
13
  $size: false,
14
14
  $clip: false,
15
- $flow: susy-get(flow)
15
+ $flow: map-get($susy-defaults, flow)
16
16
  ) {
17
17
  @if mixin-exists(background-image) {
18
- @include background-image($image);
18
+ @include background-image($image...);
19
19
  } @else {
20
20
  background-image: $image;
21
21
  }
File without changes
@@ -5,15 +5,12 @@
5
5
  // ----------------
6
6
  // - [$width] : <length>
7
7
  // - [$justify] : left | center | right
8
- // - [$layout-math] : fluid | static
8
+ // - [$math] : fluid | static
9
9
  @mixin container-output(
10
- $width : susy-get(container),
11
- $justify : susy-get(container-position),
12
- $layout-math : susy-get(layout-math)
10
+ $width,
11
+ $justify: auto auto,
12
+ $property: max-width
13
13
  ) {
14
- $property : if($layout-math == static, width, max-width);
15
- $justify : parse-container-position($justify);
16
-
17
14
  #{$property}: $width or 100%;
18
15
  margin-left: nth($justify, 1);
19
16
  margin-right: nth($justify, 2);
@@ -1,13 +1,20 @@
1
1
  // Direction Helpers
2
2
  // =================
3
3
 
4
+ // Susy Flow Defaults
5
+ // ------------------
6
+ // - PRIVATE
7
+ @include susy-defaults((
8
+ flow: ltr,
9
+ ));
10
+
4
11
  // Get Direction
5
12
  // -------------
6
13
  // Return the 'from' or 'to' direction of a ltr or rtl flow.
7
14
  // - [$flow] : ltr | rtl
8
15
  // - [$key] : from | to
9
16
  @function get-direction(
10
- $flow: susy-get(flow),
17
+ $flow: map-get($susy-defaults, flow),
11
18
  $key: from
12
19
  ) {
13
20
  $return: if($flow == rtl, (from: right, to: left), (from: left, to: right));
@@ -19,7 +26,7 @@
19
26
  // Return the 'to' direction of a flow
20
27
  // - [$flow] : ltr | rtl
21
28
  @function to(
22
- $flow: susy-get(flow)
29
+ $flow: map-get($susy-defaults, flow)
23
30
  ) {
24
31
  @return get-direction($flow, to);
25
32
  }
@@ -29,7 +36,7 @@
29
36
  // Return the 'from' direction of a flow
30
37
  // - [$flow] : ltr | rtl
31
38
  @function from(
32
- $flow: susy-get(flow)
39
+ $flow: map-get($susy-defaults, flow)
33
40
  ) {
34
41
  @return get-direction($flow, from);
35
42
  }
@@ -9,7 +9,7 @@
9
9
  @mixin margin-output(
10
10
  $before,
11
11
  $after,
12
- $flow: susy-get(flow)
12
+ $flow: map-get($susy-defaults, flow)
13
13
  ) {
14
14
  $to: to($flow);
15
15
  $from: from($flow);
@@ -9,7 +9,7 @@
9
9
  @mixin padding-output(
10
10
  $before,
11
11
  $after,
12
- $flow: susy-get(flow)
12
+ $flow: map-get($susy-defaults, flow)
13
13
  ) {
14
14
  $to: to($flow);
15
15
  $from: from($flow);
@@ -1,11 +1,12 @@
1
1
  // Susy Next Syntax
2
2
  // ================
3
3
 
4
- @import "../core";
4
+ @import "../math";
5
5
  @import "../api/float";
6
6
 
7
7
  @import "susy/settings";
8
8
  @import "susy/grids";
9
+ @import "susy/box-sizing";
9
10
  @import "susy/context";
10
11
  @import "susy/background";
11
12
  @import "susy/container";
@@ -17,3 +18,4 @@
17
18
  @import "susy/margins";
18
19
  @import "susy/padding";
19
20
  @import "susy/bleed";
21
+ @import "susy/breakpoint-plugin";
@@ -129,7 +129,7 @@ $debug-defaults: (
129
129
  $grid : parse-grid($grid);
130
130
  $gutters : susy-get(gutters, $grid);
131
131
  $column-width : susy-get(column-width, $grid);
132
- $math : susy-get(layout-math, $grid);
132
+ $math : susy-get(math, $grid);
133
133
 
134
134
  $color : debug-get(color);
135
135
  $trans : transparent;
@@ -8,13 +8,15 @@
8
8
  @mixin bleed(
9
9
  $bleed: 0 gutter()
10
10
  ) {
11
- $bleed : parse-span($bleed);
11
+ $bleed : map-merge(parse-span($bleed), (spread: wide));
12
12
  $trbl : susy-get(span, $bleed);
13
13
  $spans : (top: 0, right: 0, bottom: 0, left: 0);
14
14
 
15
15
  $i: 1;
16
16
  @each $span in $trbl {
17
- $span: span(map-merge($bleed, (span: $span)));
17
+ $this: map-merge($bleed, (span: $span));
18
+ $span: span($this);
19
+
18
20
  @if $i == 1 {
19
21
  $spans: map-merge($spans, (top: $span, right: $span, bottom: $span, left: $span));
20
22
  } @else if $i == 2 {
@@ -0,0 +1,31 @@
1
+ // Global Box Sizing
2
+ // =================
3
+
4
+ // Global Box Sizing
5
+ // -----------------
6
+ // Set a box model globally on all elements.
7
+ // - [$box]: border-box | content-box
8
+ @mixin global-box-sizing(
9
+ $box: susy-get(global-box-sizing)
10
+ ) {
11
+ *, *:before, *:after { @include susy-box-sizing($box); }
12
+ @include update-box-model($box);
13
+ }
14
+
15
+ // Border Box Sizing
16
+ // -----------------
17
+ // A legacy shortcut...
18
+ @mixin border-box-sizing {
19
+ @include global-box-sizing(border-box);
20
+ }
21
+
22
+ // Update Box Model
23
+ // ----------------
24
+ // PRIVATE: Updates global box model setting
25
+ @mixin update-box-model(
26
+ $box
27
+ ) {
28
+ @if $box != susy-get(global-box-sizing) {
29
+ @include susy-set(global-box-sizing, $box);
30
+ }
31
+ }
@@ -0,0 +1,26 @@
1
+ // Breakpoint Integration
2
+ // ======================
3
+ // REQUIRES Breakpoint: http://breakpoint-sass.com/
4
+
5
+
6
+ // Susy Breakpoint
7
+ // ---------------
8
+ // Change grids at different mediaqueries.
9
+ // - $query : <breakpoint $query>
10
+ // - $layout : <settings>
11
+ // - $no-query : <breakpoint $no-query>
12
+ @mixin susy-breakpoint(
13
+ $query,
14
+ $layout,
15
+ $no-query: false
16
+ ) {
17
+ @if mixin-exists(breakpoint) {
18
+ @include breakpoint($query, $no-query) {
19
+ @include use-grid($layout) {
20
+ @content;
21
+ }
22
+ }
23
+ } @else {
24
+ @warn "Susy-breakpoint requires the Breakpoint plugin (http://breakpoint-sass.com/)";
25
+ }
26
+ }
@@ -8,18 +8,19 @@
8
8
  @mixin container(
9
9
  $grid: $susy
10
10
  ) {
11
- $grid: parse-grid($grid);
11
+ $grid : parse-grid($grid);
12
12
 
13
13
  $width : get-container-width($grid);
14
- $justify : susy-get(container-position, $grid);
15
- $math : susy-get(layout-math, $grid);
14
+ $justify : parse-container-position(susy-get(container-position, $grid));
15
+ $property : if(susy-get(math, $grid) == static, width, max-width);
16
+
16
17
  $box : susy-get(box-sizing, $grid);
17
18
 
18
19
  @if $box {
19
20
  @include susy-box-sizing($box);
20
21
  }
21
22
 
22
- @include float-container($width, $justify, $math);
23
+ @include float-container($width, $justify, $property);
23
24
  @include show-grid($grid);
24
25
  }
25
26
 
@@ -59,3 +60,20 @@
59
60
 
60
61
  @return $width;
61
62
  }
63
+
64
+ // Parse Container Position
65
+ // ------------------------
66
+ // Parse the $container-position into margin values.
67
+ // - [$justify] : left | center | right | <length> [<length>]
68
+ @function parse-container-position(
69
+ $justify: map-get($susy-defaults, container-position)
70
+ ) {
71
+ $return: if($justify == left, 0, auto) if($justify == right, 0, auto);
72
+
73
+ @if not index(left right center, $justify) {
74
+ $return: nth($justify, 1);
75
+ $return: $return if(length($justify) > 1, nth($justify, 2), $return);
76
+ }
77
+
78
+ @return $return;
79
+ }
@@ -10,7 +10,7 @@
10
10
  ) {
11
11
  $context : parse-span($context);
12
12
  $span : susy-get(span, $context);
13
- $location : susy-get(location, $context);
13
+ $location : get-location($context);
14
14
  $columns : susy-get(columns, $context);
15
15
 
16
16
  @return get-columns($span, $location, $columns);
@@ -10,19 +10,18 @@
10
10
  $layout,
11
11
  $selector: child
12
12
  ) {
13
- $layout : parse-span($layout);
14
- $layout : map-merge($layout, (location: 1));
13
+ $layout : parse-span($layout);
14
+ $layout : map-merge($layout, (location: 1));
15
15
 
16
- $span : susy-get(span, $layout);
17
- $columns : susy-get(columns, $layout);
18
- $context : column-count($columns);
19
- $flow : susy-get(flow, $layout);
16
+ $span : susy-get(span, $layout);
17
+ $columns : susy-get(columns, $layout);
18
+ $context : column-count($columns);
19
+ $flow : susy-get(flow, $layout);
20
20
 
21
- $box : susy-get(box-sizing, $layout);
22
- $inside : is-inside($layout);
23
- $from : from($flow);
24
- $line : floor($context / $span);
25
- $symmetrical : is-symmetrical($columns);
21
+ $inside : is-inside($layout);
22
+ $from : from($flow);
23
+ $line : floor($context / $span);
24
+ $symmetrical : is-symmetrical($columns);
26
25
 
27
26
  $output: (
28
27
  width : null,
@@ -46,8 +45,11 @@
46
45
  $output: map-merge($output, (width: get-span-width($layout)));
47
46
  }
48
47
 
48
+ $box : susy-get(box-sizing, $layout);
49
+ $global-box : if(susy-get(global-box-sizing) == 'border-box', true, false);
50
+
49
51
  // Collective Output
50
- @if $box == border-box or $inside {
52
+ @if $box == border-box or ($inside and not $box and not $global-box) {
51
53
  @include susy-box-sizing(border-box);
52
54
  } @else if $box == content-box {
53
55
  @include susy-box-sizing(content-box);
@@ -57,8 +59,8 @@
57
59
 
58
60
  // Individual Loop
59
61
  @for $item from 1 through $line {
60
- $nth: '#{$line}n + #{$item}';
61
- &:#{format-nth($nth,$selector)} {
62
+ $n: '#{$line}n + #{$item}';
63
+ &:nth-#{$selector}(#{$n}) {
62
64
  // Individual Prep
63
65
  $output: (
64
66
  width : if($symmetrical, null, get-span-width($layout)),
@@ -73,15 +75,15 @@
73
75
  // Individual Output
74
76
  @include float-span-output($output...);
75
77
 
76
- @if is-first(susy-get(location, $layout)) {
78
+ @if get-edge($layout) == first {
79
+ @include break;
77
80
  @include first($layout);
78
- clear: $from;
79
81
  } @else {
80
- clear: none;
82
+ @include nobreak;
81
83
  }
82
84
 
83
85
  // Individual Location Increment
84
- $location: susy-get(location, $layout) + $span;
86
+ $location: get-location($layout) + $span;
85
87
  $location: if($location > $context, 1, $location);
86
88
  $layout: map-merge($layout, (location: $location));
87
89
  }