bourbon 2.0.0.rc1 → 2.1.0

data/_includes/font-family.html

@@ -0,0 +1,21 @@
+<section id="font-family">
+  <h2>Font-Family <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-family.scss">View source</a></h2>
+  <p>Bourbon defines four default font-families as variables for the sake of convenience:</p>
+
+{% highlight scss %}
+font-family: $helvetica;
+font-family: $georgia;
+font-family: $lucida-grande;
+font-family: $monospace;
+font-family: $verdana;
+{% endhighlight %}
+
+  <h3>CSS Output</h3>
+{% highlight scss %}
+font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+font-family: Verdana, Geneva, sans-serif;
+{% endhighlight %}
+</section>

data/_includes/footer.html

@@ -0,0 +1,37 @@
+<section id="browser-support">
+  <h2>Browser Support &amp; Pull Requests</h2>
+  <p>Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.</p>
+  <p>A general rule when submitting a pull request for a new mixin, ask yourself the following: Do the following browsers <em>only</em> support the CSS3 properties using vendor specific prefixes?</p>
+  <p>If the answer is yes, there is a high chance the mixin will be accepted via a pull request. </p>
+  <ul>
+    <li>Firefox 3.6+</li>
+    <li>Safari 4.0+</li>
+    <li>Chrome 4.0+</li>
+    <li>Opera 10+</li>
+    <li>IE 9+</li>
+  </ul>
+
+  <p><strong>Bourbon does not intend to support IE filters.</strong></p>
+
+  <p>Resources for checking browser support:</p>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/">MDN - Moz Dev Network</a></li>
+    <li><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a></li>
+    <li><a href="http://css-infos.net/properties/webkit.php">Webkit CSS Properties</a></li>
+    <li><a href="http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx">MSDN - Microsoft Dev Network</a></p></li>
+  </ul>
+</section>
+
+<section id="credits">
+  <a href="http://thoughtbot.com"><img src="http://thoughtbot.com/images/tm/logo.png"/></a>
+
+  <h3>Got questions? Need help?</h3>
+  <p>Tweet at <a href="http://twitter.com/phillapier">Phil LaPier</a> on twiiter.</p>
+
+  <h3>Credits</h3>
+  <p>Bourbon is maintained and funded by <a href="http://thoughtbot.com/community">thoughtbot</a>.</p>
+  <p>The names and logos for thoughtbot are trademarks of thoughtbot, inc.</p>
+
+  <h3>License</h3>
+  <p>Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.</p>
+</section>

data/_includes/golden-ratio.html

@@ -0,0 +1,16 @@
+<section id="golden-ratio">
+  <h2>Golden Ratio <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_modular-scale.scss">View Source</a></h2>
+  <p>Returns the golden ratio of a given number. Must provide a pixel or em value for the first argument. Also takes a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3...</p>
+  <p>Note: The golden-ratio function can be wrapped in sass's <code>abs()</code>, <code>floor()</code>, or <code>ceil()</code> functions to get the absolute value, round down, or round up respectively.</p>
+
+{% highlight scss %}
+// Positive number will increment up the golden-ratio
+font-size: golden-ratio(14px,  1);
+// returns: 22.652px
+
+// Negative number will increment down the golden-ratio
+font-size: golden-ratio(14px, -1);
+// returns: 8.653px
+{% endhighlight %}
+  <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
+</section>

data/_includes/grid-width.html

@@ -0,0 +1,15 @@
+<section id="grid-width">
+  <h2>Grid Width <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_grid-width.scss">View source</a></h2>
+  <p>Easily setup and follow a grid based design. Check out <a href="http://gridulator.com/">gridulator.com</a></p>
+  <p>The <code>$gw-column</code> and <code>$gw-gutter</code> variables must be defined in your base stylesheet to properly use the grid-width function.</p>
+
+{% highlight scss %}
+$gw-column: 100px;          // Column Width
+$gw-gutter: 40px;           // Gutter Width
+
+div {
+  width: grid-width(4);     // returns 520px;
+  margin-left: $gw-gutter;  // returns 40px;
+}
+{% endhighlight %}
+</section>

data/_includes/hide-text.html

@@ -0,0 +1,12 @@
+<section id="hide-text">
+  <h2>Hide Text<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_hide-text.scss">View Source</a></h2>
+  <p>Hide-text is an image replacement mixin. It is based off the <a href="https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7">HTML5-Boilerplate image-replacement</a>.</p>
+  <p>This image replacement technique is an alternative to the text-indent technique, which has <a href="http://nicolasgallagher.com/another-css-image-replacement-technique/">performance and other benefits</a>.</p>
+
+{% highlight scss %}
+div {
+  @include hide-text;
+  background-image: url(logo.png);
+}
+{% endhighlight %}
+</section>

