bourbon 2.0.0.rc1 → 2.1.0

data/_config.yml

@@ -0,0 +1,42 @@
+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
+

data/_includes/animation.html

@@ -0,0 +1,20 @@
+<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>

data/_includes/appearance.html

@@ -0,0 +1,8 @@
+<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>

data/_includes/background-image.html

@@ -0,0 +1,36 @@
+<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>
+

data/_includes/background-size.html

@@ -0,0 +1,12 @@
+<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>
+
+
+

data/_includes/border-image.html

@@ -0,0 +1,11 @@
+<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>

data/_includes/border-radius.html

@@ -0,0 +1,26 @@
+<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>

data/_includes/box-shadow.html

@@ -0,0 +1,20 @@
+<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>

data/_includes/box-sizing.html

@@ -0,0 +1,8 @@
+<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>

data/_includes/buttons.html

@@ -0,0 +1,52 @@
+<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>

data/_includes/clearfix.html

@@ -0,0 +1,11 @@
+<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>

data/_includes/columns.html

@@ -0,0 +1,9 @@
+<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>

data/_includes/compact.html

@@ -0,0 +1,9 @@
+<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>

data/_includes/complete-list.html

@@ -0,0 +1,115 @@
+<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>

data/_includes/flex-box.html

@@ -0,0 +1,23 @@
+<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>

data/_includes/flex-grid.html

@@ -0,0 +1,28 @@
+<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>