bourbon 2.0.0.rc1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. data/_config.yml +42 -0
  2. data/_includes/animation.html +20 -0
  3. data/_includes/appearance.html +8 -0
  4. data/_includes/background-image.html +36 -0
  5. data/_includes/background-size.html +12 -0
  6. data/_includes/border-image.html +11 -0
  7. data/_includes/border-radius.html +26 -0
  8. data/_includes/box-shadow.html +20 -0
  9. data/_includes/box-sizing.html +8 -0
  10. data/_includes/buttons.html +52 -0
  11. data/_includes/clearfix.html +11 -0
  12. data/_includes/columns.html +9 -0
  13. data/_includes/compact.html +9 -0
  14. data/_includes/complete-list.html +115 -0
  15. data/_includes/flex-box.html +23 -0
  16. data/_includes/flex-grid.html +28 -0
  17. data/_includes/font-family.html +21 -0
  18. data/_includes/footer.html +37 -0
  19. data/_includes/golden-ratio.html +16 -0
  20. data/_includes/grid-width.html +15 -0
  21. data/_includes/hide-text.html +12 -0
  22. data/_includes/html5-input-types.html +22 -0
  23. data/_includes/inline-block.html +8 -0
  24. data/_includes/intro.html +5 -0
  25. data/_includes/linear-gradient-function.html +21 -0
  26. data/_includes/linear-gradient.html +24 -0
  27. data/_includes/modular-scale.html +20 -0
  28. data/_includes/navigation.html +43 -0
  29. data/_includes/position.html +18 -0
  30. data/_includes/radial-gradient-function.html +24 -0
  31. data/_includes/radial-gradient.html +26 -0
  32. data/_includes/timing-functions.html +47 -0
  33. data/_includes/tint-shade.html +13 -0
  34. data/_includes/transform-origin.html +8 -0
  35. data/_includes/transform.html +10 -0
  36. data/_includes/transitions.html +9 -0
  37. data/_includes/user-select.html +8 -0
  38. data/_site/images/border.png +0 -0
  39. data/_site/images/bourbon-logo.png +0 -0
  40. data/_site/index.html +890 -0
  41. data/_site/stylesheets/style.css +1226 -0
  42. data/app/assets/stylesheets/_bourbon.scss +4 -0
  43. data/app/assets/stylesheets/addons/_button.scss +11 -7
  44. data/app/assets/stylesheets/addons/_font-face.scss +12 -0
  45. data/app/assets/stylesheets/addons/_position.scss +42 -0
  46. data/app/assets/stylesheets/css3/_animation.scss +9 -27
  47. data/app/assets/stylesheets/css3/_appearance.scss +1 -5
  48. data/app/assets/stylesheets/css3/_background-size.scss +1 -5
  49. data/app/assets/stylesheets/css3/_border-radius.scss +8 -19
  50. data/app/assets/stylesheets/css3/_box-shadow.scss +1 -3
  51. data/app/assets/stylesheets/css3/_box-sizing.scss +1 -3
  52. data/app/assets/stylesheets/css3/_columns.scss +10 -30
  53. data/app/assets/stylesheets/css3/_flex-box.scss +11 -26
  54. data/app/assets/stylesheets/css3/_prefixer.scss +12 -0
  55. data/app/assets/stylesheets/css3/_transform.scss +2 -10
  56. data/app/assets/stylesheets/css3/_transition.scss +9 -25
  57. data/app/assets/stylesheets/css3/_user-select.scss +1 -4
  58. data/app/assets/stylesheets/functions/_transition-property-name.scss +22 -0
  59. data/doc/README.md +36 -0
  60. data/images/border.png +0 -0
  61. data/images/bourbon-logo.png +0 -0
  62. data/index.html +80 -0
  63. data/lib/bourbon/sass_extensions/functions/compact.rb +3 -2
  64. data/lib/bourbon/version.rb +1 -1
  65. data/readme.md +8 -8
  66. data/stylesheets/sass/_animation-keyframes.scss +31 -0
  67. data/stylesheets/sass/_base.scss +304 -0
  68. data/stylesheets/sass/_demos.scss +198 -0
  69. data/stylesheets/sass/_mixins.scss +21 -0
  70. data/stylesheets/sass/_normalize.scss +264 -0
  71. data/stylesheets/sass/_pygments-theme-dark.scss +38 -0
  72. data/stylesheets/sass/_pygments-theme-light.scss +37 -0
  73. data/stylesheets/sass/style.scss +10 -0
  74. data/stylesheets/style.css +1226 -0
  75. metadata +69 -11
