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.
- checksums.yaml +4 -4
- data/LICENSE.txt +1 -1
- data/VERSION +1 -1
- data/docs/changelog.rst +568 -0
- data/lib/susy.rb +3 -3
- data/sass/susy/_helpers.scss +0 -1
- data/sass/susy/_math.scss +2 -1
- data/sass/susy/api/_float.scss +1 -0
- data/sass/susy/api/_shared.scss +2 -0
- data/sass/susy/{helpers → api/float}/_clearfix.scss +0 -0
- data/sass/susy/api/float/_container.scss +5 -5
- data/sass/susy/api/float/_end.scss +10 -3
- data/sass/susy/api/float/_isolate.scss +1 -1
- data/sass/susy/api/float/_span.scss +1 -1
- data/sass/susy/api/shared/_background.scss +2 -2
- data/sass/susy/{helpers → api/shared}/_box-sizing.scss +0 -0
- data/sass/susy/api/shared/_container.scss +4 -7
- data/sass/susy/{helpers → api/shared}/_direction.scss +10 -3
- data/sass/susy/api/shared/_margins.scss +1 -1
- data/sass/susy/api/shared/_padding.scss +1 -1
- data/sass/susy/language/_susy.scss +3 -1
- data/sass/susy/language/susy/_background.scss +1 -1
- data/sass/susy/language/susy/_bleed.scss +4 -2
- data/sass/susy/language/susy/_box-sizing.scss +31 -0
- data/sass/susy/language/susy/_breakpoint-plugin.scss +26 -0
- data/sass/susy/language/susy/_container.scss +22 -4
- data/sass/susy/language/susy/_context.scss +1 -1
- data/sass/susy/language/susy/_gallery.scss +20 -18
- data/sass/susy/language/susy/_grids.scss +18 -5
- data/sass/susy/language/susy/_gutters.scss +3 -3
- data/sass/susy/language/susy/_isolate.scss +4 -4
- data/sass/susy/language/susy/_rows.scss +66 -73
- data/sass/susy/language/susy/_settings.scss +54 -16
- data/sass/susy/language/susy/_span.scss +45 -22
- data/sass/susy/math/_columns.scss +21 -15
- data/sass/susy/math/_container.scss +6 -21
- data/sass/susy/math/_settings.scss +24 -0
- data/sass/susy/math/_validation.scss +62 -0
- data/templates/project/_base.scss +2 -2
- data/templates/project/manifest.rb +5 -8
- data/templates/project/screen.scss +2 -2
- metadata +10 -11
- data/CHANGELOG.mkdn +0 -269
- data/sass/susy/_core.scss +0 -6
- data/sass/susy/_settings.scss +0 -10
- data/sass/susy/helpers/_nth.scss +0 -15
- data/sass/susy/math/_location.scss +0 -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?("
|
8
|
-
ENV["
|
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["
|
10
|
+
ENV["SASS_PATH"] = susy_stylesheets_path
|
11
11
|
end
|
12
12
|
end
|
data/sass/susy/_helpers.scss
CHANGED
data/sass/susy/_math.scss
CHANGED
data/sass/susy/api/_float.scss
CHANGED
data/sass/susy/api/_shared.scss
CHANGED
File without changes
|
@@ -5,12 +5,12 @@
|
|
5
5
|
// ---------------
|
6
6
|
// - [$width] : <length>
|
7
7
|
// - [$justify] : left | center | right
|
8
|
-
// - [$
|
8
|
+
// - [$math] : fluid | static
|
9
9
|
@mixin float-container(
|
10
|
-
$width
|
11
|
-
$justify
|
12
|
-
$
|
10
|
+
$width,
|
11
|
+
$justify: auto auto,
|
12
|
+
$property: max-width
|
13
13
|
) {
|
14
14
|
@include susy-clearfix;
|
15
|
-
@include container-output($width, $justify, $
|
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:
|
9
|
-
$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:
|
29
|
+
$flow: map-get($susy-defaults, flow)
|
23
30
|
) {
|
24
31
|
margin-#{from($flow)}: 0;
|
25
32
|
}
|
@@ -12,10 +12,10 @@
|
|
12
12
|
$image,
|
13
13
|
$size: false,
|
14
14
|
$clip: false,
|
15
|
-
$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
|
-
// - [$
|
8
|
+
// - [$math] : fluid | static
|
9
9
|
@mixin container-output(
|
10
|
-
$width
|
11
|
-
$justify
|
12
|
-
$
|
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:
|
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:
|
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:
|
39
|
+
$flow: map-get($susy-defaults, flow)
|
33
40
|
) {
|
34
41
|
@return get-direction($flow, from);
|
35
42
|
}
|
@@ -1,11 +1,12 @@
|
|
1
1
|
// Susy Next Syntax
|
2
2
|
// ================
|
3
3
|
|
4
|
-
@import "../
|
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(
|
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
|
-
$
|
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
|
-
$
|
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, $
|
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 :
|
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
|
14
|
-
$layout
|
13
|
+
$layout : parse-span($layout);
|
14
|
+
$layout : map-merge($layout, (location: 1));
|
15
15
|
|
16
|
-
$span
|
17
|
-
$columns
|
18
|
-
$context
|
19
|
-
$flow
|
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
|
-
$
|
22
|
-
$
|
23
|
-
$
|
24
|
-
$
|
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
|
-
$
|
61
|
-
|
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
|
78
|
+
@if get-edge($layout) == first {
|
79
|
+
@include break;
|
77
80
|
@include first($layout);
|
78
|
-
clear: $from;
|
79
81
|
} @else {
|
80
|
-
|
82
|
+
@include nobreak;
|
81
83
|
}
|
82
84
|
|
83
85
|
// Individual Location Increment
|
84
|
-
$location:
|
86
|
+
$location: get-location($layout) + $span;
|
85
87
|
$location: if($location > $context, 1, $location);
|
86
88
|
$layout: map-merge($layout, (location: $location));
|
87
89
|
}
|