data/_includes/html5-input-types.html

@@ -0,0 +1,22 @@
+<section id="html5-input-types">
+  <h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2>
+  <p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
+  <p>Note: You must use interpolation with the variable&mdash;<code>#{}</code>.</p>
+
+{% highlight scss %}
+#{$all-text-inputs} {
+  border: 1px solid green;
+}
+{% endhighlight %}
+
+<h3>CSS Output</h3>
+{% highlight scss %}
+input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
+input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
+input[type="date"],  input[type="datetime"], input[type="datetime-local"],
+input[type="month"], input[type="time"],     input[type="week"] {
+  border: 1px solid green;
+}
+{% endhighlight %}
+
+</section>

data/_includes/inline-block.html

@@ -0,0 +1,8 @@
+<section id="inline-block">
+  <h2>Inline Block <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_inline-block.scss">View source</a></h2>
+  <p>The inline-block mixin provides support for the inline-block property in IE6 and IE7.</p>
+
+{% highlight scss %}
+@include inline-block;
+{% endhighlight %}
+</section>

data/_includes/intro.html

@@ -0,0 +1,5 @@
+<section id="intro">
+  <p>Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required.<br> The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.</p>
+  <p>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.</p>
+  <p><a href="http://github.com/thoughtbot/bourbon#readme">Install Bourbon</a><a href="http://github.com/thoughtbot/bourbon">View on Github</a></p>
+</section>

data/_includes/linear-gradient-function.html

@@ -0,0 +1,21 @@
+<section id="linear-gradient-function">
+  <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_linear-gradient.scss">View source</a></h2>
+  <p>Outputs a linear-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#linear-gradient">linear-gradient mixin</a>.</p>
+
+{% highlight scss %}
+@include background-image(linear-gradient(white 0, yellow 50%, transparent 50%));
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+{% highlight scss %}
+@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
+{% endhighlight %}
+
+  <h3>Demo</h3>
+  <section class="demo">
+  </section>
+</section>

data/_includes/linear-gradient.html

