Browse files

Remove jekyll resources from master

  • Loading branch information...
1 parent 64a1bcd commit c119a24d1a87542dc09766368f75efe2d1b98af4 Phil LaPier committed May 25, 2012
Showing with 0 additions and 5,199 deletions.
  1. +0 −42 _config.yml
  2. +0 −20 _includes/animation.html
  3. +0 −8 _includes/appearance.html
  4. +0 −36 _includes/background-image.html
  5. +0 −12 _includes/background-size.html
  6. +0 −11 _includes/border-image.html
  7. +0 −26 _includes/border-radius.html
  8. +0 −20 _includes/box-shadow.html
  9. +0 −8 _includes/box-sizing.html
  10. +0 −52 _includes/buttons.html
  11. +0 −11 _includes/clearfix.html
  12. +0 −9 _includes/columns.html
  13. +0 −9 _includes/compact.html
  14. +0 −115 _includes/complete-list.html
  15. +0 −23 _includes/flex-box.html
  16. +0 −28 _includes/flex-grid.html
  17. +0 −21 _includes/font-family.html
  18. +0 −37 _includes/footer.html
  19. +0 −16 _includes/golden-ratio.html
  20. +0 −15 _includes/grid-width.html
  21. +0 −12 _includes/hide-text.html
  22. +0 −22 _includes/html5-input-types.html
  23. +0 −8 _includes/inline-block.html
  24. +0 −5 _includes/intro.html
  25. +0 −21 _includes/linear-gradient-function.html
  26. +0 −24 _includes/linear-gradient.html
  27. +0 −20 _includes/modular-scale.html
  28. +0 −43 _includes/navigation.html
  29. +0 −18 _includes/position.html
  30. +0 −24 _includes/radial-gradient-function.html
  31. +0 −26 _includes/radial-gradient.html
  32. +0 −47 _includes/timing-functions.html
  33. +0 −13 _includes/tint-shade.html
  34. +0 −8 _includes/transform-origin.html
  35. +0 −10 _includes/transform.html
  36. +0 −9 _includes/transitions.html
  37. +0 −8 _includes/user-select.html
  38. BIN _site/images/border.png
  39. BIN _site/images/bourbon-logo.png
  40. +0 −890 _site/index.html
  41. +0 −1,226 _site/stylesheets/style.css
  42. +0 −36 doc/README.md
  43. BIN images/border.png
  44. BIN images/bourbon-logo.png
  45. +0 −80 index.html
  46. +0 −31 stylesheets/sass/_animation-keyframes.scss
  47. +0 −304 stylesheets/sass/_base.scss
  48. +0 −198 stylesheets/sass/_demos.scss
  49. +0 −21 stylesheets/sass/_mixins.scss
  50. +0 −264 stylesheets/sass/_normalize.scss
  51. +0 −38 stylesheets/sass/_pygments-theme-dark.scss
  52. +0 −37 stylesheets/sass/_pygments-theme-light.scss
  53. +0 −1 stylesheets/sass/bourbon
  54. +0 −10 stylesheets/sass/style.scss
  55. +0 −1,226 stylesheets/style.css
