compass-susy-plugin 0.7.0.pre6 → 0.7.0.pre7
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/Manifest +11 -11
- data/README.mkdn +121 -99
- data/Rakefile +1 -1
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +7 -7
- data/sass/susy/_grid.scss +110 -0
- data/sass/susy/_reset.scss +7 -0
- data/sass/susy/_susy.scss +18 -0
- data/sass/susy/_text.scss +5 -0
- data/sass/susy/_utils.scss +73 -0
- data/sass/susy/_vertical_rhythm.scss +99 -0
- data/templates/project/{_base.sass → _base.scss} +18 -19
- data/templates/project/_defaults.scss +138 -0
- data/templates/project/ie.scss +7 -0
- data/templates/project/manifest.rb +5 -5
- data/templates/project/print.scss +20 -0
- data/templates/project/screen.scss +36 -0
- metadata +16 -16
- data/sass/susy/_grid.sass +0 -126
- data/sass/susy/_reset.sass +0 -6
- data/sass/susy/_susy.sass +0 -22
- data/sass/susy/_text.sass +0 -6
- data/sass/susy/_utils.sass +0 -80
- data/sass/susy/_vertical_rhythm.sass +0 -101
- data/templates/project/_defaults.sass +0 -146
- data/templates/project/ie.sass +0 -9
- data/templates/project/print.sass +0 -25
- data/templates/project/screen.sass +0 -48
@@ -0,0 +1,36 @@
|
|
1
|
+
/* Welcome to Susy. Use this file to define screen styles.
|
2
|
+
* Import this file using the following HTML or equivalent:
|
3
|
+
* <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
|
4
|
+
|
5
|
+
@import "defaults";
|
6
|
+
|
7
|
+
/* @group STRUCTURE */
|
8
|
+
|
9
|
+
@include susy;
|
10
|
+
|
11
|
+
// change '#page' to match your HTML container element(s)
|
12
|
+
#page {
|
13
|
+
@include container; }
|
14
|
+
|
15
|
+
/* @end */
|
16
|
+
|
17
|
+
/* @group COMPONENTS by type */
|
18
|
+
|
19
|
+
/* @end */
|
20
|
+
|
21
|
+
/* @group OVERRIDES by content */
|
22
|
+
|
23
|
+
/* @end */
|
24
|
+
|
25
|
+
/* @group OVERRIDES by page */
|
26
|
+
|
27
|
+
/* @end */
|
28
|
+
|
29
|
+
/* @group DEBUG */
|
30
|
+
|
31
|
+
// Uncomment, adjust and use for debugging
|
32
|
+
|
33
|
+
// #page {
|
34
|
+
// @include show-grid("your-grid-image.png"); }
|
35
|
+
|
36
|
+
/* @end */
|
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
|
+
- pre7
|
10
|
+
version: 0.7.0.pre7
|
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-
|
18
|
+
date: 2010-04-13 00:00:00 -06:00
|
19
19
|
default_executable:
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|
@@ -29,8 +29,8 @@ dependencies:
|
|
29
29
|
- 0
|
30
30
|
- 10
|
31
31
|
- 0
|
32
|
-
-
|
33
|
-
version: 0.10.0.
|
32
|
+
- rc2
|
33
|
+
version: 0.10.0.rc2
|
34
34
|
type: :runtime
|
35
35
|
version_requirements: *id001
|
36
36
|
description: 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.
|
@@ -55,18 +55,18 @@ files:
|
|
55
55
|
- lib/susy.rb
|
56
56
|
- lib/susy/compass_plugin.rb
|
57
57
|
- lib/susy/sass_extensions.rb
|
58
|
-
- sass/susy/_grid.
|
59
|
-
- sass/susy/_reset.
|
60
|
-
- sass/susy/_susy.
|
61
|
-
- sass/susy/_text.
|
62
|
-
- sass/susy/_utils.
|
63
|
-
- sass/susy/_vertical_rhythm.
|
64
|
-
- templates/project/_base.
|
65
|
-
- templates/project/_defaults.
|
66
|
-
- templates/project/ie.
|
58
|
+
- sass/susy/_grid.scss
|
59
|
+
- sass/susy/_reset.scss
|
60
|
+
- sass/susy/_susy.scss
|
61
|
+
- sass/susy/_text.scss
|
62
|
+
- sass/susy/_utils.scss
|
63
|
+
- sass/susy/_vertical_rhythm.scss
|
64
|
+
- templates/project/_base.scss
|
65
|
+
- templates/project/_defaults.scss
|
66
|
+
- templates/project/ie.scss
|
67
67
|
- templates/project/manifest.rb
|
68
|
-
- templates/project/print.
|
69
|
-
- templates/project/screen.
|
68
|
+
- templates/project/print.scss
|
69
|
+
- templates/project/screen.scss
|
70
70
|
has_rdoc: true
|
71
71
|
homepage: http://github.com/ericam/compass-susy-plugin
|
72
72
|
licenses: []
|
data/sass/susy/_grid.sass
DELETED
@@ -1,126 +0,0 @@
|
|
1
|
-
//** The Susy Grid **//
|
2
|
-
// Updated 11.20.2009 by Eric A. Meyer
|
3
|
-
|
4
|
-
|
5
|
-
// Your basic settings for the grid.
|
6
|
-
// Override these in base.sass to customize your site.
|
7
|
-
!total_cols ||= 12
|
8
|
-
!col_width ||= 4em
|
9
|
-
!gutter_width ||= 1em
|
10
|
-
!side_gutter_width ||= !gutter_width
|
11
|
-
|
12
|
-
|
13
|
-
// Susy will set your outer shell based on the variables above.
|
14
|
-
!container_width = container(!total_cols, !col_width, !gutter_width, !side_gutter_width)
|
15
|
-
|
16
|
-
|
17
|
-
// Set on the outer grid-containing element(s).
|
18
|
-
=container(!align = "left")
|
19
|
-
// clear all floated columns
|
20
|
-
+clearfix
|
21
|
-
// align the text back to the left (override for other alignments)
|
22
|
-
text-align= !align
|
23
|
-
// use auto horizontal margins to center your page in the body
|
24
|
-
margin:
|
25
|
-
left: auto
|
26
|
-
right: auto
|
27
|
-
// set the page width based on column settings
|
28
|
-
width= !container_width
|
29
|
-
// never exceed 100% of the browser window (no side-scrolling)
|
30
|
-
max-width: 100%
|
31
|
-
|
32
|
-
|
33
|
-
// Set on any column element, even nested ones.
|
34
|
-
// The first agument [required] is the number of columns to span.
|
35
|
-
// The second argument is the context (columns spanned by parent).
|
36
|
-
// - Context is required on any nested elements.
|
37
|
-
// - Context MUST NOT be declared on a top-level element.
|
38
|
-
// By default a grid-column is floated left with a right gutter.
|
39
|
-
// - Override those with +float("right"), +alpha or +omega
|
40
|
-
=columns(!n, !context = false)
|
41
|
-
// the column is floated left
|
42
|
-
+float("left")
|
43
|
-
// the width of the column is set as a percentage of the context
|
44
|
-
width= columns(!n, !context)
|
45
|
-
// the right gutter is added as a percentage of the context
|
46
|
-
margin-right= gutter(!context)
|
47
|
-
|
48
|
-
|
49
|
-
// Set on any element to add empty colums as padding before or after.
|
50
|
-
=prefix(!n, !context = false)
|
51
|
-
padding-left= columns(!n, !context) + gutter(!context)
|
52
|
-
|
53
|
-
=suffix(!n, !context = false)
|
54
|
-
padding-right= columns(!n, !context) + gutter(!context)
|
55
|
-
|
56
|
-
|
57
|
-
// Set as a shortcut for both prefix and suffix.
|
58
|
-
=pad(!p = 0, !s = 0, !c = false)
|
59
|
-
@if !p != 0
|
60
|
-
+prefix(!p,!c)
|
61
|
-
@if !s != 0
|
62
|
-
+suffix(!s,!c)
|
63
|
-
|
64
|
-
|
65
|
-
// Set on any element spanning the first column in non-nested context
|
66
|
-
// to take side-gutters into account. Recommended that you pass the
|
67
|
-
// actual nested contexts (when nested) rather than a true/false argument
|
68
|
-
// for the sake of consistency. Effect is the same.
|
69
|
-
=alpha(!nested = false)
|
70
|
-
@if !nested == false
|
71
|
-
margin-left= side_gutter()
|
72
|
-
|
73
|
-
|
74
|
-
// When global constant !hacks == true:
|
75
|
-
// - this will be called automatically with hacks
|
76
|
-
// When global constant !hacks == false:
|
77
|
-
// - you can call it yourself in ie.sass without the hacks
|
78
|
-
=ie-omega(!nested = false, !dir = "right", !hack = false)
|
79
|
-
!s = side_gutter()
|
80
|
-
@if !dir == "right"
|
81
|
-
@if !hack
|
82
|
-
#margin-left: -1%
|
83
|
-
@else
|
84
|
-
margin-left: -1%
|
85
|
-
@else
|
86
|
-
@if !nested
|
87
|
-
@if !hack
|
88
|
-
#margin-right: -1%
|
89
|
-
@else
|
90
|
-
margin-right: -1%
|
91
|
-
@else
|
92
|
-
@if !hack
|
93
|
-
#margin-right= !s - 1%
|
94
|
-
@else
|
95
|
-
margin-right= !s - 1%
|
96
|
-
|
97
|
-
|
98
|
-
// Sets the direction that +omega elements are floated
|
99
|
-
// - Override !omega_float globally or set +float locally to change
|
100
|
-
!omega_float ||= "right"
|
101
|
-
|
102
|
-
|
103
|
-
// Set omega on the last element of a row to take side-gutters
|
104
|
-
// and the page edge into account. Set the !nested argument for nested columns.
|
105
|
-
// It is recommended that you pass the actual nested context when nested,
|
106
|
-
// rather than a true/false argument, for the sake of consistency. Effect is the same.
|
107
|
-
=omega(!nested = false)
|
108
|
-
+float(!omega_float)
|
109
|
-
@if !nested
|
110
|
-
margin-right: 0
|
111
|
-
@else
|
112
|
-
margin-right= side_gutter()
|
113
|
-
@if !hacks
|
114
|
-
/* ugly hacks for IE6-7 */
|
115
|
-
+ie-omega(!nested, !omega_float, true)
|
116
|
-
/* end ugly hacks */
|
117
|
-
|
118
|
-
|
119
|
-
// Set on an element that will span it's entire context.
|
120
|
-
// - no need for +columns, +alpha or +omega on a +full element.
|
121
|
-
=full(!nested = false)
|
122
|
-
clear: both
|
123
|
-
@if !nested == false
|
124
|
-
!s = side_gutter()
|
125
|
-
margin-right= !s
|
126
|
-
margin-left= !s
|
data/sass/susy/_reset.sass
DELETED
data/sass/susy/_susy.sass
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
//** Susy **//
|
2
|
-
// Updated 01.19.2010 by Eric A. Meyer
|
3
|
-
|
4
|
-
|
5
|
-
// Tell susy whether you are using hacks or conditional comments.
|
6
|
-
!hacks ||= true
|
7
|
-
|
8
|
-
|
9
|
-
// Import all the Important Stuff.
|
10
|
-
@import compass/css3.sass
|
11
|
-
@import utils.sass
|
12
|
-
@import text.sass
|
13
|
-
@import grid.sass
|
14
|
-
|
15
|
-
|
16
|
-
// Set Susy on your BODY element to get things started.
|
17
|
-
=susy(!align = "center")
|
18
|
-
+establish-baseline
|
19
|
-
// text-align set to center by default for auto-centering layouts
|
20
|
-
// - override !align for left/right-aligned designs
|
21
|
-
body
|
22
|
-
text-align= !align
|
data/sass/susy/_text.sass
DELETED
data/sass/susy/_utils.sass
DELETED
@@ -1,80 +0,0 @@
|
|
1
|
-
//** Susy Utilities **//
|
2
|
-
// Updated 11.20.2009 by Eric A. Meyer
|
3
|
-
|
4
|
-
|
5
|
-
// An extension of the Compass Core Utilities
|
6
|
-
@import compass/utilities.sass
|
7
|
-
|
8
|
-
|
9
|
-
// Apply to you container element(s) to show a grid image.
|
10
|
-
// - You need to supply the image. Susy can't do everything.
|
11
|
-
=show-grid(!src)
|
12
|
-
background:
|
13
|
-
image= image_url(!src)
|
14
|
-
repeat: repeat
|
15
|
-
position= !side_gutter_width 0
|
16
|
-
|
17
|
-
// Brings IE in line with inline-block display
|
18
|
-
// - Using hacks if called automatically because !hacks == true
|
19
|
-
// - Or not, if you call it from ie.sass because !hacks == false
|
20
|
-
=ie-inline-block(!hack = false)
|
21
|
-
@if !hack
|
22
|
-
/* ugly hacks for IE6-7 */
|
23
|
-
#display: inline
|
24
|
-
// fixes alignment against native input/button on IE6
|
25
|
-
#vertical-align: auto
|
26
|
-
/* end ugly hacks */
|
27
|
-
@else
|
28
|
-
display: inline
|
29
|
-
// fixes alignment against native input/button on IE6
|
30
|
-
vertical-align: auto
|
31
|
-
|
32
|
-
|
33
|
-
// An override for compass inline-block that lets you take advantage
|
34
|
-
// of Susys !hacks constant. if true, hacks. if false, use ie-inline-block
|
35
|
-
// to help ie along in your ie.sass
|
36
|
-
=inline-block
|
37
|
-
display: -moz-inline-box
|
38
|
-
-moz-box-orient: vertical
|
39
|
-
display: inline-block
|
40
|
-
vertical-align: middle
|
41
|
-
@if !hacks
|
42
|
-
+ie-inline-block(true)
|
43
|
-
|
44
|
-
|
45
|
-
// An inline-block list that works in IE
|
46
|
-
// For those awkward moments when a floated horizontal list just wont cut it
|
47
|
-
// NOTE: If global !hacks == false:
|
48
|
-
// - you'll need to fix list items in ie.sass with +ie-inline-block
|
49
|
-
=inline-block-list(!hpad = 0)
|
50
|
-
+horizontal-list-container
|
51
|
-
li
|
52
|
-
+no-bullet
|
53
|
-
+inline-block
|
54
|
-
white-space: no-wrap
|
55
|
-
padding:
|
56
|
-
left= !hpad
|
57
|
-
right= !hpad
|
58
|
-
|
59
|
-
|
60
|
-
// Hide an element from the viewport, but keep it around for accessability
|
61
|
-
=hide
|
62
|
-
position: absolute
|
63
|
-
top: -9999em
|
64
|
-
|
65
|
-
|
66
|
-
// Apply to skip-to-content accessibility links that will appear on focus.
|
67
|
-
// - Set the location arguments if you care where it appears.
|
68
|
-
=skip-link(!t = 0, !r = false, !b = false, !l = false)
|
69
|
-
+hide
|
70
|
-
display: block
|
71
|
-
&:focus
|
72
|
-
@if !t
|
73
|
-
top= !t
|
74
|
-
@if !r
|
75
|
-
right= !r
|
76
|
-
@if !b
|
77
|
-
bottom= !b
|
78
|
-
@if !l
|
79
|
-
left= !l
|
80
|
-
z-index: 999
|
@@ -1,101 +0,0 @@
|
|
1
|
-
//** Vertical Rhythm **//
|
2
|
-
// By Chris Eppstein and Eric Meyer, living here on a temporary basis
|
3
|
-
|
4
|
-
|
5
|
-
// set the default border style for rhythm borders
|
6
|
-
!default_rhythm_border_style = "solid"
|
7
|
-
|
8
|
-
// The IE font ratio is a fact of life. Deal with it.
|
9
|
-
!ie_font_ratio = 16px / 100%
|
10
|
-
|
11
|
-
// The base line height is the basic unit of line hightness.
|
12
|
-
!base_line_height ||= 18px
|
13
|
-
|
14
|
-
// The base font size
|
15
|
-
!base_font_size ||= 12px
|
16
|
-
|
17
|
-
// The basic unit of font rhythm
|
18
|
-
!base_rhythm_unit= !base_line_height / !base_font_size * 1em
|
19
|
-
|
20
|
-
// The leader is the amount of whitespace in a line.
|
21
|
-
// It might be useful in your calculations
|
22
|
-
!base_leader = (!base_line_height - !base_font_size) * 1em / !base_font_size
|
23
|
-
|
24
|
-
// The half-leader is the amount of whitespace above and below a line.
|
25
|
-
// It might be useful in your calculations
|
26
|
-
!base_half_leader = !base_leader / 2
|
27
|
-
|
28
|
-
// Establishes a font baseline for the given font-size in pixels
|
29
|
-
=establish-baseline(!font_size = !base_font_size)
|
30
|
-
body
|
31
|
-
font-size= !font_size / !ie_font_ratio
|
32
|
-
+adjust-leading-to(1, !font_size)
|
33
|
-
html>body
|
34
|
-
font-size= !font_size
|
35
|
-
|
36
|
-
// Show a background image that can be used to debug your alignments.
|
37
|
-
=debug-vertical-alignment
|
38
|
-
background: url(underline.png)
|
39
|
-
|
40
|
-
// Adjust a block to have a different font size and leading to maintain the rhythm.
|
41
|
-
// !lines is a number that is how many times the baseline rhythm this
|
42
|
-
// font size should use up. Does not have to be an integer, but it defaults
|
43
|
-
// to the smallest integer that is large enough to fit the font.
|
44
|
-
// Use !from_size to adjust from a non-base font-size.
|
45
|
-
=adjust-font-size-to(!to_size, !lines = ceil(!to_size / !base_line_height), !from_size = !base_font_size)
|
46
|
-
font-size= 1em * !to_size / !from_size
|
47
|
-
+adjust-leading-to(!lines, !to_size)
|
48
|
-
|
49
|
-
=adjust-leading-to(!lines, !font_size = !base_font_size)
|
50
|
-
line-height= 1em * !lines * !base_line_height / !font_size
|
51
|
-
|
52
|
-
// Apply leading whitespace
|
53
|
-
=leader(!lines = 1, !font_size = !base_font_size, !property = "margin")
|
54
|
-
#{!property}-top= 1em * !lines * !base_line_height / !font_size
|
55
|
-
|
56
|
-
=padding-leader(!lines = 1, !font_size = !base_font_size)
|
57
|
-
+leader(!lines, !font_size, "padding")
|
58
|
-
|
59
|
-
=margin-leader(!lines = 1, !font_size = !base_font_size)
|
60
|
-
+leader(!lines, !font_size, "margin")
|
61
|
-
|
62
|
-
// Apply trailing whitespace
|
63
|
-
=trailer(!lines = 1, !font_size = !base_font_size, !property = "margin")
|
64
|
-
#{!property}-bottom= 1em * !lines * !base_line_height / !font_size
|
65
|
-
|
66
|
-
=padding-trailer(!lines = 1, !font_size = !base_font_size)
|
67
|
-
+trailer(!lines, !font_size, "padding")
|
68
|
-
|
69
|
-
=margin-trailer(!lines = 1, !font_size = !base_font_size)
|
70
|
-
+trailer(!lines, !font_size, "margin")
|
71
|
-
|
72
|
-
// Apply a border width to any side without destroying the vertical rhythm
|
73
|
-
=apply-side-rhythm-border(!side, !width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
74
|
-
border-#{!side}:
|
75
|
-
style= !border_style
|
76
|
-
width= 1em * !width / !font_size
|
77
|
-
padding-#{!side}= (1em / !font_size) * ((!lines * !base_line_height) - !width)
|
78
|
-
|
79
|
-
// Aplly rhythm borders equally to all sides
|
80
|
-
=rhythm-borders(!width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
81
|
-
border:
|
82
|
-
style= !border_style
|
83
|
-
width= 1em * !width / !font_size
|
84
|
-
padding= (1em / !font_size) * ((!lines * !base_line_height) - !width)
|
85
|
-
|
86
|
-
// Apply a leading rhythm border
|
87
|
-
=leading-border(!width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
88
|
-
+apply-side-rhythm-border("top", !width, !lines, !font_size, !border_style)
|
89
|
-
|
90
|
-
// Apply a trailing rhythm border
|
91
|
-
=trailing-border(!width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
92
|
-
+apply-side-rhythm-border("bottom", !width, !lines, !font_size, !border_style)
|
93
|
-
|
94
|
-
// Apply both leading and trailing rhythm borders
|
95
|
-
=horizontal-borders(!width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
96
|
-
+leading-border(!width, !lines, !font_size, !border_style)
|
97
|
-
+trailing-border(!width, !lines, !font_size, !border_style)
|
98
|
-
|
99
|
-
=h-borders(!width = 1px, !lines = 1, !font_size = !base_font_size, !border_style = !default_rhythm_border_style)
|
100
|
-
+horizontal-borders(!width, !lines, !font_size, !border_style)
|
101
|
-
|