@@ -0,0 +1,42 @@
1
+ safe: false
2
+ auto: true
3
+ server: false
4
+ server_port: 4000
5
+ base-url: /
6
+
7
+ source: .
8
+ destination: ./_site
9
+ plugins: ./_plugins
10
+ exclude: ./app, ./doc, ./bourbon, ./demo, ./lib, sass, ./bourbon.gemspec, ./Gemfile, ./Gemfile.lock, ./generate-bourbon.sh, ./LICENSE, ./Rakefile, ./readme.md, ./features
11
+
12
+ future: true
13
+ lsi: false
14
+ pygments: true
15
+ markdown: maruku
16
+ permalink: date
17
+
18
+ maruku:
19
+ use_tex: false
20
+ use_divs: false
21
+ png_engine: blahtex
22
+ png_dir: images/latex
23
+ png_url: /images/latex
24
+
25
+ rdiscount:
26
+ extensions: []
27
+
28
+ kramdown:
29
+ auto_ids: true,
30
+ footnote_nr: 1
31
+ entity_output: as_char
32
+ toc_levels: 1..6
33
+ use_coderay: false
34
+
35
+ coderay:
36
+ coderay_wrap: div
37
+ coderay_line_numbers: inline
38
+ coderay_line_numbers_start: 1
39
+ coderay_tab_width: 4
40
+ coderay_bold_every: 10
41
+ coderay_css: style
42
+
@@ -0,0 +1,20 @@
1
+ <section id="animations">
2
+ <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
3
+ <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>
4
+
5
+ {% highlight scss %}
6
+ box:hover {
7
+ @include animation-name(scale, slide);
8
+ @include animation-duration(2s);
9
+ @include animation-timing-function(ease);
10
+ @include animation-iteration-count(infinite);
11
+
12
+ // Animation shorthand works the same as the CSS3 animation shorthand
13
+ @include animation(scale 1.0s ease-in, slide 2.0s ease);
14
+ }
15
+ {% endhighlight %}
16
+ <h3>Demo</h3>
17
+ <section class="demo">
18
+ <div id="run-demo" class="box"></div>
19
+ </section>
20
+ </section>
@@ -0,0 +1,8 @@
1
+ <section id="appearance">
2
+ <h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
3
+ <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>
4
+
5
+ {% highlight scss %}
6
+ @include appearance(none);
7
+ {% endhighlight %}
8
+ </section>
@@ -0,0 +1,36 @@
1
+ <section id="background-image">
2
+ <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>
3
+ <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>
4
+ <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>.
5
+
6
+ {% highlight scss %}
7
+ // Multiple image assets
8
+ @include background-image(url("/images/a.png"), url("images/b.png"));
9
+
10
+ // Image asset with a linear-gradient
11
+ @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
12
+
13
+ // Multiple linear-gradients - Demo
14
+ @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
15
+ linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));
16
+
17
+ // NOT SUPPORTED - Multiple image assets with shorthand notation
18
+ @include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
19
+ {% endhighlight %}
20
+
21
+ <h3>Demo</h3>
22
+ <section class="demo">
23
+ </section>
24
+
25
+ <h3>Note about shorthand notation</h3>
26
+
27
+ <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>
28
+
29
+ {% highlight scss %}
30
+ @include background-image(url("/images/a.png"), url("images/b.png"));
31
+ background-position: center top, center;
32
+ background-repeat: no-repeat, repeat-x;
33
+ {% endhighlight %}
34
+
35
+ </section>
36
+
@@ -0,0 +1,12 @@
1
+ <section id="background-size">
2
+ <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>
3
+ <p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
4
+
5
+ {% highlight scss %}
6
+ @include background-size(50% 100%); // Single
7
+ @include background-size(50% 100%, 75% 100%); // Multiple
8
+ {% endhighlight %}
9
+ </section>
10
+
11
+
12
+
@@ -0,0 +1,11 @@
1
+ <section id="border-image">
2
+ <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>
3
+ <p>Border-image supports short-hand notation.</p>
4
+
5
+ {% highlight scss %}
6
+ @include border-image(url(/images/border.png) 27 repeat);
7
+ {% endhighlight %}
8
+ <h3>Demo</h3>
9
+ <section class="demo">
10
+ </section>
11
+ </section>
@@ -0,0 +1,26 @@
1
+ <section id="border-radius">
2
+ <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>
3
+
4
+ <p>The border-radius mixin can take short-hand notation or the full radius expression.</p>
5
+
6
+ {% highlight scss %}
7
+ @include border-radius(10px);
8
+ @include border-radius(5px 5px 2px 2px);
9
+ {% endhighlight %}
10
+
11
+ <p>You can also specify individual corners.</p>
12
+ {% highlight scss %}
13
+ @include border-top-left-radius(5px);
14
+ @include border-top-right-radius(5px);
15
+ @include border-bottom-right-radius(5px);
16
+ @include border-bottom-left-radius(5px);
17
+ {% endhighlight %}
18
+
19
+ <p>Individual sides are supported as well.</p>
20
+ {% highlight scss %}
21
+ @include border-top-radius(5px);
22
+ @include border-bottom-radius(5px);
23
+ @include border-left-radius(5px);
24
+ @include border-right-radius(5px);
25
+ {% endhighlight %}
26
+ </section>
@@ -0,0 +1,20 @@
1
+ <section id="box-shadow">
2
+ <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>
3
+ <p>Box-shadow supports single or multiple arguments.</p>
4
+
5
+ <h3>Single Box Shadow</h3>
6
+ {% highlight scss %}
7
+ @include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));
8
+ {% endhighlight %}
9
+ <section class="demo">
10
+ <div class="example single"></div>
11
+ </section>
12
+
13
+ <h3>Multiple Box Shadows</h3>
14
+ {% highlight scss %}
15
+ @include box-shadow(1px 1px 5px 1px green, -1px -1px 5px 1px blue);
16
+ {% endhighlight %}
17
+ <section class="demo">
18
+ <div class="example double"></div>
19
+ </section>
20
+ </section>
@@ -0,0 +1,8 @@
1
+ <section id="box-sizing">
2
+ <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>
3
+ <p>Box-sizing will change the box-model of the element it is applied to.</p>
4
+
5
+ {% highlight scss %}
6
+ @include box-sizing(border-box);
7
+ {% endhighlight %}
8
+ </section>
@@ -0,0 +1,52 @@
1
+ <section id="buttons">
2
+ <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
3
+ <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
4
+ <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
5
+ <ul>
6
+ <li>
7
+ <code>simple</code> (default)
8
+ </li>
9
+ <li>
10
+ <code>shiny</code>
11
+ </li>
12
+ <li>
13
+ <code>pill</code>
14
+ </li>
15
+ </ul>
16
+
17
+ <section class="demo">
18
+ <div class="wrapper">
19
+ <h3>Simple Button Style</h3>
20
+ <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
21
+ {% highlight scss %}
22
+ button {
23
+ @include button;
24
+ }
25
+ {% endhighlight %}
26
+ <button class="example-1">Simple button</button>
27
+ </div>
28
+
29
+ <div class="wrapper">
30
+ <h3>Pill Button Style</h3>
31
+ {% highlight scss %}
32
+ button {
33
+ @include button(pill);
34
+ }
35
+ {% endhighlight %}
36
+ <button class="example-2">Pill Button</button>
37
+ </div>
38
+
39
+ <div class="wrapper">
40
+ <h3>Shiny Button Style</h3>
41
+ <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>
42
+
43
+ {% highlight scss %}
44
+ button {
45
+ @include button(shiny, #ff0000);
46
+ }
47
+ {% endhighlight %}
48
+ <button class="example-3">Shiny Button</button>
49
+ </div>
50
+ </section>
51
+
52
+ </section>
@@ -0,0 +1,11 @@
1
+ <section id="clearfix">
2
+ <h2>Clearfix <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix.scss">View source</a></h2>
3
+ <p>This mixin will output a clearfix to the selector where the mixin is declared.</p>
4
+ <p>This clearfix uses Nicolas Gallagher's <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a>.</p>
5
+
6
+ {% highlight scss %}
7
+ div {
8
+ @include clearfix;
9
+ }
10
+ {% endhighlight %}
11
+ </section>
@@ -0,0 +1,9 @@
1
+ <section id="columns">
2
+ <h2>Columns <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_columns.scss">View source</a></h2>
3
+ <p>All current CSS3 column properties are supported. See the <a href="#complete-list-mixins">complete list of mixins</a> for more info.</p>
4
+
5
+ {% highlight scss %}
6
+ @include columns(12 8em);
7
+ @include column-rule(1px solid green);
8
+ {% endhighlight %}
9
+ </section>
@@ -0,0 +1,9 @@
1
+ <section id="compact">
2
+ <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>
3
+ <p>The compact function will strip out any value from a list that is <code>false</code>. Takes up to 10 arguments.
4
+
5
+ {% highlight scss %}
6
+ $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
7
+ {% endhighlight %}
8
+
9
+ </section>
@@ -0,0 +1,115 @@
1
+ <section id="complete-list">
2
+ <h2>All Supported Functions, Mixins, and Addons</h2>
3
+ <p><code>@</code> denotes a mixin and must be prefaced with <code>@include</code>.</p>
4
+
5
+ <h3 id="complete-list-mixins">Mixins</h3>
6
+ {% highlight scss %}
7
+ animation
8
+ @ animation(*args)
9
+ @ animation-delay(*args)
10
+ @ animation-direction(*args)
11
+ @ animation-duration(*args)
12
+ @ animation-fill-mode(*args)
13
+ @ animation-iteration-count(*args)
14
+ @ animation-name(*args)
15
+ @ animation-play-state(*args)
16
+ @ animation-timing-function(*args)
17
+
18
+ @ appearance(*args)
19
+ @ background-image(*args)
20
+ @ background-size(*args)
21
+ @ border-image(*args)
22
+
23
+ border-radius
24
+ @ border-radius(*args)
25
+ @ border-top-radius(*args)
26
+ @ border-top-left-radius(*args)
27
+ @ border-top-right-radius(*args)
28
+ @ border-bottom-radius(*args)
29
+ @ border-bottom-left-radius(*args)
30
+ @ border-bottom-right-radius(*args)
31
+ @ border-left-radius(*args)
32
+ @ border-right-radius(*args)
33
+
34
+ @ box-shadow(*args)
35
+ @ box-sizing(*args)
36
+
37
+ columns
38
+ @columns(*args)
39
+ @column-count(*args)
40
+ @column-fill(*args)
41
+ @column-gap(*args)
42
+ @column-rule(*args)
43
+ @column-rule-color(*args)
44
+ @column-rule-style(*args)
45
+ @column-rule-width(*args)
46
+ @column-span(*args)
47
+ @column-width(*args)
48
+
49
+ flex-box
50
+ @ box(*args)
51
+ @ box-align(*args)
52
+ @ box-direction(*args)
53
+ @ box-flex(*args)
54
+ @ box-flex-group(*args)
55
+ @ box-lines(*args)
56
+ @ box-ordinal-group(*args)
57
+ @ box-orient(*args)
58
+ @ box-pack(*args)
59
+ @ display-box
60
+
61
+ @ inline-block
62
+ @ linear-gradient(*args)
63
+ @ radial-gradient(*args)
64
+
65
+ transform
66
+ @ transform(*args)
67
+ @ transform-origin(*args)
68
+
69
+ transition
70
+ @ transition(*args)
71
+ @ transition-delay(*args)
72
+ @ transition-duration(*args)
73
+ @ transition-property(*args)
74
+ @ transition-timing-function(*args)
75
+
76
+ @ user-select
77
+ {% endhighlight %}
78
+
79
+ <h3 id="complete-list-functions">Functions</h3>
80
+ {% highlight scss %}
81
+ compact(*args)
82
+ flex-grid(*args)
83
+ golden-ratio(*args)
84
+ grid-width(*args)
85
+ linear-gradient(*args)
86
+ modular-scale(*args)
87
+ radial-gradient(*args)
88
+ shade(*args)
89
+ tint(*args)
90
+ {% endhighlight %}
91
+
92
+ <h3 id="complete-list-addons">Addons</h3>
93
+ {% highlight scss %}
94
+ @ button(*args)
95
+ @ clearfix
96
+ @ hide-text
97
+
98
+ HTML5 Inputs
99
+ #{$all-text-inputs}
100
+
101
+ font-family
102
+ $georgia
103
+ $helvetica
104
+ $lucida-grande
105
+ $monospace
106
+ $verdana
107
+
108
+ timing-functions
109
+ $ease-in-*
110
+ $ease-out-*
111
+ $ease-in-out-*
112
+ * = quad, cubic, quart, quint, sine, expo, circ, back
113
+ {% endhighlight %}
114
+
115
+ </section>
@@ -0,0 +1,23 @@
1
+ <section id="flex-box">
2
+ <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>
3
+ <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>
4
+
5
+ {% highlight scss %}
6
+ div.parent {
7
+ @include display-box;
8
+ @include box-align(start);
9
+ @include box-orient(horizontal);
10
+ @include box-pack(start);
11
+ }
12
+
13
+ div.parent > div.child {
14
+ @include box-flex(2);
15
+ }
16
+
17
+ // Alternative custom shorthand mixin.
18
+ div.parent {
19
+ @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
20
+ @include box(vertical, start, stretch);
21
+ }
22
+ {% endhighlight %}
23
+ </section>
@@ -0,0 +1,28 @@
1
+ <section id="flex-grid">
2
+ <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>
3
+ <p>Use this mixin to easily create a flexible-grid layout.</p>
4
+ <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>
5
+ <p>This function takes the fluid grid equation (target / context = result) and uses columns to help define each.</p>
6
+
7
+ {% highlight scss %}
8
+ $fg-column: 60px; // Column Width
9
+ $fg-gutter: 25px; // Gutter Width
10
+ $fg-max-columns: 12; // Total Columns For Main Container
11
+
12
+ div {
13
+ width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
14
+ margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
15
+
16
+ p {
17
+ width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
18
+ float: left;
19
+ margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
20
+ }
21
+
22
+ blockquote {
23
+ float: left;
24
+ width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
25
+ }
26
+ }
27
+ {% endhighlight %}
28
+ </section>