compass-susy-plugin 0.7.0.pre7 → 0.7.0.pre8
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.
- data/README.mkdn +0 -1
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +2 -2
- data/lib/susy/sass_extensions.rb +10 -2
- data/sass/susy/_grid.scss +69 -40
- data/sass/susy/_reset.scss +3 -0
- data/sass/susy/_susy.scss +4 -1
- data/sass/susy/_text.scss +1 -0
- data/sass/susy/_utils.scss +22 -15
- data/sass/susy/_vertical_rhythm.scss +46 -18
- data/templates/project/_base.scss +4 -2
- data/templates/project/_defaults.scss +63 -33
- data/templates/project/manifest.rb +17 -0
- data/templates/project/print.scss +12 -4
- metadata +3 -3
data/README.mkdn
CHANGED
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.7.0.
|
1
|
+
0.7.0.pre8
|
data/compass-susy-plugin.gemspec
CHANGED
@@ -2,11 +2,11 @@
|
|
2
2
|
|
3
3
|
Gem::Specification.new do |s|
|
4
4
|
s.name = %q{compass-susy-plugin}
|
5
|
-
s.version = "0.7.0.
|
5
|
+
s.version = "0.7.0.pre8"
|
6
6
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
|
8
8
|
s.authors = ["Eric Meyer"]
|
9
|
-
s.date = %q{2010-04-
|
9
|
+
s.date = %q{2010-04-20}
|
10
10
|
s.description = %q{Susy is a ground-up native Compass plugin grid system that takes full advantage of Sass' capabilities to remove the tedium from grid-based web design.}
|
11
11
|
s.email = %q{eric@oddbird.net}
|
12
12
|
s.extra_rdoc_files = ["LICENSE.txt", "README.mkdn", "lib/susy.rb", "lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb"]
|
data/lib/susy/sass_extensions.rb
CHANGED
@@ -1,5 +1,13 @@
|
|
1
1
|
require 'sass'
|
2
2
|
|
3
|
+
module Sass::Script
|
4
|
+
class Number < Literal
|
5
|
+
def ceil
|
6
|
+
Number.new(value.ceil, numerator_units, denominator_units)
|
7
|
+
end
|
8
|
+
end
|
9
|
+
end
|
10
|
+
|
3
11
|
module Sass::Script::Functions
|
4
12
|
|
5
13
|
# some helpful constants
|
@@ -27,7 +35,7 @@ module Sass::Script::Functions
|
|
27
35
|
sg = @@susy_side_gutter_width
|
28
36
|
end
|
29
37
|
c, g = [@@susy_column_width, @@susy_gutter_width]
|
30
|
-
n.times(c).plus(n.minus(ONE).times(g)).plus(sg.times(TWO))
|
38
|
+
n.times(c).plus(n.minus(ONE).ceil.times(g)).plus(sg.times(TWO))
|
31
39
|
end
|
32
40
|
|
33
41
|
# return the percentage width of 'n' columns in a context of
|
@@ -36,7 +44,7 @@ module Sass::Script::Functions
|
|
36
44
|
raise Sass::SyntaxError, "container() must be called before columns() - should be called in susy/susy.sass" unless defined?(@@susy_column_width)
|
37
45
|
w = context(context_columns)
|
38
46
|
c, g = [@@susy_column_width, @@susy_gutter_width]
|
39
|
-
n.times(c).plus(n.minus(ONE).times(g)).div(w).times(PERCENT)
|
47
|
+
n.times(c).plus(n.minus(ONE).ceil.times(g)).div(w).times(PERCENT)
|
40
48
|
end
|
41
49
|
|
42
50
|
# return the percentage width of a single gutter in a context of
|
data/sass/susy/_grid.scss
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
//**
|
1
|
+
//** Susy Grid **//
|
2
|
+
|
2
3
|
|
3
4
|
// Your basic settings for the grid.
|
4
5
|
// Override these in base.sass to customize your site.
|
@@ -10,7 +11,7 @@ $side-gutter-width: $gutter-width !default;
|
|
10
11
|
// Susy will set your outer shell based on the variables above.
|
11
12
|
$container-width: container($total-cols, $col-width, $gutter-width, $side-gutter-width);
|
12
13
|
|
13
|
-
// Set on the outer grid-containing element(s).
|
14
|
+
// Set +container() on the outer grid-containing element(s).
|
14
15
|
@mixin container($align: left) {
|
15
16
|
// clear all floated columns
|
16
17
|
@include clearfix;
|
@@ -19,13 +20,15 @@ $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter
|
|
19
20
|
// use auto horizontal margins to center your page in the body
|
20
21
|
margin: {
|
21
22
|
left: auto;
|
22
|
-
right: auto;
|
23
|
+
right: auto;
|
24
|
+
};
|
23
25
|
// set the page width based on column settings
|
24
26
|
width: $container-width;
|
25
27
|
// never exceed 100% of the browser window (no side-scrolling)
|
26
|
-
max-width: 100%;
|
28
|
+
max-width: 100%;
|
29
|
+
}
|
27
30
|
|
28
|
-
// Set on any column element, even nested ones.
|
31
|
+
// Set +columns() on any column element, even nested ones.
|
29
32
|
// The first agument [required] is the number of columns to span.
|
30
33
|
// The second argument is the context (columns spanned by parent).
|
31
34
|
// - Context is required on any nested elements.
|
@@ -38,30 +41,48 @@ $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter
|
|
38
41
|
// the width of the column is set as a percentage of the context
|
39
42
|
width: columns($n, $context);
|
40
43
|
// the right gutter is added as a percentage of the context
|
41
|
-
margin-right: gutter($context);
|
44
|
+
margin-right: gutter($context);
|
45
|
+
}
|
46
|
+
|
47
|
+
// Set +un-column to reset a column element to default block behavior
|
48
|
+
@mixin un-column {
|
49
|
+
float: none;
|
50
|
+
display: block;
|
51
|
+
width: auto;
|
52
|
+
margin-right: auto;
|
53
|
+
}
|
42
54
|
|
43
|
-
// Set on any element to add empty colums as padding
|
55
|
+
// Set +prefix() on any element to add empty colums as padding
|
56
|
+
// before or after.
|
44
57
|
@mixin prefix($n, $context: false) {
|
45
|
-
padding-left: columns($n, $context) + gutter($context);
|
58
|
+
padding-left: columns($n, $context) + gutter($context);
|
59
|
+
}
|
46
60
|
|
47
61
|
@mixin suffix($n, $context: false) {
|
48
|
-
padding-right: columns($n, $context) + gutter($context);
|
62
|
+
padding-right: columns($n, $context) + gutter($context);
|
63
|
+
}
|
49
64
|
|
50
65
|
// Set as a shortcut for both prefix and suffix.
|
51
|
-
@mixin pad($p:
|
52
|
-
@if $p
|
53
|
-
@include prefix($p, $c);
|
54
|
-
|
55
|
-
|
66
|
+
@mixin pad($p: false, $s: false, $c: false) {
|
67
|
+
@if $p {
|
68
|
+
@include prefix($p, $c);
|
69
|
+
}
|
70
|
+
@if $s {
|
71
|
+
@include suffix($s, $c);
|
72
|
+
}
|
73
|
+
}
|
56
74
|
|
57
|
-
// Set on any element spanning the first column in non-nested
|
58
|
-
// to take side-gutters into account. Recommended that you pass
|
59
|
-
// actual nested contexts (when nested) rather than a true/false
|
60
|
-
// for the sake of consistency. Effect is the same.
|
75
|
+
// Set +alpha on any element spanning the first column in non-nested
|
76
|
+
// context to take side-gutters into account. Recommended that you pass
|
77
|
+
// the actual nested contexts (when nested) rather than a true/false
|
78
|
+
// argument for the sake of consistency. Effect is the same.
|
61
79
|
@mixin alpha($nested: false) {
|
62
|
-
@if $nested
|
63
|
-
margin-left: side-gutter();
|
64
|
-
|
80
|
+
@if not $nested {
|
81
|
+
margin-left: side-gutter();
|
82
|
+
} @else {
|
83
|
+
@warn "The alpha mixin is not needed in a nested context";
|
84
|
+
}
|
85
|
+
}
|
65
86
|
|
66
87
|
// Sets the direction that +omega elements are floated
|
67
88
|
// - Override $omega_float globally or set +float locally to change
|
@@ -74,17 +95,21 @@ $omega-float: right !default;
|
|
74
95
|
@mixin ie-omega($dir: $omega-float, $hack: false) {
|
75
96
|
$s: side-gutter();
|
76
97
|
@if $dir == right {
|
77
|
-
@if $hack
|
78
|
-
#margin-left: - $gutter-width;
|
79
|
-
@else {
|
80
|
-
margin-left: - $gutter-width;
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
98
|
+
@if $hack {
|
99
|
+
#margin-left: - $gutter-width;
|
100
|
+
} @else {
|
101
|
+
margin-left: - $gutter-width;
|
102
|
+
}
|
103
|
+
} @else {
|
104
|
+
@if $hack {
|
105
|
+
#margin-right: - $gutter-width;
|
106
|
+
} @else {
|
107
|
+
margin-right: - $gutter-width;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
86
111
|
|
87
|
-
// Set omega on the last element of a row to take side-gutters
|
112
|
+
// Set +omega() on the last element of a row, in order to take side-gutters
|
88
113
|
// and the page edge into account. Set the $nested argument for nested
|
89
114
|
// columns. It is recommended that you pass the actual nested context when
|
90
115
|
// nested, rather than a true/false argument, for the sake of consistency.
|
@@ -92,19 +117,23 @@ $omega-float: right !default;
|
|
92
117
|
@mixin omega($nested: false) {
|
93
118
|
@include float($omega-float);
|
94
119
|
@if $nested {
|
95
|
-
margin-right: 0;
|
96
|
-
@else {
|
97
|
-
margin-right: side-gutter();
|
98
|
-
|
120
|
+
margin-right: 0;
|
121
|
+
} @else {
|
122
|
+
margin-right: side-gutter();
|
123
|
+
}
|
124
|
+
@if $hacks {
|
99
125
|
/* ugly hacks for IE6-7 */
|
100
126
|
@include ie-omega($omega-float, true);
|
101
|
-
|
127
|
+
}
|
128
|
+
}
|
102
129
|
|
103
|
-
// Set on an element that will span it's entire context.
|
104
|
-
//
|
130
|
+
// Set +full() on an element that will span it's entire context.
|
131
|
+
// There is no need for +columns, +alpha or +omega on a +full element.
|
105
132
|
@mixin full($nested: false) {
|
106
133
|
clear: both;
|
107
|
-
@if $nested
|
134
|
+
@if not $nested {
|
108
135
|
$s: side-gutter();
|
109
136
|
margin-right: $s;
|
110
|
-
margin-left: $s;
|
137
|
+
margin-left: $s;
|
138
|
+
}
|
139
|
+
}
|
data/sass/susy/_reset.scss
CHANGED
data/sass/susy/_susy.scss
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
//** Susy **//
|
2
2
|
|
3
|
+
|
3
4
|
// Tell susy whether you are using hacks or conditional comments.
|
4
5
|
$hacks: true !default;
|
5
6
|
|
@@ -15,4 +16,6 @@ $hacks: true !default;
|
|
15
16
|
// text-align set to center by default for auto-centering layouts
|
16
17
|
// - override $align for left/right-aligned designs
|
17
18
|
body {
|
18
|
-
text-align: $align;
|
19
|
+
text-align: $align;
|
20
|
+
}
|
21
|
+
}
|
data/sass/susy/_text.scss
CHANGED
data/sass/susy/_utils.scss
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
//** Susy Utilities **//
|
2
2
|
|
3
|
+
|
3
4
|
// An extension of the Compass Core Utilities
|
4
5
|
@import "compass/utilities";
|
5
6
|
|
@@ -9,7 +10,9 @@
|
|
9
10
|
background: {
|
10
11
|
image: image-url($src);
|
11
12
|
repeat: repeat;
|
12
|
-
position: $side-gutter-width 0;
|
13
|
+
position: $side-gutter-width 0;
|
14
|
+
};
|
15
|
+
}
|
13
16
|
|
14
17
|
// Brings IE in line with inline-block display
|
15
18
|
// - Using hacks if called automatically because $hacks == true
|
@@ -20,11 +23,12 @@
|
|
20
23
|
#display: inline;
|
21
24
|
// fixes alignment against native input/button on IE6
|
22
25
|
#vertical-align: auto;
|
23
|
-
|
24
|
-
@else {
|
26
|
+
} @else {
|
25
27
|
display: inline;
|
26
28
|
// fixes alignment against native input/button on IE6
|
27
|
-
vertical-align: auto;
|
29
|
+
vertical-align: auto;
|
30
|
+
}
|
31
|
+
}
|
28
32
|
|
29
33
|
// An override for compass inline-block that lets you take advantage
|
30
34
|
// of Susys $hacks constant. if true, hacks. if false, use ie-inline-block
|
@@ -35,7 +39,9 @@
|
|
35
39
|
display: inline-block;
|
36
40
|
vertical-align: middle;
|
37
41
|
@if $hacks {
|
38
|
-
@include ie-inline-block(true);
|
42
|
+
@include ie-inline-block(true);
|
43
|
+
}
|
44
|
+
}
|
39
45
|
|
40
46
|
// An inline-block list that works in IE
|
41
47
|
// For those awkward moments when a floated horizontal list just wont cut it
|
@@ -49,7 +55,10 @@
|
|
49
55
|
white-space: no-wrap;
|
50
56
|
padding: {
|
51
57
|
left: $hpad;
|
52
|
-
right: $hpad;
|
58
|
+
right: $hpad;
|
59
|
+
};
|
60
|
+
}
|
61
|
+
}
|
53
62
|
|
54
63
|
// Hide an element from the viewport, but keep it around for accessability
|
55
64
|
@mixin hide {
|
@@ -62,12 +71,10 @@
|
|
62
71
|
@include hide;
|
63
72
|
display: block;
|
64
73
|
&:focus {
|
65
|
-
@if $t {
|
66
|
-
|
67
|
-
@if $
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
left: $l; }
|
73
|
-
z-index: 999; } }
|
74
|
+
@if $t { top: $t; }
|
75
|
+
@if $r { right: $r; }
|
76
|
+
@if $b { bottom: $b; }
|
77
|
+
@if $l { left: $l; }
|
78
|
+
z-index: 999;
|
79
|
+
}
|
80
|
+
}
|
@@ -28,13 +28,17 @@ $base-half-leader: $base-leader / 2;
|
|
28
28
|
@mixin establish-baseline($font-size: $base-font-size) {
|
29
29
|
body {
|
30
30
|
font-size: $font-size / $ie-font-ratio;
|
31
|
-
@include adjust-leading-to(1, $font-size);
|
31
|
+
@include adjust-leading-to(1, $font-size);
|
32
|
+
}
|
32
33
|
html>body {
|
33
|
-
font-size: $font-size;
|
34
|
+
font-size: $font-size;
|
35
|
+
}
|
36
|
+
}
|
34
37
|
|
35
38
|
// Show a background image that can be used to debug your alignments.
|
36
39
|
@mixin debug-vertical-alignment {
|
37
|
-
background: url(underline.png);
|
40
|
+
background: url(underline.png);
|
41
|
+
}
|
38
42
|
|
39
43
|
// Adjust a block to have a different font size and leading to maintain the rhythm.
|
40
44
|
// $lines is a number that is how many times the baseline rhythm this
|
@@ -43,57 +47,81 @@ $base-half-leader: $base-leader / 2;
|
|
43
47
|
// Use $from_size to adjust from a non-base font-size.
|
44
48
|
@mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
|
45
49
|
font-size: 1em * $to-size / $from-size;
|
46
|
-
@include adjust-leading-to($lines, $to-size);
|
50
|
+
@include adjust-leading-to($lines, $to-size);
|
51
|
+
}
|
47
52
|
|
48
53
|
@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
|
49
|
-
line-height: 1em * $lines * $base-line-height / $font-size;
|
54
|
+
line-height: 1em * $lines * $base-line-height / $font-size;
|
55
|
+
}
|
50
56
|
|
51
57
|
// Apply leading whitespace
|
52
58
|
@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
|
53
|
-
#{$property}-top: 1em * $lines * $base-line-height / $font-size;
|
59
|
+
#{$property}-top: 1em * $lines * $base-line-height / $font-size;
|
60
|
+
}
|
54
61
|
|
55
62
|
@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
|
56
|
-
@include leader($lines, $font-size, padding);
|
63
|
+
@include leader($lines, $font-size, padding);
|
64
|
+
}
|
57
65
|
|
58
66
|
@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
|
59
|
-
@include leader($lines, $font-size, margin);
|
67
|
+
@include leader($lines, $font-size, margin);
|
68
|
+
}
|
60
69
|
|
61
70
|
// Apply trailing whitespace
|
62
71
|
@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
|
63
|
-
#{$property}-bottom: 1em * $lines * $base-line-height / $font-size;
|
72
|
+
#{$property}-bottom: 1em * $lines * $base-line-height / $font-size;
|
73
|
+
}
|
64
74
|
|
65
75
|
@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
|
66
|
-
@include trailer($lines, $font-size, padding);
|
76
|
+
@include trailer($lines, $font-size, padding);
|
77
|
+
}
|
67
78
|
|
68
79
|
@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
|
69
|
-
@include trailer($lines, $font-size, margin);
|
80
|
+
@include trailer($lines, $font-size, margin);
|
81
|
+
}
|
82
|
+
|
83
|
+
// Whitespace application shortcut
|
84
|
+
// Apply top margin/padding + bottom padding/margin
|
85
|
+
@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
|
86
|
+
@include leader($leader, $font-size);
|
87
|
+
@include padding-leader($padding-leader, $font-size);
|
88
|
+
@include padding-trailer($padding-trailer, $font-size);
|
89
|
+
@include trailer($trailer, $font-size);
|
90
|
+
}
|
70
91
|
|
71
92
|
// Apply a border width to any side without destroying the vertical rhythm
|
72
93
|
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
73
94
|
border-#{$side}: {
|
74
95
|
style: $border-style;
|
75
|
-
width: 1em * $width / $font-size;
|
76
|
-
|
96
|
+
width: 1em * $width / $font-size;
|
97
|
+
};
|
98
|
+
padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width);
|
99
|
+
}
|
77
100
|
|
78
101
|
// Aplly rhythm borders equally to all sides
|
79
102
|
@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
80
103
|
border: {
|
81
104
|
style: $border-style;
|
82
105
|
width: 1em * $width / $font-size; };
|
83
|
-
padding: 1em / $font-size * ($lines * $base-line-height - $width);
|
106
|
+
padding: 1em / $font-size * ($lines * $base-line-height - $width);
|
107
|
+
}
|
84
108
|
|
85
109
|
// Apply a leading rhythm border
|
86
110
|
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
87
|
-
@include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
|
111
|
+
@include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
|
112
|
+
}
|
88
113
|
|
89
114
|
// Apply a trailing rhythm border
|
90
115
|
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
91
|
-
@include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
|
116
|
+
@include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
|
117
|
+
}
|
92
118
|
|
93
119
|
// Apply both leading and trailing rhythm borders
|
94
120
|
@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
95
121
|
@include leading-border($width, $lines, $font-size, $border-style);
|
96
|
-
@include trailing-border($width, $lines, $font-size, $border-style);
|
122
|
+
@include trailing-border($width, $lines, $font-size, $border-style);
|
123
|
+
}
|
97
124
|
|
98
125
|
@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
|
99
|
-
@include horizontal-borders($width, $lines, $font-size, $border-style);
|
126
|
+
@include horizontal-borders($width, $lines, $font-size, $border-style);
|
127
|
+
}
|
@@ -48,10 +48,12 @@ $alt: #005498;
|
|
48
48
|
// Give yourself some font stacks to work with.
|
49
49
|
|
50
50
|
@mixin sans-family {
|
51
|
-
font-family: Helvetica, Arial, sans-serif;
|
51
|
+
font-family: Helvetica, Arial, sans-serif;
|
52
|
+
}
|
52
53
|
|
53
54
|
@mixin serif-family {
|
54
|
-
font-family: Baskerville, Palatino, serif;
|
55
|
+
font-family: Baskerville, Palatino, serif;
|
56
|
+
}
|
55
57
|
|
56
58
|
// OTHER MIXINS
|
57
59
|
// Mixins set here will be available in defaults, screen, print and IE
|
@@ -11,57 +11,71 @@
|
|
11
11
|
|
12
12
|
body {
|
13
13
|
@include sans-family;
|
14
|
-
color: $base;
|
14
|
+
color: $base;
|
15
|
+
}
|
15
16
|
|
16
17
|
/* @group links */
|
17
18
|
|
18
19
|
:focus {
|
19
|
-
outline: 1px dotted $alt;
|
20
|
+
outline: 1px dotted $alt;
|
21
|
+
}
|
20
22
|
|
21
23
|
a {
|
22
24
|
&:link, &:visited {
|
23
|
-
color: $alt;
|
25
|
+
color: $alt;
|
26
|
+
}
|
24
27
|
&:focus, &:hover, &:active {
|
25
|
-
color: $alt
|
26
|
-
text-decoration: none;
|
28
|
+
color: darken($alt,5);
|
29
|
+
text-decoration: none;
|
30
|
+
}
|
31
|
+
}
|
27
32
|
|
28
33
|
/* @end */
|
29
34
|
|
30
35
|
/* @group inline tags */
|
31
36
|
|
32
|
-
cite {
|
33
|
-
font-style: italic;
|
37
|
+
cite {
|
38
|
+
font-style: italic;
|
39
|
+
}
|
34
40
|
|
35
|
-
em {
|
36
|
-
font-style: italic;
|
41
|
+
em {
|
42
|
+
font-style: italic;
|
43
|
+
}
|
37
44
|
|
38
|
-
strong {
|
39
|
-
font-weight: bold;
|
45
|
+
strong {
|
46
|
+
font-weight: bold;
|
47
|
+
}
|
40
48
|
|
41
|
-
ins {
|
42
|
-
text-decoration: underline;
|
49
|
+
ins {
|
50
|
+
text-decoration: underline;
|
51
|
+
}
|
43
52
|
|
44
|
-
del {
|
45
|
-
text-decoration: line-through;
|
53
|
+
del {
|
54
|
+
text-decoration: line-through;
|
55
|
+
}
|
46
56
|
|
47
57
|
q {
|
48
58
|
font-style: italic;
|
49
59
|
em {
|
50
|
-
font-style: normal;
|
60
|
+
font-style: normal;
|
61
|
+
}
|
62
|
+
}
|
51
63
|
|
52
64
|
/* @end */
|
53
65
|
|
54
66
|
/* @group replaced tags */
|
55
67
|
|
56
68
|
img {
|
57
|
-
vertical-align: bottom;
|
69
|
+
vertical-align: bottom;
|
70
|
+
}
|
58
71
|
|
59
72
|
/* @end */
|
60
73
|
|
61
74
|
/* @group headers */
|
62
75
|
|
63
76
|
h1, h2, h3, h4, h5, h6 {
|
64
|
-
font-weight: bold;
|
77
|
+
font-weight: bold;
|
78
|
+
}
|
65
79
|
|
66
80
|
/* @end */
|
67
81
|
|
@@ -69,30 +83,37 @@ h1, h2, h3, h4, h5, h6 {
|
|
69
83
|
|
70
84
|
p {
|
71
85
|
@include leader;
|
72
|
-
@include trailer;
|
86
|
+
@include trailer;
|
87
|
+
}
|
73
88
|
|
74
89
|
@mixin list-default($ol: false) {
|
75
90
|
@include leader;
|
76
91
|
@include trailer;
|
77
92
|
@if $ol {
|
78
|
-
list-style: decimal;
|
79
|
-
@else {
|
80
|
-
list-style: disc;
|
93
|
+
list-style: decimal;
|
94
|
+
} @else {
|
95
|
+
list-style: disc;
|
96
|
+
}
|
97
|
+
}
|
81
98
|
|
82
99
|
@mixin no-style-list {
|
83
100
|
@include no-bullets;
|
84
101
|
margin: 0;
|
85
|
-
padding: 0;
|
102
|
+
padding: 0;
|
103
|
+
}
|
86
104
|
|
87
105
|
ol {
|
88
|
-
@include list-default(ol);
|
106
|
+
@include list-default(ol);
|
107
|
+
}
|
89
108
|
|
90
109
|
ul {
|
91
|
-
@include list-default;
|
110
|
+
@include list-default;
|
111
|
+
}
|
92
112
|
|
93
113
|
blockquote {
|
94
114
|
margin: $base-rhythm-unit;
|
95
|
-
@include serif-family;
|
115
|
+
@include serif-family;
|
116
|
+
}
|
96
117
|
|
97
118
|
/* @end */
|
98
119
|
|
@@ -105,8 +126,10 @@ table {
|
|
105
126
|
border: {
|
106
127
|
width: 0;
|
107
128
|
style: solid;
|
108
|
-
color: $base;
|
109
|
-
|
129
|
+
color: $base;
|
130
|
+
};
|
131
|
+
@include horizontal-borders(1px, 0.5);
|
132
|
+
}
|
110
133
|
|
111
134
|
th {
|
112
135
|
font-weight: bold; }
|
@@ -116,22 +139,29 @@ th {
|
|
116
139
|
/* @group forms */
|
117
140
|
|
118
141
|
fieldset {
|
119
|
-
@include trailer;
|
142
|
+
@include trailer;
|
143
|
+
}
|
120
144
|
|
121
145
|
legend {
|
122
146
|
font-weight: bold;
|
123
|
-
font-variant: small-caps;
|
147
|
+
font-variant: small-caps;
|
148
|
+
}
|
124
149
|
|
125
150
|
label {
|
126
151
|
display: block;
|
127
|
-
@include leader;
|
152
|
+
@include leader;
|
153
|
+
}
|
128
154
|
|
129
155
|
legend + label {
|
130
|
-
margin-top: 0;
|
156
|
+
margin-top: 0;
|
157
|
+
}
|
131
158
|
|
132
159
|
textarea, input:not([type="radio"]) {
|
160
|
+
// box-sizing will help us control the width of inputs
|
161
|
+
// which are otherwise very hard to manage in the grid.
|
133
162
|
@include box-sizing(border-box);
|
134
|
-
width: 100%;
|
163
|
+
width: 100%;
|
164
|
+
}
|
135
165
|
|
136
166
|
/* @end */
|
137
167
|
|
@@ -3,3 +3,20 @@ stylesheet 'print.scss', :media => "print"
|
|
3
3
|
stylesheet 'ie.scss', :media => "screen, projection"
|
4
4
|
stylesheet '_base.scss'
|
5
5
|
stylesheet '_defaults.scss'
|
6
|
+
|
7
|
+
description "Susy: a flexible static/fluid/elastic grid system native to compass."
|
8
|
+
|
9
|
+
help %Q{
|
10
|
+
Please see the Susy website for all documentation and tutorials:
|
11
|
+
|
12
|
+
http://www.oddbird.net/susy
|
13
|
+
}
|
14
|
+
|
15
|
+
welcome_message %Q{
|
16
|
+
Please see the Susy website for all documentation and tutorials:
|
17
|
+
|
18
|
+
http://www.oddbird.net/susy
|
19
|
+
|
20
|
+
To get started, set up your grid in the grid partial by following the inline instructions.
|
21
|
+
}
|
22
|
+
|
@@ -6,15 +6,23 @@
|
|
6
6
|
|
7
7
|
@mixin print {
|
8
8
|
nav {
|
9
|
-
|
9
|
+
// no need to navigate on paper
|
10
|
+
display: none;
|
11
|
+
}
|
10
12
|
* {
|
11
|
-
|
13
|
+
// floated elements disappear when they overflow the page
|
14
|
+
float: none !important;
|
15
|
+
}
|
12
16
|
body {
|
13
17
|
@include serif-family;
|
14
18
|
font-size: 12pt;
|
15
19
|
background: white;
|
16
|
-
color: black;
|
20
|
+
color: black;
|
21
|
+
}
|
17
22
|
a:link:after, a:visited:after {
|
18
|
-
|
23
|
+
// print target URLs next to their links
|
24
|
+
content: " (" attr(href) ") ";
|
25
|
+
}
|
26
|
+
}
|
19
27
|
|
20
28
|
@include print;
|
metadata
CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
|
|
6
6
|
- 0
|
7
7
|
- 7
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.7.0.
|
9
|
+
- pre8
|
10
|
+
version: 0.7.0.pre8
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Eric Meyer
|
@@ -15,7 +15,7 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2010-04-
|
18
|
+
date: 2010-04-20 00:00:00 -06:00
|
19
19
|
default_executable:
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|