Permalink
Browse files

adds SASS example, instructions for installing via Bower

  • Loading branch information...
1 parent 2bb4af6 commit fda1bfac653295e380e3e4deeb5993b76cceef5f @jonschlinkert committed Sep 11, 2013
Showing with 19 additions and 5 deletions.
  1. +19 −5 README.md
View
@@ -1,6 +1,6 @@
# Vertical Rhythm
-> Create typographical vertical rhythm in your CSS. LESS, Stylus and SASS versions included.
+> Create typographical vertical rhythm in your CSS. LESS, Stylus and SASS/SCSS versions included.
This should get you to your goal faster than starting from scratch. Please customize it to work with your own project.
@@ -19,9 +19,21 @@ This should get you to your goal faster than starting from scratch. Please custo
}
}
```
+
+`vertical-rhythm.sass`
+
+```sass
+.rhythm
+ h3 + ul.bullet-list,
+ h3 + ul.numbered-list,
+ h3 + ul.alpha-list,
+ h3 + ol.numbered-list
+ margin-top: ($line-height-base / 2)
+```
+
`vertical-rhythm.less`
-```scss
+```less
.rhythm {
h3 + ul.bullet-list,
h3 + ul.numbered-list,
@@ -32,11 +44,11 @@ This should get you to your goal faster than starting from scratch. Please custo
}
```
-Designed to be mostly framework agnostic, although the baseline styles for normalizing are borrowed from Bootstrap. This means `vertical-rhythm.{less,styl,sass,css}` will make a good drop-in component for Bootstrap, _but it can also be used standalone for any project_.
+Designed to be mostly framework agnostic, although the baseline styles for normalizing are borrowed from Bootstrap. This means `vertical-rhythm.{less,styl,scss,css}` will make a good drop-in component for Bootstrap, _but it can also be used standalone for any project_.
## How does this work?
-In **vertical-rhythm.{less,styl,sass,css}** you will find two sections:
+In **vertical-rhythm.{less,styl,scss,css}** you will find two sections:
#### I. Typography Base
@@ -47,7 +59,9 @@ If you use Bootstrap or Foundation, just get rid these base styles before you dr
The `.rhythm` styles are designed with sensible defaults that you should be able to use as is. Expect to use these styles as examples though, because every project is different and you will probably need to customize before you achieve vertical rhythm with the typography in your own project.
+
## Get Started
+ * Install with [Bower](https://github.com/bower/bower), `bower install vertical-rhythm`
* clone the repo, `git clone git://github.com/jonschlinkert/vertical-rhythm.git`
* or [download the latest version](https://github.com/jonschlinkert/vertical-rhythm/zipball/master)
@@ -69,5 +83,5 @@ The `.rhythm` styles are designed with sensible defaults that you should be able
## Credit & Attribution
-> The baseline section in the vertical rhythm component is based on `type.less` from the excellent [Bootstrap](http://twitter.github.com/bootstrap), by [Mark Otto](https://github.com/mdo) and [Jacob Thornton](https://github.com/fat).
+> The baseline section in this vertical-rhythm component was originally based on `type.less` from the excellent [Bootstrap](http://twitter.github.com/bootstrap), by [Mark Otto](https://github.com/mdo) and [Jacob Thornton](https://github.com/fat).

0 comments on commit fda1bfa

Please sign in to comment.