Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix typo

  • Loading branch information...
commit af27eb40c037e624e922e3cde7761df69cb7698d 1 parent 60339b5
@ericam authored
Showing with 46 additions and 46 deletions.
  1. +46 −46 README.mkdn
View
92 README.mkdn
@@ -1,4 +1,4 @@
-Susy - Compass Plugin
+Susy - Compass Plugin
=====================
Susy is a semantic CSS grid system for designers.
@@ -18,12 +18,12 @@ Compass/Sass, Susy will do that math and let you focus on your designs.
Using simple mixins, columns can be created, suffixed, prefixed, and nested -
always in flexible percentages and without touching your markup.
-Install
+Install
=======
sudo gem install compass-susy-plugin
-Create a Susy-based Compass Project
+Create a Susy-based Compass Project
===================================
compass create <project name> -r susy -u susy
@@ -65,26 +65,26 @@ Grid Basics
* Set up your default grid values (total columns, column width, gutter width,
side gutter width) and important mixins in `_base.scss`.
-
+
Example:
-
+
$total-cols: 12; /* a 12-column grid */
$col-width: 4em; /* each column is 4em (64px) wide */
$gutter-width: 1em; /* 1em (16px) gutters between columns */
$side-gutter-width: $gutter-width; /* 1em (16px) padding at the edges of the page as well */
-* Create your grid in `screen.scss`: apply the `container` mixin to the
+* Create your grid in `screen.scss`: apply the `container` mixin to the
element(s) that contains the page grid. This will set up your font sizes
and grid container.
Example:
-
+
#page {
- @include container;
+ @include container;
}
-
+
CSS Output:
-
+
#page {
*zoom: 1;
margin: auto;
@@ -114,36 +114,36 @@ Grid Basics
considered to be in the "root" context. Any element within other grid
elements (with a nearest grid ancestor other than the `container`) is
considered to be in a "nested" context.
-
+
This is important because side-gutters are handled at the root level, as
margins on root grid elements. Margins that we don't want at nested levels.
It is also important because Susy grid elements are %-based, and so the
context is important to Susy's math. `Full` is simply a shortcut to replace
`columns` when the span should be the full width.
-
+
The `columns` mixin:
-
+
@include columns($span, [$context]);
-
+
The `full` mixin:
-
+
@include full([$context]);
*Note:* Context _must not_ be passed at the root level, and _must_ be passed at nested levels.
* Use `alpha` and `omega` to declare elements which include
the first or last column within their parent element.
-
+
*Note:* `alpha` is _only_ needed in the root level, and does
nothing in nested contexts. Neither is needed with an `full` element.
-
+
The `alpha` and `omega` mixins:
-
+
@include alpha;
@include omega([$context]);
-
+
Example Scss:
-
+
#page {
@include container;
header {
@@ -168,60 +168,60 @@ Grid Basics
}
}
}
-
+
Susy's CSS output uses floats to arrange the columns, widths to set the
spans, right-margins to set the getter, and both side margins to set the
side-gutters on root `alpha` and `omega` elements.
* Use `prefix` or `suffix` to pad (in columns) the width of
- an element using left and right padding, or `pad` to give both `prefix` and
+ an element using left and right padding, or `pad` to give both `prefix` and
`@suffix` at once.
-
+
The `prefix`, `suffix` and `pad` mixins:
-
+
@include prefix($prefix-span [, $context])
@include prefix($suffix-span [, $context])
@include pad($prefix-span, $suffix-span [, $context])
-
+
Used with `full` these are subtractive, so the full width remains:
-
+
header {
@include full;
@prefix(2);
}
-
+
Will result in a full-width element, with 2 columns of padding to the left.
-
+
Used with `columns` these are addative, so the content width remains:
-
+
aside {
@include columns(3,9);
@prefix(3,9)
}
-
- Will result in a 6-column element, with 3 of those columns used as padding
+
+ Will result in a 6-column element, with 3 of those columns used as padding
on the left.
That's it for the basics! Here's a sample Susy grid layout:
-
+
#page {
- @include container;
+ @include container;
}
-
+
header {
@include full;
@include pad(1,1);
-
+
h1 {
@include full(10);
- }
+ }
}
-
+
nav {
@include columns(3);
@include alpha;
}
-
+
#content {
@include columns(9);
@include omega;
@@ -239,7 +239,7 @@ Tutorial
Check out the tutorial at [susy.oddbird.net/tutorial/](http://susy.oddbird.net/tutorial/) for more details.
-Extra Utility Mixins
+Extra Utility Mixins
=====================
Extra utilities are included in Susy's `_utils.scss`:
@@ -259,7 +259,7 @@ advanced options hidden inside. Here are a few:
size of a gutter in your given context as a percentage.
Example:
-
+
#nav {
padding-right: gutter(5);
}
@@ -270,18 +270,18 @@ advanced options hidden inside. Here are a few:
shortcut.
Example:
-
+
#nav {
padding-left: columns(3,5);
}
-* `side_gutter()` returns the percentage width of a side-gutter and takes no
+* `side_gutter()` returns the percentage width of a side-gutter and takes no
arguments since it can always used at the top nesting level.
-Susy now also supports right-to-left and bi-directional documents. For a
-simple toggle, set the default `$from-direction` (defaults to `left`). For
-more specific control, you can pass an additional, localized `$from-direction`
-artgument to any of the Susy mixins that need to know:
+Susy now also supports right-to-left and bi-directional documents. For a
+simple toggle, set the default `$from-direction` (defaults to `left`). For
+more specific control, you can pass an additional, localized `$from-direction`
+argument to any of the Susy mixins that need to know:
* `columns`, `un-column`
* `alpha`, `omega`
Please sign in to comment.
Something went wrong with that request. Please try again.