README.mkdn in carljm-compass-susy-plugin-0.4.1 vs README.mkdn in carljm-compass-susy-plugin-0.6.2
- old
+ new
@@ -68,14 +68,16 @@
* Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
element and the `+container` mixin to the element that contains the page
grid.
* Use the `+columns` mixin to declare the width in columns of an element,
+ or `+full` for any element spanning the full width of its context.
* Use `+alpha` and `+omega` to declare elements which include the first or
last column within their parent element (`+full` to declare both `+alpha`
- and `+omega`).
+ and `+omega`). Note: `+alpha` is actually only needed in the very top level,
+ and does nothing in nested contexts. Neither is needed on a `+full` element.
* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
once.
@@ -89,28 +91,25 @@
#page
+container
#brand
- +columns(8)
- +pad(1,1)
+full
+ +pad(1,1)
h1
- +columns(5,8)
- +pad(1,2,8)
+full(8)
+ +pad(1,2,8)
#nav
+columns(2)
+alpha
#content
+columns(8)
+omega
#description
+columns(5,8)
- +alpha(8)
#credit
+columns(3,8)
+omega(8)
Tutorial
@@ -136,13 +135,10 @@
* `+skip-link([!top = 0, !right, !bottom, !left])` hide a link, and then show
it again on focus. the TRBL settings allow you to place it absolutely on
display. Default will be top left of the positioning context.
-* `+inline-italic` because some fonts/browsers add line-height when you
- explicitly set italics on an inline element - this takes some away.
-
And then the fun stuff:
* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of
0 to 1).
@@ -151,6 +147,87 @@
* `+box-sizing(!model)` for setting the box sizing model in supporting
browsers.
* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
- box-shadow in webkit and CSS3.
+ box-shadow in webkit, mozilla and CSS3.
+
+* `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
+ and `+column-rule(!width, !style, !color)` for CSS columns in webkit,
+ mozilla and CSS3.
+
+Advanced Options
+================
+
+Susy is built for flexibility, so that you always write the code you want to
+write. While everything should 'just work' out of the box, there are plenty of
+advanced options hidden inside. Here's a few:
+
+* `!hacks` is a boolean constant that you can set in your base.sass file to
+ choose between using targeted hacks for IE (a variation of the star hack in
+ most cases) in your screen.css, or using a conditional-comment targeted
+ ie.css. All the needed mixins are available for either setting. `!hacks` is
+ true by default so there is no extra work maintaining multiple files unless
+ you want to.
+
+ Example 1:
+
+ !hacks = true
+
+ #nav
+ +inline-block-list
+
+ Example 2:
+
+ !hacks = false
+
+ (in screen.sass)
+ #nav
+ +inline-block-list
+
+ (in ie.sass)
+ #nav li
+ +ie-inline-block
+
+ It requires more maintenance on your part, but the result is a
+ hack-free output.
+
+ The susy mixins that use either hacks or targeted mixins are
+ `+omega` (`+ie-omega([!right-floated = false])`), `+inline-block`
+ (`+ie-inline-block`), and `+inline-block-list` which sets
+ `+inline-block` on the list items.
+
+ The ie-specific mixins only add the needed ie-specific adjustments,
+ so they need to be used in addition to their counterparts, not on
+ their own.
+
+* `gutter(!context)` is a function that you can call at any time to return the
+ size of a gutter in your given context using percentages. The number is
+ returned without units so that you can perform math on it. In order to use
+ it, you will have to add "%" to it.
+
+ Example:
+
+ #nav
+ :padding-right= gutter(5) + "%"
+
+* `columns(!number, !context)` returns the span of `!number` columns in
+ `!context` as a percentage (again without the units declared). This span
+ includes any gutters between the columns spanned.
+
+ Example:
+
+ #nav
+ :padding-left= columns(3,5) + "%"
+
+* `side_gutter()` is also available and takes no arguments since it is always
+ used at the top nesting level.
+
+* `px2em()` takes one numeric argument representing the number of pixels you
+ want to mimic. The return is an em value (with no units declared) that
+ approximates that number of pixels. Useful for keeping your entire design
+ fluid.
+
+ Example:
+
+ #nav
+ :border-bottom= px2em(2) + "em"