[ADD] License

[FIX] Update README.md
jaredhowland · Feb 14, 2015 · 8208dc2 · 8208dc2
1 parent fe96c7d
commit 8208dc2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 17 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2015 Jared Howland
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -9,27 +9,31 @@ Usage
     ```
     {
       "require": {
-        "jaredhowland/rhythm": "~0.0.1"
+        "jaredhowland/rhythm": "~0.0.2"
       }
     }
     ```
 
-2. Add the following to your primary `.scss` file:
+2. Add the following to the top of your primary `.scss` file:
 
     ```
-    @import "path/to/rhythm";
+    @import "path/to/vendor/jaredhowland/rhythm/src/rhythm";
     ```
-    
-    If you wish to override any default variables, create a `variables-custom.scss` file and import it before you import `rhythm`. Alternatively, redefine the variable(s) in your primary `.scss` file before you `@import "rhythm";`.
 
-3. Add the following to your primary `.scss` file:
+    If you want to override any default variables, create a `variables-custom.scss` file and import it before you import Rhythm. Alternatively, redefine the variable(s) in your primary `.scss` file before you `@import "rhythm";`.
+
+3. After importing Rhythm, set your base `font-size` and `line-height` in your primary `.scss` file:
 
     ```
     body {
-      @include rhythm(18px, 1.3); // base font-size: 18px; base line-height: 1.3
+      // Base font-size: 18px
+      // Base line-height: 1.3
+      @include rhythm(18px, 1.3);
     }
     ```
 
+    `font-size` can be set in `px`, `%`, or `rem`. [`line-height` should always be unitless][7].
+
 4. *Margins*. If you would like to add a top and bottom margin to an element:
 
     ```
@@ -38,24 +42,25 @@ Usage
     }
     ```
 
-    Generates (if you do not pass any variables to `margin` it assumes the base font-size and base line-height):
+    Will generate<sup> * </sup>:
 
     ```
     p {
       margin-top: 1.3rem;
       margin-bottom: 1.3rem;
     }
     ```
+    <sup> * </sup> <small>If you do not pass any variables to `margin` Rhythm assumes the element has the base `font-size` and base `line-height`.</small>
 
-    To maintain a vertical rhythm, your margins must be derived from your line-height. If you would like twice your line-height for a top margin and no margin on bottom, do the following:
+    To maintain a vertical rhythm, your margins must be derived from your `line-height`. If you would like twice your `line-height` for a top margin and no margin on bottom, do the following:
 
     ```
     p {
       @include margin(2, 0);
     }
     ```
 
-    Generates:
+    Will generate:
 
     ```
     p {
@@ -64,9 +69,9 @@ Usage
     }
     ```
 
-    The numbers passed to `@include margin()` must sum to a whole number to maintain the rhythm (*e.g.* cannot be 0.5 and 0.75 as that sums to 1.25).
+    The numbers passed to `@include margin();` must sum to a whole number to maintain the rhythm (*e.g.* cannot be 0.5 and 0.75 as that sums to 1.25).
 
-    If you are adding margin to an element that is a different size than your base sizes, you must also pass along the font-size:
+    If you are adding margin to an element that is a different size than your base sizes, you must also pass along the `font-size`:
 
     ```
     p {
@@ -75,24 +80,25 @@ Usage
     }
     ```
 
-5. *Font Sizes*. If you change a font size, you have to change the line-height to maintain the rhythm. Use the `fs-lh` mixin to do this automatically.
+5. *Font Sizes*. If you change a font size, you have to change the `line-height` to maintain the rhythm. Use the `fs-lh` mixin to do this automatically.
 
     ```
     p {
       @include fs-lh(1.2rem);
     }
     ```
 
-    Generates (assuming 18px is base font-size and 1.3 is base line-height):
+    Will generate<sup> * </sup>:
 
     ```
     p {
       font-size: 1.2rem;
       line-height: 1.21875; // ([base font size] * [base line height]) / [new font size]: 23.4/19.2 = 1.21875
     }
     ```
+    <sup> * </sup> <small>This assumes 18px is the base `font-size` and 1.3 is the base `line-height`.</small>
 
-6. *Modular Scales*. When you first call Rhythm, a modular scale is generated for you based on the `$modular-scale` variable set in your `variables-custom.scss` file or in the file before you `@import "rhythm";`. It combines your base font-size and base line-height to create the [scale][5].The default scale is the `golden` ratio. Other options include:
+6. *Modular Scales*. When you first call Rhythm, a modular scale is generated for you based on the `$modular-scale` variable set in your `variables-custom.scss` file or in the `.scss` file before you `@import "rhythm";`. It combines your base `font-size` and base `line-height` to create the [scale][5].The default scale is the `golden` ratio. Other options include:
 
     * `minor-second`
     * `major-second`
@@ -129,15 +135,15 @@ Usage
     * `$epsilon`, `$h6`
     * `$zeta`
 
-    For example, if you want to set your `h1` font-size, you can do the following:
+    For example, if you want to set your `h1`'s `font-size`, you can do the following:
 
     ```
     h1 {
       @include fs-lh($h1);
     }
     ```
 
-    Alternatively, if you want a slightly smaller `h1`, you could do the following:
+    Alternatively, if you want a slightly smaller `h1`, you can do the following:
     ```
     h1 {
       @include fs-lh($alpha);
@@ -150,3 +156,4 @@ Usage
 [4]: http://necolas.github.io/normalize.css/
 [5]: http://modularscale.com/scale/?px1=18&px2=27&ra1=1.5&ra2=0
 [6]: http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
+[7]: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/