@@ -0,0 +1,24 @@
+<section id="linear-gradient">
+  <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_linear-gradient.scss">View source</a></h2>
+  <p>Gradient Position is optional, default is <code>top</code>. Position can be a degree (<code>90deg</code>). Mixin supports up to 10 color-stops.</p>
+  <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
+
+{% highlight scss %}
+@include linear-gradient(#1e5799, #2989d8);
+@include linear-gradient(top, #8fdce5, #3dc3d1);
+@include linear-gradient(top, #8fdce5, #3dc3d1, $fallback: red);
+@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
+
+{% highlight scss %}
+@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
+{% endhighlight %}
+
+  <h3>Demo</h3>
+  <section class="demo"></section>
+</section>

data/_includes/modular-scale.html

@@ -0,0 +1,20 @@
+<section id="modular-scale">
+  <h2>Modular Scale <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_modular-scale.scss">View Source</a></h2>
+  <p>Returns the modular scale of a given number. Must provide a number value for the first argument. The second argument is a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3... The third value is the ratio number.</p>
+  <p>Note: The function can be wrapped in sass's <code>abs()</code>, <code>floor()</code>, or <code>ceil()</code> functions to get the absolute value, round down, or round up respectively.</p>
+
+{% highlight scss %}
+div {
+ // Increment Up GR with positive value
+ font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+
+ // Increment Down GR with negative value
+ font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+
+ // Can be used with ceil(round up) or floor(round down)
+ font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+ font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+}
+{% endhighlight %}
+  <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
+</section>

data/_includes/navigation.html

@@ -0,0 +1,43 @@
+<nav class="fixed-nav">
+  <ul>
+    <!-- <input type="search" placeholder="Search..."></input> -->
+    <li><a href="https://github.com/thoughtbot/bourbon">Github / Install</a></li>
+    <li class="title"><a href="#mixins"><h3>Mixins</h3></a></li>
+    <li><a href="#animations">Animations</a></li>
+    <li><a href="#appearance">Appearance</a></li>
+    <li><a href="#background-image">Background-image</a></li>
+    <li><a href="#background-size">Background-size</a></li>
+    <li><a href="#border-image">Border-image</a></li>
+    <li><a href="#border-radius">Border-radius</a></li>
+    <li><a href="#box-shadow">Box-shadow</a></li>
+    <li><a href="#box-sizing">Box-sizing</a></li>
+    <li><a href="#columns">Columns</a></li>
+    <li><a href="#flex-box">Flex Box</a></li>
+    <li><a href="#inline-block">Inline-block</a></li>
+    <li><a href="#linear-gradient">Linear-gradient</a></li>
+    <li><a href="#radial-gradient">Radial-gradient</a></li>
+    <li><a href="#transform">Transform</a></li>
+    <li><a href="#transitions">Transitions</a></li>
+    <li><a href="#user-select">User Select</a></li>
+
+    <li class="title"><a href="#functions"><h3>Functions</h3></a><li>
+    <li><a href="#compact">Compact</a></li>
+    <li><a href="#flex-grid">Flex Grid</a></li>
+    <li><a href="#golden-ratio">Golden Ratio</a></li>
+    <li><a href="#grid-width">Grid Width</a></li>
+    <li><a href="#linear-gradient-function">Linear-gradient</a></li>
+    <li><a href="#modular-scale">Modular Scale</a></li>
+    <li><a href="#radial-gradient-function">Radial-gradient</a></li>
+    <li><a href="#tint-shade">Tint &amp; Shade</a></li>
+
+    <li class="title"><a href="#add-ons"><h3>Add-ons</h3></a><li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#clearfix">Clearfix</a></li>
+    <li><a href="#font-family">Font Family</a></li>
+    <li><a href="#hide-text">Hide Text</a></li>
+    <li><a href="#html5-input-types">HTML5 Input Types</a></li>
+    <li><a href="#timing-functions">Timing Functions</a></li>
+
+    <li class="title complete-list"><a href="#complete-list"><h3>Complete List</h3></a><li>
+  </ul>
+</nav>

data/_includes/position.html

@@ -0,0 +1,18 @@
+<section id="position">
+  <h2>Position <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_position.scss">View source</a></h2>
+  <p>Shorthand notation for setting the position of elements in your page.</p>
+  <p>The first parameter is optional, with a default value of relative. The second parameter is a space delimited list of values that follow the standard CSS shorthand notation.</p>
+  <p>Note: unit-less values will be ignored. In the example above, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.</p>
+
+  <p>Instead of writing:</p>
+{% highlight scss %}
+position: relative;
+top: 0px;
+left: 100px;
+{% endhighlight %}
+
+  <p>Your can write:</p>
+{% highlight scss %}
+@include position(relative, 0px 0 0 100px);
+{% endhighlight %}
+</section>

data/_includes/radial-gradient-function.html

@@ -0,0 +1,24 @@
+<section id="radial-gradient-function">
+  <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_radial-gradient.scss">View source</a></h2>
+  <p>Outputs a radial-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#radial-gradient">radial-gradient mixin</a>.</p>
+
+{% highlight scss %}
+@include background-image( radial-gradient(#1e5799, #3dc3d1) );
+@include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
+@include background-image( radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef) );
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+{% highlight scss %}
+@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+{% endhighlight %}
+  <h3>Demo</h3>
+  <section class="demo">
+  </section>
+</section>

data/_includes/radial-gradient.html

@@ -0,0 +1,26 @@
+<section id="radial-gradient">
+  <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_radial-gradient.scss">View source</a></h2>
+  <p>Takes up to 10 gradients. See also the <a href="#background-image">background-image mixin</a>.</p>
+  <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
+
+{% highlight scss %}
+@include radial-gradient(#1e5799, #3dc3d1);
+@include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
+@include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef, $fallback: red);
+{% endhighlight %}
+
+<br>
+<p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
+<br>
+<code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
+
+{% highlight scss %}
+@include radial-gradient(#1e5799, #3dc3d1,
+                         $deprecated-pos1: left center, $deprecated-pos2: left top,
+                         $deprecated-radius1: 50, $deprecated-radius2: 360);
+{% endhighlight %}
+
+  <h3>Demo</h3>
+  <section class="demo">
+  </section>
+</section>

data/_includes/timing-functions.html

@@ -0,0 +1,47 @@
+<section id="timing-functions">
+  <h2>Timing Functions <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_timing-functions.scss">View source</a></h2>
+  <p>These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations and transitions. The provided timing functions are the same as the jQuery UI demo: <a href="http://jqueryui.com/demos/effect/easing.html">easing functions</a>.</p>
+
+{% highlight scss %}
+@include transition(all, 5s, $ease-in-circ);
+{% endhighlight %}
+
+
+  <h3>Demo</h3>
+  <p>Many of the timing functions below may look the same in this demo, but in complex animations, they are intricately different.</p>
+  <section class="demo">
+    <ul>
+      <li><code>$ease-in-quad</code><div class="box ease-in-quad"></div></li>
+      <li><code>$ease-out-quad</code><div class="box ease-in-quad"></div></li>
+      <li><code>$ease-in-out-quad</code><div class="box ease-in-quad"></div></li>
+
+      <li><code>$ease-in-cubic</code><div class="box ease-in-cubic"></div></li>
+      <li><code>$ease-out-cubic</code><div class="box ease-in-cubic"></div></li>
+      <li><code>$ease-in-out-cubic</code><div class="box ease-in-cubic"></div></li>
+
+      <li><code>$ease-in-quart</code><div class="box ease-in-quart"></div></li>
+      <li><code>$ease-out-quart</code><div class="box ease-in-quart"></div></li>
+      <li><code>$ease-in-out-quart</code><div class="box ease-in-quart"></div></li>
+
+      <li><code>$ease-in-quint</code><div class="box ease-in-quint"></div></li>
+      <li><code>$ease-out-quint</code><div class="box ease-in-quint"></div></li>
+      <li><code>$ease-in-out-quint</code><div class="box ease-in-quint"></div></li>
+
+      <li><code>$ease-in-sine</code><div class="box ease-in-sine"></div></li>
+      <li><code>$ease-out-sine</code><div class="box ease-in-sine"></div></li>
+      <li><code>$ease-in-out-sine</code><div class="box ease-in-sine"></div></li>
+
+      <li><code>$ease-in-expo</code><div class="box ease-in-expo"></div></li>
+      <li><code>$ease-out-expo</code><div class="box ease-in-expo"></div></li>
+      <li><code>$ease-in-out-expo</code><div class="box ease-in-expo"></div></li>
+
+      <li><code>$ease-in-circ</code><div class="box ease-in-circ"></div></li>
+      <li><code>$ease-out-circ</code><div class="box ease-in-circ"></div></li>
+      <li><code>$ease-in-out-circ</code><div class="box ease-in-circ"></div></li>
+
+      <li><code>$ease-in-back</code><div class="box ease-in-back"></div></li>
+      <li><code>$ease-out-back</code><div class="box ease-out-back"></div></li>
+      <li><code>$ease-in-out-back</code><div class="box ease-in-out-back"></div></li>
+    <ul>
+  </section>
+</section>

data/_includes/tint-shade.html

@@ -0,0 +1,13 @@
+<section id="tint-shade">
+  <h2>Tint &amp; Shade <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_tint-shade.scss">View source</a></h2>
+  <p>Tint and Shade are different from <code>lighten()</code> and <code>darken()</code> functions that are built into sass.</p>
+  <p>Tint is a mix of color with white.<br>
+     Shade is a mix of color with black.<br>
+     Both take a color and a percent argument.</p>
+
+{% highlight scss %}
+background: tint(red, 40%);
+background: shade(blue, 60%);
+{% endhighlight %}
+
+</section>

data/_includes/transform-origin.html

@@ -0,0 +1,8 @@
+<section id="transform-origin">
+  <h2>Transform Origin</h2>
+
+{% highlight scss %}
+@include transform-origin(center top);
+{% endhighlight %}
+
+</section>

data/_includes/transform.html

@@ -0,0 +1,10 @@
+<section id="transform">
+  <h2>Transform &amp; Transform-origin <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transform.scss">View source</a></h2>
+
+{% highlight scss %}
+@include transform(translateY(50px));
+
+@include transform-origin(center top);
+{% endhighlight %}
+
+</section>

data/_includes/transitions.html

@@ -0,0 +1,9 @@
+<section id="transitions">
+  <h2>Transitions <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transition.scss">View source</a></h2>
+  <p>Shorthand mixin: Supports multiple parentheses-delimited values for each variable.</p>
+
+{% highlight scss %}
+@include transition (all 2.0s ease-in-out);
+@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
+{% endhighlight %}
+</section>

data/_includes/user-select.html

@@ -0,0 +1,8 @@
+<section id="user-select">
+  <h2>User-select <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_user-select.scss">View source</a></h2>
+  <p>Controls the appearance (only) of selection.  This does not have any affect on actual selection operation.</p>
+
+{% highlight scss %}
+@include user-select(none);
+{% endhighlight %}
+</section>