readme.md in bourbon-0.0.8 vs readme.md in bourbon-0.1.1

- old
+ new

@@ -1,7 +1,7 @@ #Bourbon Sass Mixins -The purpose of Bourbon Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. +The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax. #Requirements Sass 3.1+ @@ -33,24 +33,30 @@ @import 'bourbon/bourbon'; #Install without Rails -The following script will generate a sass directory and convert all .css.scss to .scss extensions. The sass directory is for 'sass --watch' use outside of rails. -Preliminary step: clone the repo and cd into the directory. +The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails. +Preliminary step: clone this repo and cd into the directory. **Step 1:** Make script executable by changing file permission - chmod a+x generate-sass.sh + chmod a+x generate-bourbon.sh **Step 2:** Generate files - ./generate-sass.sh + ./generate-bourbon.sh -**Step 3:** Move the new *sass* directory to your project's stylesheets directory. +**Step 3:** Move the new *bourbon* directory into your project's sass directory. *e.g. stylesheets/sass/* +**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended: +*-r ./bourbon/lib/bourbon.rb* + # Example (project root directory) + sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb + + #Using Bourbon Vanilla Mixins Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more. ###Animation @@ -62,10 +68,24 @@ # Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable. @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in); +###Background-image + +The background-image mixin is helpful for chaining multiple comma deliminated background images and/or linear-gradients into one background-image property.Background-image supports up to 10 background-images. + + # Multiple image assets + @include background-image(url("/images/a.png"), url("images/b.png")); + + # Image asset with a linear-gradient + @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%)); + + # Multiple linear-gradients; + @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) ); + + ###Border Radius Border-radius will also take short-hand notation. @include border-radius(10px); @@ -102,11 +122,16 @@ div.parent > div.child { @include box-flex(2); } + # Alternative custom shorthand mixin. + div.parent { + @include box($orient: horizontal, $pack: center, $align: stretch); + } + ###Inline-block The inline-block mixin provides support for the inline-block property in IE6 and IE7. @include inline-block; @@ -173,24 +198,35 @@ ###Golden Ratio Returns the golden ratio of a given number. Must provide a Pixel or Em value for first argument. Also takes a required increment value that is not zero and an integer: ...-3, -2, -1, 1, 2, 3... div { - Increment Up GR with positive value - width: golden-ratio(14px, 1); // returns: 22.652px + Increment Up GR with positive value + font-size: golden-ratio(14px, 1); // returns: 22.652px - Increment Down GR with negative value - width: golden-ratio(14px, -1); // returns: 8.653px + Increment Down GR with negative value + font-size: golden-ratio(14px, -1); // returns: 8.653px - Can be used with ceil(round up) or floor(round down) - width: floor( golden-ratio(14px, 1) ); // returns: 22px - width: ceil( golden-ratio(14px, 1) ); // returns: 23px + Can be used with ceil(round up) or floor(round down) + font-size: floor( golden-ratio(14px, 1) ); // returns: 22px + font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px } Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com) +###Linear-gradient + +Outputs a linear-gradient. Use in conjuntion with the background-image mixin. The function takes the same arguments as the linear-gradient mixin (See Mixins section of this README). + + # Image asset with a linear-gradient + @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%)); + + # Multiple linear-gradients; + @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) ); + + ###Grid-width Easily setup and follow a grid based design. Need help gridding? Check out [gridulator.com](http://gridulator.com/) # The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. @@ -251,10 +287,11 @@ #Functions -------------------------------- compact(*args) golden-ratio(*args) + linear-gradient(*args) grid-width(*args) shade(*args) tint(*args) #Mixins @@ -269,13 +306,15 @@ @ animation-iteration-count(*args) @ animation-name(*args) @ animation-play-state(*args) @ animation-timing-function(*args) + @ background-image(*args) @ border-radius(*args) @ box-sizing(*args) flex-box + @ box(*args) @ box-align(*args) @ box-direction(*args) @ box-flex(*args) @ box-flex-group(*args) @ box-lines(*args)