View
42 _config.yml
@@ -1,42 +0,0 @@
-safe: false
-auto: true
-server: false
-server_port: 4000
-base-url: /
-
-source: .
-destination: ./_site
-plugins: ./_plugins
-exclude: ./app, ./doc, ./bourbon, ./demo, ./lib, sass, ./bourbon.gemspec, ./Gemfile, ./Gemfile.lock, ./generate-bourbon.sh, ./LICENSE, ./Rakefile, ./readme.md, ./features
-
-future: true
-lsi: false
-pygments: true
-markdown: maruku
-permalink: date
-
-maruku:
- use_tex: false
- use_divs: false
- png_engine: blahtex
- png_dir: images/latex
- png_url: /images/latex
-
-rdiscount:
- extensions: []
-
-kramdown:
- auto_ids: true,
- footnote_nr: 1
- entity_output: as_char
- toc_levels: 1..6
- use_coderay: false
-
- coderay:
- coderay_wrap: div
- coderay_line_numbers: inline
- coderay_line_numbers_start: 1
- coderay_tab_width: 4
- coderay_bold_every: 10
- coderay_css: style
-
View
20 _includes/animation.html
@@ -1,20 +0,0 @@
-<section id="animations">
- <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
- <p>The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.</p>
-
-{% highlight scss %}
-box:hover {
- @include animation-name(scale, slide);
- @include animation-duration(2s);
- @include animation-timing-function(ease);
- @include animation-iteration-count(infinite);
-
- // Animation shorthand works the same as the CSS3 animation shorthand
- @include animation(scale 1.0s ease-in, slide 2.0s ease);
-}
-{% endhighlight %}
- <h3>Demo</h3>
- <section class="demo">
- <div id="run-demo" class="box"></div>
- </section>
-</section>
View
8 _includes/appearance.html
@@ -1,8 +0,0 @@
-<section id="appearance">
- <h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
- <p>The <code>appearance</code> CSS property is used to display an element using a platform-native styling based on the operating system's theme.</p>
-
-{% highlight scss %}
-@include appearance(none);
-{% endhighlight %}
-</section>
View
36 _includes/background-image.html
@@ -1,36 +0,0 @@
-<section id="background-image">
- <h2>Background Image <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-image.scss">View source</a></h2>
- <p>The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.</p>
- <p>Use in combination with the <a href="#linear-gradient-function">linear-gradient function</a> and the <a href="#radial-gradient-function">radial-gradient function</a>.
-
-{% highlight scss %}
-// 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 - Demo
-@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%)));
-
-// NOT SUPPORTED - Multiple image assets with shorthand notation
-@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
-{% endhighlight %}
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-
-<h3>Note about shorthand notation</h3>
-
-<p>All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:</p>
-
-{% highlight scss %}
-@include background-image(url("/images/a.png"), url("images/b.png"));
-background-position: center top, center;
-background-repeat: no-repeat, repeat-x;
-{% endhighlight %}
-
-</section>
-
View
12 _includes/background-size.html
@@ -1,12 +0,0 @@
-<section id="background-size">
- <h2>Background Size<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-size.scss">View source</a></h2>
- <p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
-
-{% highlight scss %}
-@include background-size(50% 100%); // Single
-@include background-size(50% 100%, 75% 100%); // Multiple
-{% endhighlight %}
-</section>
-
-
-
View
11 _includes/border-image.html
@@ -1,11 +0,0 @@
-<section id="border-image">
- <h2>Border Image<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss">View source</a></h2>
- <p>Border-image supports short-hand notation.</p>
-
-{% highlight scss %}
-@include border-image(url(/images/border.png) 27 repeat);
-{% endhighlight %}
- <h3>Demo</h3>
- <section class="demo">
- </section>
-</section>
View
26 _includes/border-radius.html
@@ -1,26 +0,0 @@
-<section id="border-radius">
- <h2>Border Radius <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss">View source</a></h2>
-
- <p>The border-radius mixin can take short-hand notation or the full radius expression.</p>
-
-{% highlight scss %}
-@include border-radius(10px);
-@include border-radius(5px 5px 2px 2px);
-{% endhighlight %}
-
- <p>You can also specify individual corners.</p>
-{% highlight scss %}
-@include border-top-left-radius(5px);
-@include border-top-right-radius(5px);
-@include border-bottom-right-radius(5px);
-@include border-bottom-left-radius(5px);
-{% endhighlight %}
-
- <p>Individual sides are supported as well.</p>
-{% highlight scss %}
-@include border-top-radius(5px);
-@include border-bottom-radius(5px);
-@include border-left-radius(5px);
-@include border-right-radius(5px);
-{% endhighlight %}
-</section>
View
20 _includes/box-shadow.html
@@ -1,20 +0,0 @@
-<section id="box-shadow">
- <h2>Box Shadow<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-shadow.scss">View source</a></h2>
- <p>Box-shadow supports single or multiple arguments.</p>
-
- <h3>Single Box Shadow</h3>
-{% highlight scss %}
-@include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));
-{% endhighlight %}
- <section class="demo">
- <div class="example single"></div>
- </section>
-
- <h3>Multiple Box Shadows</h3>
-{% highlight scss %}
-@include box-shadow(1px 1px 5px 1px green, -1px -1px 5px 1px blue);
-{% endhighlight %}
- <section class="demo">
- <div class="example double"></div>
- </section>
-</section>
View
8 _includes/box-sizing.html
@@ -1,8 +0,0 @@
-<section id="box-sizing">
- <h2>Box Sizing<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-sizing.scss">View source</a></h2>
- <p>Box-sizing will change the box-model of the element it is applied to.</p>
-
-{% highlight scss %}
-@include box-sizing(border-box);
-{% endhighlight %}
-</section>
View
52 _includes/buttons.html
@@ -1,52 +0,0 @@
-<section id="buttons">
- <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
- <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
- <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
- <ul>
- <li>
- <code>simple</code> (default)
- </li>
- <li>
- <code>shiny</code>
- </li>
- <li>
- <code>pill</code>
- </li>
- </ul>
-
- <section class="demo">
- <div class="wrapper">
- <h3>Simple Button Style</h3>
- <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
-{% highlight scss %}
-button {
- @include button;
-}
-{% endhighlight %}
- <button class="example-1">Simple button</button>
- </div>
-
- <div class="wrapper">
- <h3>Pill Button Style</h3>
-{% highlight scss %}
-button {
- @include button(pill);
-}
-{% endhighlight %}
- <button class="example-2">Pill Button</button>
- </div>
-
- <div class="wrapper">
- <h3>Shiny Button Style</h3>
- <p>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.</p>
-
-{% highlight scss %}
-button {
- @include button(shiny, #ff0000);
-}
-{% endhighlight %}
- <button class="example-3">Shiny Button</button>
- </div>
- </section>
-
-</section>
View
11 _includes/clearfix.html
@@ -1,11 +0,0 @@
-<section id="clearfix">
- <h2>Clearfix <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix.scss">View source</a></h2>
- <p>This mixin will output a clearfix to the selector where the mixin is declared.</p>
- <p>This clearfix uses Nicolas Gallagher's <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a>.</p>
-
-{% highlight scss %}
-div {
- @include clearfix;
-}
-{% endhighlight %}
-</section>
View
9 _includes/columns.html
@@ -1,9 +0,0 @@
-<section id="columns">
- <h2>Columns <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_columns.scss">View source</a></h2>
- <p>All current CSS3 column properties are supported. See the <a href="#complete-list-mixins">complete list of mixins</a> for more info.</p>
-
-{% highlight scss %}
-@include columns(12 8em);
-@include column-rule(1px solid green);
-{% endhighlight %}
-</section>
View
9 _includes/compact.html
@@ -1,9 +0,0 @@
-<section id="compact">
- <h2>Compact <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/lib/bourbon/sass_extensions/functions/compact.rb">View Source</a></h2>
- <p>The compact function will strip out any value from a list that is <code>false</code>. Takes up to 10 arguments.
-
-{% highlight scss %}
-$full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
-{% endhighlight %}
-
-</section>
View
115 _includes/complete-list.html
@@ -1,115 +0,0 @@
-<section id="complete-list">
- <h2>All Supported Functions, Mixins, and Addons</h2>
- <p><code>@</code> denotes a mixin and must be prefaced with <code>@include</code>.</p>
-
-<h3 id="complete-list-mixins">Mixins</h3>
-{% highlight scss %}
-animation
- @ animation(*args)
- @ animation-delay(*args)
- @ animation-direction(*args)
- @ animation-duration(*args)
- @ animation-fill-mode(*args)
- @ animation-iteration-count(*args)
- @ animation-name(*args)
- @ animation-play-state(*args)
- @ animation-timing-function(*args)
-
-@ appearance(*args)
-@ background-image(*args)
-@ background-size(*args)
-@ border-image(*args)
-
-border-radius
- @ border-radius(*args)
- @ border-top-radius(*args)
- @ border-top-left-radius(*args)
- @ border-top-right-radius(*args)
- @ border-bottom-radius(*args)
- @ border-bottom-left-radius(*args)
- @ border-bottom-right-radius(*args)
- @ border-left-radius(*args)
- @ border-right-radius(*args)
-
-@ box-shadow(*args)
-@ box-sizing(*args)
-
-columns
- @columns(*args)
- @column-count(*args)
- @column-fill(*args)
- @column-gap(*args)
- @column-rule(*args)
- @column-rule-color(*args)
- @column-rule-style(*args)
- @column-rule-width(*args)
- @column-span(*args)
- @column-width(*args)
-
-flex-box
- @ box(*args)
- @ box-align(*args)
- @ box-direction(*args)
- @ box-flex(*args)
- @ box-flex-group(*args)
- @ box-lines(*args)
- @ box-ordinal-group(*args)
- @ box-orient(*args)
- @ box-pack(*args)
- @ display-box
-
-@ inline-block
-@ linear-gradient(*args)
-@ radial-gradient(*args)
-
-transform
- @ transform(*args)
- @ transform-origin(*args)
-
-transition
- @ transition(*args)
- @ transition-delay(*args)
- @ transition-duration(*args)
- @ transition-property(*args)
- @ transition-timing-function(*args)
-
-@ user-select
-{% endhighlight %}
-
-<h3 id="complete-list-functions">Functions</h3>
-{% highlight scss %}
-compact(*args)
-flex-grid(*args)
-golden-ratio(*args)
-grid-width(*args)
-linear-gradient(*args)
-modular-scale(*args)
-radial-gradient(*args)
-shade(*args)
-tint(*args)
-{% endhighlight %}
-
-<h3 id="complete-list-addons">Addons</h3>
-{% highlight scss %}
-@ button(*args)
-@ clearfix
-@ hide-text
-
-HTML5 Inputs
- #{$all-text-inputs}
-
-font-family
- $georgia
- $helvetica
- $lucida-grande
- $monospace
- $verdana
-
-timing-functions
- $ease-in-*
- $ease-out-*
- $ease-in-out-*
- * = quad, cubic, quart, quint, sine, expo, circ, back
-{% endhighlight %}
-
-</section>
View
23 _includes/flex-box.html
@@ -1,23 +0,0 @@
-<section id="flex-box">
- <h2>Flex Box <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss">View source</a></h2>
- <p>The flex-box mixin is based on the 2009 w3c spec. <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">More info</a></p>
-
-{% highlight scss %}
-div.parent {
- @include display-box;
- @include box-align(start);
- @include box-orient(horizontal);
- @include box-pack(start);
-}
-
-div.parent > div.child {
- @include box-flex(2);
-}
-
-// Alternative custom shorthand mixin.
-div.parent {
- @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
- @include box(vertical, start, stretch);
-}
-{% endhighlight %}
-</section>
View
28 _includes/flex-grid.html
@@ -1,28 +0,0 @@
-<section id="flex-grid">
- <h2>Flex Grid <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss">View source</a></h2>
- <p>Use this mixin to easily create a flexible-grid layout.</p>
- <p>The <code>$fg-column</code>, <code>$fg-gutter</code> and <code>$fg-max-columns</code> variables must be defined in your base stylesheet to properly use the flex-grid function.</p>
- <p>This function takes the fluid grid equation (target / context = result) and uses columns to help define each.</p>
-
-{% highlight scss %}
-$fg-column: 60px; // Column Width
-$fg-gutter: 25px; // Gutter Width
-$fg-max-columns: 12; // Total Columns For Main Container
-
-div {
- width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
- margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
-
- p {
- width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
- float: left;
- margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
- }
-
- blockquote {
- float: left;
- width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
- }
-}
-{% endhighlight %}
-</section>
View
21 _includes/font-family.html
@@ -1,21 +0,0 @@
-<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>
View
37 _includes/footer.html
@@ -1,37 +0,0 @@
-<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>
View
16 _includes/golden-ratio.html
@@ -1,16 +0,0 @@
-<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>
View
15 _includes/grid-width.html
@@ -1,15 +0,0 @@
-<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>
View
12 _includes/hide-text.html
@@ -1,12 +0,0 @@
-<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>
View
22 _includes/html5-input-types.html
@@ -1,22 +0,0 @@
-<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>
View
8 _includes/inline-block.html
@@ -1,8 +0,0 @@
-<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>
View
5 _includes/intro.html
@@ -1,5 +0,0 @@
-<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>
View
21 _includes/linear-gradient-function.html
@@ -1,21 +0,0 @@
-<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>
View
24 _includes/linear-gradient.html
@@ -1,24 +0,0 @@
-<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>
View
20 _includes/modular-scale.html
@@ -1,20 +0,0 @@
-<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>
View
43 _includes/navigation.html
@@ -1,43 +0,0 @@
-<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>
View
18 _includes/position.html
@@ -1,18 +0,0 @@
-<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>
View
24 _includes/radial-gradient-function.html
@@ -1,24 +0,0 @@
-<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>
View
26 _includes/radial-gradient.html
@@ -1,26 +0,0 @@
-<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>
View
47 _includes/timing-functions.html
@@ -1,47 +0,0 @@
-<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>
View
13 _includes/tint-shade.html
@@ -1,13 +0,0 @@
-<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>
View
8 _includes/transform-origin.html
@@ -1,8 +0,0 @@
-<section id="transform-origin">
- <h2>Transform Origin</h2>
-
-{% highlight scss %}
-@include transform-origin(center top);
-{% endhighlight %}
-
-</section>
View
10 _includes/transform.html
@@ -1,10 +0,0 @@
-<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>
View
9 _includes/transitions.html
@@ -1,9 +0,0 @@
-<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>
View
8 _includes/user-select.html
@@ -1,8 +0,0 @@
-<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>
View
BIN _site/images/border.png
Deleted file not rendered
View
BIN _site/images/bourbon-logo.png
Deleted file not rendered
View
890 _site/index.html
@@ -1,890 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Bourbon Sass Mixins Library</title>
- <link rel="stylesheet" href="stylesheets/style.css">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
- </head>
- <body>
- <div class="main-content">
- <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>
-
-
- <div class="main-inner">
- <section class="intro-wrapper">
- <h1 class="logo">Bourbon &ndash; Sass Mixin Library</h1>
- <h2 class="tagline">A simple and lightweight mixin library for Sass.</h2>
-
- <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>
-
- </section>
-
- <section class="mixins">
- <h1 id="mixins">Mixins</h1>
- <section id="animations">
- <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
- <p>The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">box</span><span class="nd">:hover</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> animation-name</span><span class="p">(</span><span class="n">scale</span><span class="o">,</span> <span class="n">slide</span><span class="p">);</span>
- <span class="k">@include</span><span class="nd"> animation-duration</span><span class="p">(</span><span class="mi">2</span><span class="kt">s</span><span class="p">);</span>
- <span class="k">@include</span><span class="nd"> animation-timing-function</span><span class="p">(</span><span class="n">ease</span><span class="p">);</span>
- <span class="k">@include</span><span class="nd"> animation-iteration-count</span><span class="p">(</span><span class="n">infinite</span><span class="p">);</span>
-
- <span class="c1">// Animation shorthand works the same as the CSS3 animation shorthand</span>
- <span class="k">@include</span><span class="nd"> animation</span><span class="p">(</span><span class="n">scale</span> <span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span><span class="o">,</span> <span class="n">slide</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease</span><span class="p">);</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
- <h3>Demo</h3>
- <section class="demo">
- <div id="run-demo" class="box"></div>
- </section>
-</section>
-
- <section id="appearance">
- <h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
- <p>The <code>appearance</code> CSS property is used to display an element using a platform-native styling based on the operating system's theme.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> appearance</span><span class="p">(</span><span class="no">none</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- <section id="background-image">
- <h2>Background Image <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-image.scss">View source</a></h2>
- <p>The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.</p>
- <p>Use in combination with the <a href="#linear-gradient-function">linear-gradient function</a> and the <a href="#radial-gradient-function">radial-gradient function</a>.
-
-<div class="highlight"><pre><code class="scss"><span class="c1">// Multiple image assets</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span><span class="p">);</span>
-
-<span class="c1">// Image asset with a linear-gradient</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nb">white</span> <span class="mi">0</span><span class="o">,</span> <span class="nb">yellow</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">));</span>
-
-<span class="c1">// Multiple linear-gradients - Demo</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.25</span><span class="p">)</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.08</span><span class="p">)</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span>
- <span class="nf">linear-gradient</span><span class="p">(</span><span class="mh">#4e7ba3</span><span class="o">,</span> <span class="nf">darken</span><span class="p">(</span><span class="mh">#4e7ba4</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">)));</span>
-
-<span class="c1">// NOT SUPPORTED - Multiple image assets with shorthand notation</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span> <span class="no">center</span> <span class="no">no-repeat</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span> <span class="no">left</span> <span class="no">repeat</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-
-<h3>Note about shorthand notation</h3>
-
-<p>All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span><span class="p">);</span>
-<span class="na">background-position</span><span class="o">:</span> <span class="no">center</span> <span class="no">top</span><span class="o">,</span> <span class="no">center</span><span class="p">;</span>
-<span class="na">background-repeat</span><span class="o">:</span> <span class="no">no-repeat</span><span class="o">,</span> <span class="no">repeat-x</span><span class="p">;</span>
-</code></pre>
-</div>
-
-
-</section>
-
-
- <section id="background-size">
- <h2>Background Size<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-size.scss">View source</a></h2>
- <p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-size</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span> <span class="c1">// Single</span>
-<span class="k">@include</span><span class="nd"> background-size</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">75</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span> <span class="c1">// Multiple</span>
-</code></pre>
-</div>
-
-</section>
-
-
-
-
- <section id="border-image">
- <h2>Border Image<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss">View source</a></h2>
- <p>Border-image supports short-hand notation.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-image</span><span class="p">(</span><span class="sx">url(/images/border.png)</span> <span class="mi">27</span> <span class="no">repeat</span><span class="p">);</span>
-</code></pre>
-</div>
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-</section>
-
- <section id="border-radius">
- <h2>Border Radius <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss">View source</a></h2>
-
- <p>The border-radius mixin can take short-hand notation or the full radius expression.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">10</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <p>You can also specify individual corners.</p>
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-top-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-top-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-bottom-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-bottom-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <p>Individual sides are supported as well.</p>
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-top-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-bottom-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> border-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- <section id="box-shadow">
- <h2>Box Shadow<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-shadow.scss">View source</a></h2>
- <p>Box-shadow supports single or multiple arguments.</p>
-
- <h3>Single Box Shadow</h3>
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="mi">0</span> <span class="mi">0</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">3</span><span class="kt">px</span> <span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.65</span><span class="p">));</span>
-</code></pre>
-</div>
-
- <section class="demo">
- <div class="example single"></div>
- </section>
-
- <h3>Multiple Box Shadows</h3>
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="nb">green</span><span class="o">,</span> <span class="mi">-1</span><span class="kt">px</span> <span class="mi">-1</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="nb">blue</span><span class="p">);</span>
-</code></pre>
-</div>
-
- <section class="demo">
- <div class="example double"></div>
- </section>
-</section>
-
- <section id="box-sizing">
- <h2>Box Sizing<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-sizing.scss">View source</a></h2>
- <p>Box-sizing will change the box-model of the element it is applied to.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-sizing</span><span class="p">(</span><span class="no">border</span><span class="o">-</span><span class="n">box</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- <section id="columns">
- <h2>Columns <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_columns.scss">View source</a></h2>
- <p>All current CSS3 column properties are supported. See the <a href="#complete-list-mixins">complete list of mixins</a> for more info.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> columns</span><span class="p">(</span><span class="mi">12</span> <span class="mi">8</span><span class="kt">em</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> column-rule</span><span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nb">green</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- <section id="flex-box">
- <h2>Flex Box <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss">View source</a></h2>
- <p>The flex-box mixin is based on the 2009 w3c spec. <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">More info</a></p>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">div</span><span class="nc">.parent</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> display-box</span><span class="p">;</span>
- <span class="k">@include</span><span class="nd"> box-align</span><span class="p">(</span><span class="n">start</span><span class="p">);</span>
- <span class="k">@include</span><span class="nd"> box-orient</span><span class="p">(</span><span class="n">horizontal</span><span class="p">);</span>
- <span class="k">@include</span><span class="nd"> box-pack</span><span class="p">(</span><span class="n">start</span><span class="p">);</span>
-<span class="p">}</span>
-
-<span class="nt">div</span><span class="nc">.parent</span> <span class="o">&gt;</span> <span class="nt">div</span><span class="nc">.child</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> box-flex</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
-<span class="p">}</span>
-
-<span class="c1">// Alternative custom shorthand mixin.</span>
-<span class="nt">div</span><span class="nc">.parent</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> box</span><span class="p">(</span><span class="nv">$orient</span><span class="o">:</span> <span class="n">horizontal</span><span class="o">,</span> <span class="nv">$pack</span><span class="o">:</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$align</span><span class="o">:</span> <span class="n">stretch</span><span class="p">);</span> <span class="c1">// defaults</span>
- <span class="k">@include</span><span class="nd"> box</span><span class="p">(</span><span class="n">vertical</span><span class="o">,</span> <span class="n">start</span><span class="o">,</span> <span class="n">stretch</span><span class="p">);</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> inline-block</span><span class="p">;</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#2989d8</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="no">top</span><span class="o">,</span> <span class="mh">#8fdce5</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="no">top</span><span class="o">,</span> <span class="mh">#8fdce5</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$fallback</span><span class="o">:</span> <span class="nb">red</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">deg</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#2989d8</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#207cca</span> <span class="mi">51</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#7db9e8</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
-<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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <h3>Demo</h3>
- <section class="demo"></section>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="o">,</span> <span class="nv">$fallback</span><span class="o">:</span> <span class="nb">red</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
-<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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
- <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
- <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transform</span><span class="p">(</span><span class="nf">translateY</span><span class="p">(</span><span class="mi">50</span><span class="kt">px</span><span class="p">));</span>
-
-<span class="k">@include</span><span class="nd"> transform-origin</span><span class="p">(</span><span class="no">center</span> <span class="no">top</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="n">all</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">);</span>
-<span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="no">opacity</span> <span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">0</span><span class="kt">s</span><span class="o">,</span> <span class="no">width</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">2</span><span class="kt">s</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> user-select</span><span class="p">(</span><span class="no">none</span><span class="p">);</span>
-</code></pre>
-</div>
-
-</section>
-
- </section>
-
- <section ckass="functions">
- <h1 id="functions">Functions</h1>
- <section id="compact">
- <h2>Compact <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/lib/bourbon/sass_extensions/functions/compact.rb">View Source</a></h2>
- <p>The compact function will strip out any value from a list that is <code>false</code>. Takes up to 10 arguments.
-
-<div class="highlight"><pre><code class="scss"><span class="nv">$full</span><span class="o">:</span> <span class="nf">compact</span><span class="p">(</span><span class="nv">$name-1</span><span class="o">,</span> <span class="nv">$name-2</span><span class="o">,</span> <span class="nv">$name-3</span><span class="o">,</span> <span class="nv">$name-4</span><span class="o">,</span> <span class="nv">$name-5</span><span class="o">,</span> <span class="nv">$name-6</span><span class="o">,</span> <span class="nv">$name-7</span><span class="o">,</span> <span class="nv">$name-8</span><span class="o">,</span> <span class="nv">$name-9</span><span class="o">,</span> <span class="nv">$name-10</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
-</section>
-
- <section id="flex-grid">
- <h2>Flex Grid <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss">View source</a></h2>
- <p>Use this mixin to easily create a flexible-grid layout.</p>
- <p>The <code>$fg-column</code>, <code>$fg-gutter</code> and <code>$fg-max-columns</code> variables must be defined in your base stylesheet to properly use the flex-grid function.</p>
- <p>This function takes the fluid grid equation (target / context = result) and uses columns to help define each.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="na">$fg-column</span><span class="o">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Column Width</span>
-<span class="na">$fg-gutter</span><span class="o">:</span> <span class="mi">25</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Gutter Width</span>
-<span class="na">$fg-max-columns</span><span class="o">:</span> <span class="mi">12</span><span class="p">;</span> <span class="c1">// Total Columns For Main Container</span>
-
-<span class="nt">div</span> <span class="p">{</span>
- <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (315px / 1020px) = 30.882353%;</span>
- <span class="na">margin-left</span><span class="o">:</span> <span class="nf">flex-gutter</span><span class="p">();</span> <span class="c1">// returns (25px / 1020px) = 2.45098%;</span>
-
- <span class="nt">p</span> <span class="p">{</span>
- <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">2</span><span class="o">,</span> <span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (145px / 315px) = 46.031746%;</span>
- <span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
- <span class="na">margin</span><span class="o">:</span> <span class="nf">flex-gutter</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (25px / 315px) = 7.936508%;</span>
- <span class="p">}</span>
-
- <span class="nt">blockquote</span> <span class="p">{</span>
- <span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
- <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">2</span><span class="o">,</span> <span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (145px / 315px) = 46.031746%;</span>
- <span class="p">}</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="c1">// Positive number will increment up the golden-ratio</span>
-<span class="na">font-size</span><span class="o">:</span> <span class="nf">golden-ratio</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="p">);</span>
-<span class="c1">// returns: 22.652px</span>
-
-<span class="c1">// Negative number will increment down the golden-ratio</span>
-<span class="na">font-size</span><span class="o">:</span> <span class="nf">golden-ratio</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">-1</span><span class="p">);</span>
-<span class="c1">// returns: 8.653px</span>
-</code></pre>
-</div>
-
- <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="na">$gw-column</span><span class="o">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Column Width</span>
-<span class="na">$gw-gutter</span><span class="o">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Gutter Width</span>
-
-<span class="nt">div</span> <span class="p">{</span>
- <span class="na">width</span><span class="o">:</span> <span class="nf">grid-width</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns 520px;</span>
- <span class="na">margin-left</span><span class="o">:</span> <span class="nv">$gw-gutter</span><span class="p">;</span> <span class="c1">// returns 40px;</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nb">white</span> <span class="mi">0</span><span class="o">,</span> <span class="nb">yellow</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">));</span>
-</code></pre>
-</div>
-
-
-<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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
- <span class="c1">// Increment Up GR with positive value</span>
- <span class="na">font-size</span><span class="o">:</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">);</span> <span class="c1">// returns: 22.652px</span>
-
- <span class="c1">// Increment Down GR with negative value</span>
- <span class="na">font-size</span><span class="o">:</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">-1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">);</span> <span class="c1">// returns: 8.653px</span>
-
- <span class="c1">// Can be used with ceil(round up) or floor(round down)</span>
- <span class="na">font-size</span><span class="o">:</span> <span class="nf">floor</span><span class="p">(</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">)</span> <span class="p">);</span> <span class="c1">// returns: 22px</span>
- <span class="na">font-size</span><span class="o">:</span> <span class="nf">ceil</span><span class="p">(</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">)</span> <span class="p">);</span> <span class="c1">// returns: 23px</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
- <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> backgorund-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
-<span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">)</span> <span class="p">);</span>
-</code></pre>
-</div>
-
-
-<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>
-
-<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
- <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
- <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
-</code></pre>
-</div>
-
- <h3>Demo</h3>
- <section class="demo">
- </section>
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="na">background</span><span class="o">:</span> <span class="nf">tint</span><span class="p">(</span><span class="nb">red</span><span class="o">,</span> <span class="mi">40</span><span class="kt">%</span><span class="p">);</span>
-<span class="na">background</span><span class="o">:</span> <span class="nf">shade</span><span class="p">(</span><span class="nb">blue</span><span class="o">,</span> <span class="mi">60</span><span class="kt">%</span><span class="p">);</span>
-</code></pre>
-</div>
-
-
-</section>
-
- </section>
-
- <section class="addons">
- <h1 id="add-ons">Add-ons</h1>
- <section id="buttons">
- <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
- <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
- <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
- <ul>
- <li>
- <code>simple</code> (default)
- </li>
- <li>
- <code>shiny</code>
- </li>
- <li>
- <code>pill</code>
- </li>
- </ul>
-
- <section class="demo">
- <div class="wrapper">
- <h3>Simple Button Style</h3>
- <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
-<div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> button</span><span class="p">;</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
- <button class="example-1">Simple button</button>
- </div>
-
- <div class="wrapper">
- <h3>Pill Button Style</h3>
-<div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> button</span><span class="p">(</span><span class="n">pill</span><span class="p">);</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
- <button class="example-2">Pill Button</button>
- </div>
-
- <div class="wrapper">
- <h3>Shiny Button Style</h3>
- <p>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.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> button</span><span class="p">(</span><span class="n">shiny</span><span class="o">,</span> <span class="mh">#ff0000</span><span class="p">);</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
- <button class="example-3">Shiny Button</button>
- </div>
- </section>
-
-</section>
-
- <section id="clearfix">
- <h2>Clearfix <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix.scss">View source</a></h2>
- <p>This mixin will output a clearfix to the selector where the mixin is declared.</p>
- <p>This clearfix uses Nicolas Gallagher's <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a>.</p>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> clearfix</span><span class="p">;</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="na">font-family</span><span class="o">:</span> <span class="nv">$helvetica</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="nv">$georgia</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="nv">$lucida-grande</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="nv">$monospace</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="nv">$verdana</span><span class="p">;</span>
-</code></pre>
-</div>
-
-
- <h3>CSS Output</h3>
-<div class="highlight"><pre><code class="scss"><span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Helvetica Neue&quot;</span><span class="o">,</span> <span class="n">Helvetica</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="n">Georgia</span><span class="o">,</span> <span class="n">Cambria</span><span class="o">,</span> <span class="s2">&quot;Times New Roman&quot;</span><span class="o">,</span> <span class="n">Times</span><span class="o">,</span> <span class="no">serif</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Lucida Grande&quot;</span><span class="o">,</span> <span class="n">Tahoma</span><span class="o">,</span> <span class="n">Verdana</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Bitstream Vera Sans Mono&quot;</span><span class="o">,</span> <span class="n">Consolas</span><span class="o">,</span> <span class="n">Courier</span><span class="o">,</span> <span class="no">monospace</span><span class="p">;</span>
-<span class="na">font-family</span><span class="o">:</span> <span class="n">Verdana</span><span class="o">,</span> <span class="n">Geneva</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
- <span class="k">@include</span><span class="nd"> hide-text</span><span class="p">;</span>
- <span class="na">background-image</span><span class="o">:</span> <span class="sx">url(logo.png)</span><span class="p">;</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-</section>
-
- <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>
-
-<div class="highlight"><pre><code class="scss"><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">all-text-inputs</span><span class="p">}</span> <span class="p">{</span>
- <span class="na">border</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nb">green</span><span class="p">;</span>
-<span class="p">}</span>
-</code></pre>
-</div>
-
-
-<h3>CSS Output</h3>
-<div class="highlight"><pre><code class="scss"><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;email&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;number&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;search&quot;</span><span class="o">],</span>
-<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;tel&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;url&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;color&quot;</span><span class="o">],</span>
-<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;date&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span