Permalink
Browse files

docs up to date with changes

  • Loading branch information...
mirisuzanne committed Jan 20, 2010
1 parent 561cf5e commit 46002f5b6bf812f8306b7cb48337e20414520154
View
@@ -68,9 +68,8 @@ Grid Basics
* Set defaults for all the important HTML tags in `_defaults.sass`. It's
better than using the browser defaults. And better than using ours.
-* 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.
+* Create your grid in `screen.sass`: apply the `+susy` mixin at the top level
+ 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.
@@ -89,8 +88,7 @@ Grid Basics
That's it for the basics! Here's a sample Susy grid layout:
- body
- +susy
+ +susy
#page
+container
@@ -128,34 +126,32 @@ Extra utilities are included in Susy's `utils.sass` file, with additional list
options, experimental (CSS3/proprietary) CSS, and more.
* `+show-grid(!src)` - Repeat the specified grid image on an element. Good for
- testing your baseline grid.
+ testing your baseline and grid.
* `+inline-block-list([!horizontalpadding])` - Make list items inline-block
when floating just won't do the trick (if you need them centered or right).
* `+hide` - Hide content from visual browsers while keeping accessability
intact.
-* `+skip-link([!top = 0, !right, !bottom, !left])` - Hide a link, and then show
+* `+skip-link([!top, !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.
-And then the fun stuff in `_CSS3.sass`:
+And then the fun stuff in `_vertical_rhythm.sass`, written by Chris Eppstein
+and probably moving to the compass core before too long:
-* `+opacity(!opacity)` - add cross-browser opacity settings (takes a range of
- 0 to 1). `+transprent` and `+opaque` are available as shortcuts.
+* `+adjust-font-size-to(!font_size, [!lines])` - adjust the font size and number
+ of baseline (line) units to occupy.
-* `+border-radius(!radius)` - Rounded corners in supporting browsers.
- `+border-bottom-left-radius` etc. all work.
+* `+leader([!lines, !font_size])` and `+trailer([!lines, !font_size])` - add
+ leading or trailing whitespace to an element. These are added as top and
+ bottom margins that keep your vertical rhythm intact.
-* `+box-sizing(!model)` - Set the box sizing model in supporting browsers.
+* `+top-border([!width, !lines, !font_size])` and `+bottom-border([!width,
+ !lines, !font_size])` will combine border and padding to create borders that
+ also keep the vertical rhythm going.
-* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` -
- Box-shadow in supporting browsers.
-
-* `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
- and `+column-rule(!width, !style, !color)` - CSS columns in supporting
- browsers.
Advanced Options
================
@@ -224,12 +220,13 @@ advanced options hidden inside. Here's a few:
* `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.
-
+* `!px2em` is a variable that represents the height of one pixel as a fraction
+ of your base em-height. Multiply it with your target pixel value to
+ represent that value in ems.
+
Example:
#nav
- border-bottom= px2em(2) + "em"
+ border-bottom:
+ style: solid
+ width= !px2em*2
@@ -13,17 +13,18 @@
/* @group links */
-\:focus
- outline: 1px dotted
+a, input, textarea, button
+ :focus
+ outline: 1px dotted
a
&:link, &:visited
- color= !links
+ color= !alt
text-decoration: none
&:focus, &:hover, &:active
color= !light
border-bottom:
- width= px2em(2) + "em"
+ width= !px2em*2
style: dashed
/* @end */
@@ -37,7 +38,7 @@ h1
font-size: 3em
line-height: 1
font-weight: bold
- color= !links
+ color= !alt
h2
font-weight: bold
@@ -56,12 +57,12 @@ pre
padding: 1.5em
=list-default(!ol = false)
+ +leader
+ +trailer
@if !ol
list-style: decimal
- margin: 0 1.5em 1.5em 1.5em
@else
list-style: disc
- margin: 0 1.5em 1.5em 1.5em
ol
+list-default("ol")
@@ -9,13 +9,12 @@
/* @group STRUCTURE */
-body
- +susy
++susy
#page
+container
+sans-family
- color= !text
+ color= !base
#brand
+full
@@ -12,18 +12,19 @@
body
+sans-family
- color= !text
+ color= !base
/* @group links */
-\:focus
- outline= 1px "dotted" !links
+a, input, textarea, button
+ &:focus
+ outline= 1px "dotted" !alt
a
&:link, &:visited
- color= !links
+ color= !alt
&:focus, &:hover, &:active
- color= !links - #222
+ color= !alt - #222
text-decoration: none
/* @end */
@@ -37,66 +38,43 @@ h1, h2, h3, h4, h5, h6
/* @end */
-/* @group forms */
-
-form *:focus
- outline: none
-
-fieldset
- margin= !base_line_height 0
-
-legend
- font-weight: bold
- font-variant: small-caps
-
-label
- display: block
- margin-top= !base_line_height
-
-legend + label
- margin-top: 0
-
-textarea, input[type="text"]
- +box-sizing("border-box")
- width: 100%
-
-/* @end */
-
-
/* @group tables */
/* tables still need 'cellspacing="0"' in the markup */
table
- :width 100%
- :border= 1/16 + "em solid" !text + #333
- :left none
- :right none
- :padding= 7/16 + "em 0"
- :margin= 8/16 + "em 0"
+ width: 100%
+ border:
+ width: 0
+ style: solid
+ color= !base
+ +top-border(1px, 0.5)
+ +bottom-border(1px, 0.5)
th
- :font-weight bold
+ font-weight: bold
/* @end */
/* @group block tags */
p
- :margin= !base_line_height 0
+ +leader
+ +trailer
=list-default(!ol = false)
- :margin= !base_line_height
+ +leader
+ +trailer
@if !ol
- :list-style decimal
+ list-style: decimal
@else
- :list-style disc
+ list-style: disc
=no-style-list
+no-bullets
- :margin 0
- :padding 0
+ margin: 0
+ padding: 0
ol
+list-default("ol")
@@ -105,7 +83,7 @@ ul
+list-default
blockquote
- :margin= !base_line_height
+ margin= !base_rhythm_unit
+serif-family
/* @end */
@@ -114,32 +92,58 @@ blockquote
/* @group inline tags */
cite
- :font-style italic
+ font-style: italic
em
- :font-style italic
+ font-style: italic
strong
- :font-weight bold
+ font-weight: bold
ins
- :text-decoration underline
+ text-decoration: underline
del
- :text-decoration line-through
+ text-decoration: line-through
q
- :font-style italic
+ font-style: italic
em
- :font-style normal
+ font-style: normal
/* @end */
/* @group replaced tags */
img
- :vertical-align bottom
+ vertical-align: bottom
+
+/* @end */
+
+
+/* @group forms */
+
+form *:focus
+ outline: none
+
+fieldset
+ +trailer
+
+legend
+ font-weight: bold
+ font-variant: small-caps
+
+label
+ display: block
+ +leader
+
+legend + label
+ margin-top: 0
+
+textarea, input:not([type="radio"])
+ +box-sizing("border-box")
+ width: 100%
/* @end */
@@ -9,8 +9,7 @@
/* @group STRUCTURE */
-body
- +susy
++susy
#page
+container
Oops, something went wrong.

0 comments on commit 46002f5

Please sign in to comment.