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"