readme.md in bourbon-0.1.2 vs readme.md in bourbon-0.1.3

- old
+ new

@@ -269,31 +269,43 @@ } ##Add-ons +###Animation-Keyframes + +Animation-keyframes are provided for quick out-of-the-box animations. Two animation-keyframes are provided: fade-in, fade-out. These animations can be called using the *animation-name* mixin; alternatively the *animation-basic* mixin can be used. Supports Webkit browsers and Mozilla 5.0+. + + div.fade-in { + @include animation-name(fade-in); + } + + div.fade-out { + @include animation-basic(fade-out, 2.0s, ease-in); + opacity: 0; + } + + ###Buttons -The button add-on provides well-designed buttons with a single line in your CSS. The demo folder contains examples of the buttons in use. -The mixin can be called with no parameters to render a blue button with the "simple" style. +The button add-on provides well-designed buttons with a single line in your CSS. +The mixin supports a style parameter and an optional color argument. The available styles are **"simple"** (default), **"shiny"**, and **"pill"**. - button, - input[type="button"] { + # The mixin can be called with no arguments, which will render a blue button with the "simple" style. + button, input[type="button"] { @include button; } -The mixin supports a style parameter. Right now the available styles are "simple" (default), "shiny", and "pill". - - button, - input[type="button"] { + # Pass a style argument + button, input[type="button"] { @include button(shiny); } -The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background. +Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background. - button, - input[type="button"] { + # Style + color arguments + button, input[type="button"] { @include button(shiny, #ff0000); } #All Supported Functions, Mixins, and Addons @@ -322,10 +334,11 @@ @ animation-play-state(*args) @ animation-timing-function(*args) @ background-image(*args) @ border-radius(*args) + @ box-shadow(*args) @ box-sizing(*args) flex-box @ box(*args) @ box-align(*args) @@ -350,9 +363,10 @@ @ transition-property(*args) @ transition-timing-function(*args) #Addons -------------------------------- + animation-keyframes (fade-in, fade-out) @ button(*args) @ position(*args) ##Help Out