compass-susy-plugin 0.6.2
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE.txt +28 -0
- data/Manifest +17 -0
- data/README.mkdn +233 -0
- data/Rakefile +22 -0
- data/VERSION +1 -0
- data/compass-susy-plugin.gemspec +36 -0
- data/docs/tutorial/figures/susy_element.png +0 -0
- data/docs/tutorial/figures/susy_grid.png +0 -0
- data/docs/tutorial/index.mkdn +303 -0
- data/lib/susy.rb +2 -0
- data/lib/susy/compass_plugin.rb +5 -0
- data/lib/susy/sass_extensions.rb +79 -0
- data/sass/susy/_grid.sass +115 -0
- data/sass/susy/_susy.sass +18 -0
- data/sass/susy/_text.sass +21 -0
- data/sass/susy/_utils.sass +211 -0
- data/templates/project/_base.sass +162 -0
- data/templates/project/ie.sass +10 -0
- data/templates/project/manifest.rb +4 -0
- data/templates/project/print.sass +12 -0
- data/templates/project/screen.sass +51 -0
- metadata +102 -0
data/LICENSE.txt
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
Copyright (c) 2009, Eric Meyer
|
2
|
+
All rights reserved.
|
3
|
+
|
4
|
+
Redistribution and use in source and binary forms, with or without
|
5
|
+
modification, are permitted provided that the following conditions are
|
6
|
+
met:
|
7
|
+
|
8
|
+
* Redistributions of source code must retain the above copyright
|
9
|
+
notice, this list of conditions and the following disclaimer.
|
10
|
+
* Redistributions in binary form must reproduce the above
|
11
|
+
copyright notice, this list of conditions and the following
|
12
|
+
disclaimer in the documentation and/or other materials provided
|
13
|
+
with the distribution.
|
14
|
+
* Neither the name of the author nor the names of other
|
15
|
+
contributors may be used to endorse or promote products derived
|
16
|
+
from this software without specific prior written permission.
|
17
|
+
|
18
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
19
|
+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
20
|
+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
21
|
+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
22
|
+
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
23
|
+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
24
|
+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
25
|
+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
26
|
+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
27
|
+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
28
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
data/Manifest
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
lib/susy/compass_plugin.rb
|
2
|
+
lib/susy/sass_extensions.rb
|
3
|
+
lib/susy.rb
|
4
|
+
Manifest
|
5
|
+
Rakefile
|
6
|
+
README.mkdn
|
7
|
+
sass/susy/_grid.sass
|
8
|
+
sass/susy/_utils.sass
|
9
|
+
sass/susy/_text.sass
|
10
|
+
sass/susy/_susy.sass
|
11
|
+
templates/project/print.sass
|
12
|
+
templates/project/screen.sass
|
13
|
+
templates/project/ie.sass
|
14
|
+
templates/project/_base.sass
|
15
|
+
templates/project/manifest.rb
|
16
|
+
VERSION
|
17
|
+
LICENSE.txt
|
data/README.mkdn
ADDED
@@ -0,0 +1,233 @@
|
|
1
|
+
Susy - Compass Plugin
|
2
|
+
=====================
|
3
|
+
|
4
|
+
Susy is a semantic CSS framework creator entirely native to
|
5
|
+
[Compass](http://compass-style.org/).
|
6
|
+
Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that
|
7
|
+
will never activate that bloody side-scroll bar. Susy sets your width on the
|
8
|
+
outer element (`container`), adds a `max-width` of `100%` and builds the rest
|
9
|
+
of your grid in percentages. The philosophy and technique are based on
|
10
|
+
[Natalie Downe](http://natbat.net/)'s "[CSS
|
11
|
+
Systems](http://natbat.net/2008/Sep/28/css-systems/)" - which introduces
|
12
|
+
difficult math in the service of beautiful structure. With the power of
|
13
|
+
Compass/Sass, Susy will do that math for you.
|
14
|
+
|
15
|
+
Using simple mixins, columns can be created, suffixed, prefixed, and nested
|
16
|
+
easily - and always in flexible percentages.
|
17
|
+
|
18
|
+
Install
|
19
|
+
=======
|
20
|
+
|
21
|
+
sudo gem sources --add http://gems.github.com/
|
22
|
+
sudo gem install chriseppstein-compass
|
23
|
+
sudo gem install ericam-compass-susy-plugin
|
24
|
+
|
25
|
+
Create a Susy-based Compass Project
|
26
|
+
===================================
|
27
|
+
|
28
|
+
compass -r susy -f susy <project name>
|
29
|
+
|
30
|
+
Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly.
|
31
|
+
A reset is added automatically.
|
32
|
+
|
33
|
+
Philosophy and Goals
|
34
|
+
--------------------
|
35
|
+
|
36
|
+
The method comes from [Natalie Downe](http://natbat.net/)'s "[CSS
|
37
|
+
Systems](http://natbat.net/2008/Sep/28/css-systems/)", but I'll cover it here.
|
38
|
+
|
39
|
+
It is important for accessibility and usability that we are:
|
40
|
+
|
41
|
+
* Responsive to text sizing: In order for our site to be accessible we need to
|
42
|
+
allow different font-sizes to be set by the client. In order to maintain
|
43
|
+
design integrity of proportions and line-lengths, the grid needs to respond
|
44
|
+
to those sizes.
|
45
|
+
|
46
|
+
* Responsive to window sizing: In order to maintain usability across
|
47
|
+
platforms/monitors, our grid needs to respond to the size of the viewport.
|
48
|
+
This is mainly an issue as the viewport shrinks and we are given a
|
49
|
+
side-scroll bar. No one likes that. On the large end our design integrity
|
50
|
+
and line lengths are more important than taking up all the possible space.
|
51
|
+
|
52
|
+
In order to achieve both we need to combine the best of the elastic (em-based)
|
53
|
+
and fluid (%-based) models. The solution is simple: First we build a fluid
|
54
|
+
grid, then place it inside an elastic shell, and apply a maximum width to that
|
55
|
+
shell so that it never exceeds the size of the viewport. It's simple in
|
56
|
+
theory, but daunting in practice, as you constantly have to adjust your math
|
57
|
+
based on the context.
|
58
|
+
|
59
|
+
But Susy harnesses the power of Compass and Sass to do all the math for you.
|
60
|
+
|
61
|
+
Grid Basics
|
62
|
+
===========
|
63
|
+
|
64
|
+
* Set up your default grid values (total columns, column width, gutter
|
65
|
+
width, side gutter width), your base font size, and other style defaults
|
66
|
+
in `_base.sass`.
|
67
|
+
|
68
|
+
* Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
|
69
|
+
element and the `+container` mixin to the element that contains the page
|
70
|
+
grid.
|
71
|
+
|
72
|
+
* Use the `+columns` mixin to declare the width in columns of an element,
|
73
|
+
or `+full` for any element spanning the full width of its context.
|
74
|
+
|
75
|
+
* Use `+alpha` and `+omega` to declare elements which include the first or
|
76
|
+
last column within their parent element (`+full` to declare both `+alpha`
|
77
|
+
and `+omega`). Note: `+alpha` is actually only needed in the very top level,
|
78
|
+
and does nothing in nested contexts. Neither is needed on a `+full` element.
|
79
|
+
|
80
|
+
* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
|
81
|
+
left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
|
82
|
+
once.
|
83
|
+
|
84
|
+
* In nested contexts, all of these mixins take an extra final argument, the
|
85
|
+
width in columns of the parent (nesting) element.
|
86
|
+
|
87
|
+
That's it for the basics! Here's a sample Susy grid layout:
|
88
|
+
|
89
|
+
body
|
90
|
+
+susy
|
91
|
+
|
92
|
+
#page
|
93
|
+
+container
|
94
|
+
|
95
|
+
#brand
|
96
|
+
+full
|
97
|
+
+pad(1,1)
|
98
|
+
h1
|
99
|
+
+full(8)
|
100
|
+
+pad(1,2,8)
|
101
|
+
|
102
|
+
#nav
|
103
|
+
+columns(2)
|
104
|
+
+alpha
|
105
|
+
|
106
|
+
#content
|
107
|
+
+columns(8)
|
108
|
+
+omega
|
109
|
+
#description
|
110
|
+
+columns(5,8)
|
111
|
+
#credit
|
112
|
+
+columns(3,8)
|
113
|
+
+omega(8)
|
114
|
+
|
115
|
+
Tutorial
|
116
|
+
========
|
117
|
+
|
118
|
+
For more details, read [the tutorial](http://www.oddbird.net/susy/tutorial/).
|
119
|
+
It's also included with Susy in the docs/ folder.
|
120
|
+
|
121
|
+
Extra Utility Mixins
|
122
|
+
=====================
|
123
|
+
|
124
|
+
Extra utilities are included in Susy's `utils.sass` file, with additional list
|
125
|
+
options, experimental (CSS3/proprietary) CSS, and more.
|
126
|
+
|
127
|
+
* `+show-grid(!src)` will remove all your backgrounds and repeat the specified
|
128
|
+
grid image on an element. Good for testing your baseline grid.
|
129
|
+
|
130
|
+
* `+inline-block-list([!horizontalpadding])` for making lists inline-block
|
131
|
+
when floating just won't do the trick.
|
132
|
+
|
133
|
+
* `+hide` for hiding content from visual browsers while keeping accessability
|
134
|
+
intact.
|
135
|
+
|
136
|
+
* `+skip-link([!top = 0, !right, !bottom, !left])` hide a link, and then show
|
137
|
+
it again on focus. the TRBL settings allow you to place it absolutely on
|
138
|
+
display. Default will be top left of the positioning context.
|
139
|
+
|
140
|
+
And then the fun stuff:
|
141
|
+
|
142
|
+
* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of
|
143
|
+
0 to 1).
|
144
|
+
|
145
|
+
* `+border-radius(!radius)` (`+border-bottom-left-radius` etc. all work) for
|
146
|
+
rounded corners in supporting browsers.
|
147
|
+
|
148
|
+
* `+box-sizing(!model)` for setting the box sizing model in supporting
|
149
|
+
browsers.
|
150
|
+
|
151
|
+
* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
|
152
|
+
box-shadow in webkit, mozilla and CSS3.
|
153
|
+
|
154
|
+
* `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
|
155
|
+
and `+column-rule(!width, !style, !color)` for CSS columns in webkit,
|
156
|
+
mozilla and CSS3.
|
157
|
+
|
158
|
+
Advanced Options
|
159
|
+
================
|
160
|
+
|
161
|
+
Susy is built for flexibility, so that you always write the code you want to
|
162
|
+
write. While everything should 'just work' out of the box, there are plenty of
|
163
|
+
advanced options hidden inside. Here's a few:
|
164
|
+
|
165
|
+
* `!hacks` is a boolean constant that you can set in your base.sass file to
|
166
|
+
choose between using targeted hacks for IE (a variation of the star hack in
|
167
|
+
most cases) in your screen.css, or using a conditional-comment targeted
|
168
|
+
ie.css. All the needed mixins are available for either setting. `!hacks` is
|
169
|
+
true by default so there is no extra work maintaining multiple files unless
|
170
|
+
you want to.
|
171
|
+
|
172
|
+
Example 1:
|
173
|
+
|
174
|
+
!hacks = true
|
175
|
+
|
176
|
+
#nav
|
177
|
+
+inline-block-list
|
178
|
+
|
179
|
+
Example 2:
|
180
|
+
|
181
|
+
!hacks = false
|
182
|
+
|
183
|
+
(in screen.sass)
|
184
|
+
#nav
|
185
|
+
+inline-block-list
|
186
|
+
|
187
|
+
(in ie.sass)
|
188
|
+
#nav li
|
189
|
+
+ie-inline-block
|
190
|
+
|
191
|
+
It requires more maintenance on your part, but the result is a
|
192
|
+
hack-free output.
|
193
|
+
|
194
|
+
The susy mixins that use either hacks or targeted mixins are
|
195
|
+
`+omega` (`+ie-omega([!right-floated = false])`), `+inline-block`
|
196
|
+
(`+ie-inline-block`), and `+inline-block-list` which sets
|
197
|
+
`+inline-block` on the list items.
|
198
|
+
|
199
|
+
The ie-specific mixins only add the needed ie-specific adjustments,
|
200
|
+
so they need to be used in addition to their counterparts, not on
|
201
|
+
their own.
|
202
|
+
|
203
|
+
* `gutter(!context)` is a function that you can call at any time to return the
|
204
|
+
size of a gutter in your given context using percentages. The number is
|
205
|
+
returned without units so that you can perform math on it. In order to use
|
206
|
+
it, you will have to add "%" to it.
|
207
|
+
|
208
|
+
Example:
|
209
|
+
|
210
|
+
#nav
|
211
|
+
:padding-right= gutter(5) + "%"
|
212
|
+
|
213
|
+
* `columns(!number, !context)` returns the span of `!number` columns in
|
214
|
+
`!context` as a percentage (again without the units declared). This span
|
215
|
+
includes any gutters between the columns spanned.
|
216
|
+
|
217
|
+
Example:
|
218
|
+
|
219
|
+
#nav
|
220
|
+
:padding-left= columns(3,5) + "%"
|
221
|
+
|
222
|
+
* `side_gutter()` is also available and takes no arguments since it is always
|
223
|
+
used at the top nesting level.
|
224
|
+
|
225
|
+
* `px2em()` takes one numeric argument representing the number of pixels you
|
226
|
+
want to mimic. The return is an em value (with no units declared) that
|
227
|
+
approximates that number of pixels. Useful for keeping your entire design
|
228
|
+
fluid.
|
229
|
+
|
230
|
+
Example:
|
231
|
+
|
232
|
+
#nav
|
233
|
+
:border-bottom= px2em(2) + "em"
|
data/Rakefile
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
require 'fileutils'
|
2
|
+
require 'sass'
|
3
|
+
require 'lib/susy/sass_extensions'
|
4
|
+
|
5
|
+
begin
|
6
|
+
require 'echoe'
|
7
|
+
|
8
|
+
Echoe.new('compass-susy-plugin', open('VERSION').read) do |p|
|
9
|
+
# p.rubyforge_name = 'susy'
|
10
|
+
p.summary = "A Compass grid system plugin."
|
11
|
+
p.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."
|
12
|
+
p.url = "http://github.com/ericam/compass-susy-plugin"
|
13
|
+
p.author = ['Eric Meyer']
|
14
|
+
p.email = "eric@oddbird.net"
|
15
|
+
p.dependencies = ["chriseppstein-compass"]
|
16
|
+
p.has_rdoc = false
|
17
|
+
end
|
18
|
+
|
19
|
+
rescue LoadError => boom
|
20
|
+
puts "You are missing a dependency required for meta-operations on this gem."
|
21
|
+
puts "#{boom.to_s.capitalize}."
|
22
|
+
end
|
data/VERSION
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
0.6.2
|
@@ -0,0 +1,36 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |s|
|
4
|
+
s.name = %q{compass-susy-plugin}
|
5
|
+
s.version = "0.6.2"
|
6
|
+
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
|
8
|
+
s.authors = ["Eric Meyer"]
|
9
|
+
s.date = %q{2009-07-12}
|
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
|
+
s.email = %q{eric@oddbird.net}
|
12
|
+
s.extra_rdoc_files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "README.mkdn"]
|
13
|
+
s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/_base.sass", "templates/project/screen.sass", "templates/project/print.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "docs/tutorial/index.mkdn", "docs/tutorial/figures/susy_element.png", "docs/tutorial/figures/susy_grid.png", "compass-susy-plugin.gemspec"]
|
14
|
+
s.homepage = %q{http://github.com/ericam/compass-susy-plugin}
|
15
|
+
s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-Susy-plugin", "--main", "README.mkdn"]
|
16
|
+
s.require_paths = ["lib"]
|
17
|
+
s.rubyforge_project = %q{compass-susy-plugin}
|
18
|
+
s.rubygems_version = %q{1.3.3}
|
19
|
+
s.summary = %q{A Compass grid system plugin.}
|
20
|
+
|
21
|
+
if s.respond_to? :specification_version then
|
22
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
23
|
+
s.specification_version = 3
|
24
|
+
|
25
|
+
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
26
|
+
s.add_runtime_dependency(%q<chriseppstein-compass>, [">= 0"])
|
27
|
+
s.add_development_dependency(%q<echoe>, [">= 0"])
|
28
|
+
else
|
29
|
+
s.add_dependency(%q<chriseppstein-compass>, [">= 0"])
|
30
|
+
s.add_dependency(%q<echoe>, [">= 0"])
|
31
|
+
end
|
32
|
+
else
|
33
|
+
s.add_dependency(%q<chriseppstein-compass>, [">= 0"])
|
34
|
+
s.add_dependency(%q<echoe>, [">= 0"])
|
35
|
+
end
|
36
|
+
end
|
Binary file
|
Binary file
|
@@ -0,0 +1,303 @@
|
|
1
|
+
Susy Tutorial
|
2
|
+
=============
|
3
|
+
|
4
|
+
Once you've [installed
|
5
|
+
everything](http://github.com/ericam/compass-susy-plugin/tree/master) we can
|
6
|
+
start building our grid. I'll walk you through the steps. I'm starting with
|
7
|
+
the assumption that you already know CSS and the Compass/Sass syntax. If you
|
8
|
+
don't, check out [Chris Eppstein's great
|
9
|
+
intro](http://wiki.github.com/chriseppstein/compass).
|
10
|
+
|
11
|
+
For a brief overview of Susy's philosophy and goals, see [the
|
12
|
+
README](http://github.com/ericam/compass-susy-plugin/tree/master#readme).
|
13
|
+
|
14
|
+
On Susy's Terms
|
15
|
+
---------------
|
16
|
+
|
17
|
+
Here are the terms to understand for following along and using Susy:
|
18
|
+
|
19
|
+
* There is always a **container** element that wraps the page. This container
|
20
|
+
will act as our elastic shell. The **container** also represents a grid
|
21
|
+
structure made up of **columns**, **gutters** between the columns, and
|
22
|
+
**side gutters** on the outside edges of the grid.
|
23
|
+
|
24
|
+
[![The Susy Grid](figures/susy_grid.png)](figures/susy_grid.png)
|
25
|
+
|
26
|
+
* The base **context** is the number of columns in your grid system, and any
|
27
|
+
direct children of the **container** will use that base as their
|
28
|
+
**context**. However, as you continue to nest elements within each other
|
29
|
+
that context will change. Just remember that the **context** is always the
|
30
|
+
number of columns spanned by the parent element.
|
31
|
+
|
32
|
+
* There are any number of **grid elements** making up the structure of our
|
33
|
+
site, nested within the **container**. Each grid element has a width that
|
34
|
+
spans any number of **columns** along with the **gutters** between those
|
35
|
+
columns (number of columns minus one), and a right-margin that represents
|
36
|
+
the gutter to the right of it.
|
37
|
+
|
38
|
+
[![The Susy Grid Element](figures/susy_element.png)](figures/susy_element.png)
|
39
|
+
|
40
|
+
* A **grid element** might also include a **prefix** and/or **suffix** added
|
41
|
+
as padding on either side. Any **prefix** or **suffix** will span the number
|
42
|
+
of **columns** given as argument, as well as all associated **gutters** (in
|
43
|
+
this case the same number of gutters as columns).
|
44
|
+
|
45
|
+
* Any **grid elements** that span the first or last columns in any given
|
46
|
+
context will sometimes need to handle gutters in special ways. These will be
|
47
|
+
referred to as the **alpha** and **omega** elements. One element that spans
|
48
|
+
an entire context (a header or footer perhaps) may be both **alpha** and
|
49
|
+
**omega**.
|
50
|
+
|
51
|
+
Customizing your Grid System
|
52
|
+
----------------------------
|
53
|
+
|
54
|
+
So let's get started. We're going to build a website for Susy. [This
|
55
|
+
website](http://www.oddbird.net/susy/). It's a simple site but it covers
|
56
|
+
everything you need to get started on your own.
|
57
|
+
|
58
|
+
Create yourself a Compass project using Susy:
|
59
|
+
|
60
|
+
compass -r susy -f susy susy_tutorial
|
61
|
+
|
62
|
+
Inside the susy_tutorial directory, create an `index.html` file. You can [grab
|
63
|
+
my source](01_target/index.html).
|
64
|
+
|
65
|
+
Start in your `_base.sass` file (in the `src` directory). That's where you set
|
66
|
+
all your defaults.
|
67
|
+
|
68
|
+
To create a grid, set the `!grid_unit` (units that your grid is based in),
|
69
|
+
`!total_cols` (total number of columns in your grid), `!col_width` (width of
|
70
|
+
columns), `!gutter_width` (width of gutters), and `!side_gutter_width` (width
|
71
|
+
of side gutters) variables.
|
72
|
+
|
73
|
+
The default values are 16 columns, 4em column widths, 1em gutters and side
|
74
|
+
gutters that match the internal ones. But we want a 10 column grid, with 5em
|
75
|
+
columns, 2em gutters and 1em side-gutters.
|
76
|
+
|
77
|
+
Take a look at our target site again, this time [with a grid
|
78
|
+
overlay](01_target/).
|
79
|
+
|
80
|
+
So we'll set our grid like this:
|
81
|
+
|
82
|
+
!grid_unit = "em"
|
83
|
+
!total_cols = 10
|
84
|
+
!col_width = 5
|
85
|
+
!gutter_width = 2
|
86
|
+
!side_gutter_width = 1
|
87
|
+
|
88
|
+
Of course, designing in em's, we'll want to get your font sizes set to make
|
89
|
+
this all meaningful. Do that by assigning a pixel value (without the units) to
|
90
|
+
`!base_font_size_px` and `!base_line_height_px`. Susy will convert those to a
|
91
|
+
percentage of the common browser default (16px) and apply them to your grid.
|
92
|
+
|
93
|
+
The default values here are 12px fonts with an 18px line-height. For us:
|
94
|
+
|
95
|
+
!base_font_size_px = 14
|
96
|
+
!base_line_height_px = 21
|
97
|
+
|
98
|
+
`_base.sass` also has everything you need for setting default font families,
|
99
|
+
colors to reuse throughout, and default styles for all those elements that
|
100
|
+
ought have a default (but don't because of the reset). we're going to skip
|
101
|
+
that for now and play with the fun toys. You can look around at the other
|
102
|
+
defaults and set what you like, or juse use [mine](../src/_base.sass).
|
103
|
+
|
104
|
+
|
105
|
+
Making Semantic Grids
|
106
|
+
---------------------
|
107
|
+
|
108
|
+
First the explanation:
|
109
|
+
|
110
|
+
* Use the `+susy` mixin to get things ready, set your base font sizes and
|
111
|
+
center your grid in the browser window. Change the alignment of your grid in
|
112
|
+
the window with an optional `left | center | right` argument.
|
113
|
+
|
114
|
+
* Use the `+container` mixin to declare your container element. Besides
|
115
|
+
building the grid shell, this sets your horizontal margins to auto (for
|
116
|
+
centered designs) and returns your text-alignment to "left". Change the
|
117
|
+
internal text alignment with an optional `left | center | right` argument.
|
118
|
+
|
119
|
+
* Use the `+columns` mixin to set the width (in columns) of a grid element.
|
120
|
+
The first argument is the number of columns to span, the second (optional)
|
121
|
+
argument is the width (in columns) of the containing element when nesting.
|
122
|
+
If the element is not nested (its parent is the grid container), don't pass
|
123
|
+
a second argument. For an element that will span the full width (including
|
124
|
+
prefix and suffix), you can simply use `+full`, which takes one argument
|
125
|
+
of the context (in columns) when nested.
|
126
|
+
|
127
|
+
* Use the `+alpha` and `+omega` mixins to declare the first and last elements
|
128
|
+
in a row. In a nested context `+omega` takes one argument repesenting its
|
129
|
+
context. `+alpha` is only needed in the very top level, and does nothing in
|
130
|
+
nested contexts. Neither one is needed on a `+full` element.
|
131
|
+
|
132
|
+
* Use the `+prefix` and `+suffix` mixins with one argument to add that many
|
133
|
+
grid columns as padding before or after a grid element. These mixins also
|
134
|
+
take an optional second argument, the size in columns of the containing
|
135
|
+
element when nested.
|
136
|
+
|
137
|
+
Then we do it. In `screen.sass`, we'll start by declaring our intent to use
|
138
|
+
Susy, and our container:
|
139
|
+
|
140
|
+
body
|
141
|
+
+susy
|
142
|
+
|
143
|
+
#page
|
144
|
+
+container
|
145
|
+
|
146
|
+
That wasn't hard. You might ask why I didn't nest `#page` inside of `body`, as
|
147
|
+
is so tempting and easy with Sass. It's part personal preference and part
|
148
|
+
Natalie Downe's voice in my head. Don't nest when you don't need to. It keeps
|
149
|
+
your output code much cleaner.
|
150
|
+
|
151
|
+
While we're at it, why don't we get the fonts going right from the start?
|
152
|
+
|
153
|
+
#page
|
154
|
+
+container
|
155
|
+
+sans-family
|
156
|
+
|
157
|
+
Perfect. Take a look at [the results](02_container/). So far we have:
|
158
|
+
|
159
|
+
* Reset everything. This happens by default in the background.
|
160
|
+
|
161
|
+
* Created an elastic container for our grid at 70em that goes fluid for small
|
162
|
+
windows (try it!).
|
163
|
+
|
164
|
+
|
165
|
+
Laying Out The Components
|
166
|
+
--------------------------
|
167
|
+
|
168
|
+
It's time to lay out our grid components. We'll just work our way through the
|
169
|
+
HTML, starting with our brand header (#brand). We can refer back to our [target
|
170
|
+
site with a grid overlay](01_target/) to see what we need. Looks like our
|
171
|
+
branding gets an entire row to itself, with the content starting one row
|
172
|
+
in. For the sake of argument, let's say we want the header content contained
|
173
|
+
within the middle 8 columns - one in from each end. That means it will be an 8
|
174
|
+
column element, with 1 column prefixed and one suffixed, for a total of 10
|
175
|
+
columns - the full width.
|
176
|
+
|
177
|
+
#brand
|
178
|
+
+columns(8)
|
179
|
+
+prefix(1)
|
180
|
+
+suffix(1)
|
181
|
+
|
182
|
+
Since it spans both the first and last columns in the context we'll need to
|
183
|
+
add:
|
184
|
+
|
185
|
+
+alpha
|
186
|
+
+omega
|
187
|
+
|
188
|
+
Or we would have to, but there are several shortcuts available to us. To
|
189
|
+
declare something as full width (both alpha and omega) we can just declare it
|
190
|
+
as full:
|
191
|
+
|
192
|
+
+full
|
193
|
+
|
194
|
+
There is also a shorcut for prefix and suffix additions (+pad), so we can
|
195
|
+
simplify down to:
|
196
|
+
|
197
|
+
#brand
|
198
|
+
+full
|
199
|
+
+pad(1,1)
|
200
|
+
|
201
|
+
Since we don't have an image in there yet, let's move the text over to line up
|
202
|
+
with the future placement of our main content area. By turning the `h1` link
|
203
|
+
into a grid element and prefixing a padding of one column, we can move the
|
204
|
+
text without any effect on the image that will replace it (using the Compass
|
205
|
+
utility `+replace-text`, though I'll leave the implementation of that as an
|
206
|
+
exercise for you to figure out). To line it all up with the content below it,
|
207
|
+
we'll assign it 5 columns in a context of 8, with the extra 3 split between a
|
208
|
+
prefix of 1 and a suffix of 2 - giving it a full span again. This time we are
|
209
|
+
nested and need to supply the context.
|
210
|
+
|
211
|
+
h1 a
|
212
|
+
+full(8)
|
213
|
+
+pad(1,2,8)
|
214
|
+
|
215
|
+
Note: when not nested, you *must not declare a context*. If you
|
216
|
+
do, your side-gutters will be ignored. At every nested layer below that, even
|
217
|
+
if the context hasn't changed, you *must declare a context* or it will try to
|
218
|
+
add side-gutters again. That means even if you have one nested element
|
219
|
+
wrapping the rest at full width and not changing the context, that wrapper
|
220
|
+
does not get a context but its descendants do, even where that context is the
|
221
|
+
same as the full page.
|
222
|
+
|
223
|
+
For example, these *will not work*:
|
224
|
+
|
225
|
+
/*because context is declared at the top level:*/
|
226
|
+
#page
|
227
|
+
+container
|
228
|
+
|
229
|
+
.inner
|
230
|
+
+columns(8,10)
|
231
|
+
|
232
|
+
/*because context is not declared in a nested level:*/
|
233
|
+
#page
|
234
|
+
+container
|
235
|
+
|
236
|
+
.inner
|
237
|
+
+columns(10)
|
238
|
+
#brand
|
239
|
+
+columns(10)
|
240
|
+
|
241
|
+
This *will work*:
|
242
|
+
|
243
|
+
#page
|
244
|
+
+container
|
245
|
+
|
246
|
+
.inner
|
247
|
+
+columns(10)
|
248
|
+
#brand
|
249
|
+
+columns(8,10)
|
250
|
+
|
251
|
+
We're only worried about structure for now, so the header is done. Let's move
|
252
|
+
on to the navigation (#nav). The nav spans 2 columns, including the first
|
253
|
+
column in it's context.
|
254
|
+
|
255
|
+
#nav
|
256
|
+
+columns(2)
|
257
|
+
+alpha
|
258
|
+
|
259
|
+
Done. The #content (which includes both #description and #credit)
|
260
|
+
spans the remaining 8 columns, including the last one.
|
261
|
+
|
262
|
+
#content
|
263
|
+
+columns(8)
|
264
|
+
+omega
|
265
|
+
|
266
|
+
Done. #description spans 5; #credit spans 3 including the last. Both are in a
|
267
|
+
nested context of 8, which we now need to pass on:
|
268
|
+
|
269
|
+
#description
|
270
|
+
+columns(5,8)
|
271
|
+
|
272
|
+
#credit
|
273
|
+
+columns(3,8)
|
274
|
+
+omega(8)
|
275
|
+
|
276
|
+
Done and done. All we have left is the footer (#site-info) spanning the full
|
277
|
+
width, but with two blank columns on the left:
|
278
|
+
|
279
|
+
#site-info
|
280
|
+
+full
|
281
|
+
+prefix(2)
|
282
|
+
|
283
|
+
Nested in the footer are `.license` and `.styles`, so let's put them in place.
|
284
|
+
I'm going to say that each should match the width of the element visually
|
285
|
+
above it on the page. So .license will span 5 columns in its context of 8, and
|
286
|
+
.styles will span 3 including the last.
|
287
|
+
|
288
|
+
p.license
|
289
|
+
+columns(5,8)
|
290
|
+
p.styles
|
291
|
+
+columns(3,8)
|
292
|
+
+omega(8)
|
293
|
+
|
294
|
+
And we're done. That's it. That's what Susy does. The details of making it
|
295
|
+
pretty are left as an exercise for the reader, and have more to do with
|
296
|
+
Compass than Susy.
|
297
|
+
|
298
|
+
* [The resulting files](03_structure/src/) with [the site structure all in
|
299
|
+
place](03_structure/) (this should match what you have if you followed
|
300
|
+
along).
|
301
|
+
|
302
|
+
* [My final styles](../src/) for [the site](http://www.oddbird.net/susy/).
|
303
|
+
|