bourbon 2.1.0 → 2.1.1
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.
- data/app/assets/stylesheets/_bourbon.scss +1 -0
- data/app/assets/stylesheets/css3/_background.scss +107 -0
- data/app/assets/stylesheets/css3/_border-radius.scss +10 -8
- data/app/assets/stylesheets/css3/_box-shadow.scss +1 -1
- data/app/assets/stylesheets/css3/_transition.scss +1 -1
- data/lib/bourbon/version.rb +1 -1
- data/readme.md +1 -1
- metadata +9 -62
- data/_config.yml +0 -42
- data/_includes/animation.html +0 -20
- data/_includes/appearance.html +0 -8
- data/_includes/background-image.html +0 -36
- data/_includes/background-size.html +0 -12
- data/_includes/border-image.html +0 -11
- data/_includes/border-radius.html +0 -26
- data/_includes/box-shadow.html +0 -20
- data/_includes/box-sizing.html +0 -8
- data/_includes/buttons.html +0 -52
- data/_includes/clearfix.html +0 -11
- data/_includes/columns.html +0 -9
- data/_includes/compact.html +0 -9
- data/_includes/complete-list.html +0 -115
- data/_includes/flex-box.html +0 -23
- data/_includes/flex-grid.html +0 -28
- data/_includes/font-family.html +0 -21
- data/_includes/footer.html +0 -37
- data/_includes/golden-ratio.html +0 -16
- data/_includes/grid-width.html +0 -15
- data/_includes/hide-text.html +0 -12
- data/_includes/html5-input-types.html +0 -22
- data/_includes/inline-block.html +0 -8
- data/_includes/intro.html +0 -5
- data/_includes/linear-gradient-function.html +0 -21
- data/_includes/linear-gradient.html +0 -24
- data/_includes/modular-scale.html +0 -20
- data/_includes/navigation.html +0 -43
- data/_includes/position.html +0 -18
- data/_includes/radial-gradient-function.html +0 -24
- data/_includes/radial-gradient.html +0 -26
- data/_includes/timing-functions.html +0 -47
- data/_includes/tint-shade.html +0 -13
- data/_includes/transform-origin.html +0 -8
- data/_includes/transform.html +0 -10
- data/_includes/transitions.html +0 -9
- data/_includes/user-select.html +0 -8
- data/_site/images/border.png +0 -0
- data/_site/images/bourbon-logo.png +0 -0
- data/_site/index.html +0 -890
- data/_site/stylesheets/style.css +0 -1226
- data/doc/README.md +0 -36
- data/images/border.png +0 -0
- data/images/bourbon-logo.png +0 -0
- data/index.html +0 -80
- data/stylesheets/sass/_animation-keyframes.scss +0 -31
- data/stylesheets/sass/_base.scss +0 -304
- data/stylesheets/sass/_demos.scss +0 -198
- data/stylesheets/sass/_mixins.scss +0 -21
- data/stylesheets/sass/_normalize.scss +0 -264
- data/stylesheets/sass/_pygments-theme-dark.scss +0 -38
- data/stylesheets/sass/_pygments-theme-light.scss +0 -37
- data/stylesheets/sass/style.scss +0 -10
- data/stylesheets/style.css +0 -1226
data/_includes/border-image.html
DELETED
@@ -1,11 +0,0 @@
|
|
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>
|
@@ -1,26 +0,0 @@
|
|
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>
|
data/_includes/box-shadow.html
DELETED
@@ -1,20 +0,0 @@
|
|
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>
|
data/_includes/box-sizing.html
DELETED
@@ -1,8 +0,0 @@
|
|
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>
|
data/_includes/buttons.html
DELETED
@@ -1,52 +0,0 @@
|
|
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>
|
data/_includes/clearfix.html
DELETED
@@ -1,11 +0,0 @@
|
|
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>
|
data/_includes/columns.html
DELETED
@@ -1,9 +0,0 @@
|
|
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>
|
data/_includes/compact.html
DELETED
@@ -1,9 +0,0 @@
|
|
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>
|
@@ -1,115 +0,0 @@
|
|
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>
|
data/_includes/flex-box.html
DELETED
@@ -1,23 +0,0 @@
|
|
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>
|
data/_includes/flex-grid.html
DELETED
@@ -1,28 +0,0 @@
|
|
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>
|
data/_includes/font-family.html
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
<section id="font-family">
|
2
|
-
<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>
|
3
|
-
<p>Bourbon defines four default font-families as variables for the sake of convenience:</p>
|
4
|
-
|
5
|
-
{% highlight scss %}
|
6
|
-
font-family: $helvetica;
|
7
|
-
font-family: $georgia;
|
8
|
-
font-family: $lucida-grande;
|
9
|
-
font-family: $monospace;
|
10
|
-
font-family: $verdana;
|
11
|
-
{% endhighlight %}
|
12
|
-
|
13
|
-
<h3>CSS Output</h3>
|
14
|
-
{% highlight scss %}
|
15
|
-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
16
|
-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
|
17
|
-
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
|
18
|
-
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
|
19
|
-
font-family: Verdana, Geneva, sans-serif;
|
20
|
-
{% endhighlight %}
|
21
|
-
</section>
|
data/_includes/footer.html
DELETED
@@ -1,37 +0,0 @@
|
|
1
|
-
<section id="browser-support">
|
2
|
-
<h2>Browser Support & Pull Requests</h2>
|
3
|
-
<p>Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.</p>
|
4
|
-
<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>
|
5
|
-
<p>If the answer is yes, there is a high chance the mixin will be accepted via a pull request. </p>
|
6
|
-
<ul>
|
7
|
-
<li>Firefox 3.6+</li>
|
8
|
-
<li>Safari 4.0+</li>
|
9
|
-
<li>Chrome 4.0+</li>
|
10
|
-
<li>Opera 10+</li>
|
11
|
-
<li>IE 9+</li>
|
12
|
-
</ul>
|
13
|
-
|
14
|
-
<p><strong>Bourbon does not intend to support IE filters.</strong></p>
|
15
|
-
|
16
|
-
<p>Resources for checking browser support:</p>
|
17
|
-
<ul>
|
18
|
-
<li><a href="https://developer.mozilla.org/en-US/">MDN - Moz Dev Network</a></li>
|
19
|
-
<li><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a></li>
|
20
|
-
<li><a href="http://css-infos.net/properties/webkit.php">Webkit CSS Properties</a></li>
|
21
|
-
<li><a href="http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx">MSDN - Microsoft Dev Network</a></p></li>
|
22
|
-
</ul>
|
23
|
-
</section>
|
24
|
-
|
25
|
-
<section id="credits">
|
26
|
-
<a href="http://thoughtbot.com"><img src="http://thoughtbot.com/images/tm/logo.png"/></a>
|
27
|
-
|
28
|
-
<h3>Got questions? Need help?</h3>
|
29
|
-
<p>Tweet at <a href="http://twitter.com/phillapier">Phil LaPier</a> on twiiter.</p>
|
30
|
-
|
31
|
-
<h3>Credits</h3>
|
32
|
-
<p>Bourbon is maintained and funded by <a href="http://thoughtbot.com/community">thoughtbot</a>.</p>
|
33
|
-
<p>The names and logos for thoughtbot are trademarks of thoughtbot, inc.</p>
|
34
|
-
|
35
|
-
<h3>License</h3>
|
36
|
-
<p>Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.</p>
|
37
|
-
</section>
|
data/_includes/golden-ratio.html
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
<section id="golden-ratio">
|
2
|
-
<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>
|
3
|
-
<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>
|
4
|
-
<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>
|
5
|
-
|
6
|
-
{% highlight scss %}
|
7
|
-
// Positive number will increment up the golden-ratio
|
8
|
-
font-size: golden-ratio(14px, 1);
|
9
|
-
// returns: 22.652px
|
10
|
-
|
11
|
-
// Negative number will increment down the golden-ratio
|
12
|
-
font-size: golden-ratio(14px, -1);
|
13
|
-
// returns: 8.653px
|
14
|
-
{% endhighlight %}
|
15
|
-
<p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
|
16
|
-
</section>
|
data/_includes/grid-width.html
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
<section id="grid-width">
|
2
|
-
<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>
|
3
|
-
<p>Easily setup and follow a grid based design. Check out <a href="http://gridulator.com/">gridulator.com</a></p>
|
4
|
-
<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>
|
5
|
-
|
6
|
-
{% highlight scss %}
|
7
|
-
$gw-column: 100px; // Column Width
|
8
|
-
$gw-gutter: 40px; // Gutter Width
|
9
|
-
|
10
|
-
div {
|
11
|
-
width: grid-width(4); // returns 520px;
|
12
|
-
margin-left: $gw-gutter; // returns 40px;
|
13
|
-
}
|
14
|
-
{% endhighlight %}
|
15
|
-
</section>
|
data/_includes/hide-text.html
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
<section id="hide-text">
|
2
|
-
<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>
|
3
|
-
<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>
|
4
|
-
<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>
|
5
|
-
|
6
|
-
{% highlight scss %}
|
7
|
-
div {
|
8
|
-
@include hide-text;
|
9
|
-
background-image: url(logo.png);
|
10
|
-
}
|
11
|
-
{% endhighlight %}
|
12
|
-
</section>
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<section id="html5-input-types">
|
2
|
-
<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>
|
3
|
-
<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>
|
4
|
-
<p>Note: You must use interpolation with the variable—<code>#{}</code>.</p>
|
5
|
-
|
6
|
-
{% highlight scss %}
|
7
|
-
#{$all-text-inputs} {
|
8
|
-
border: 1px solid green;
|
9
|
-
}
|
10
|
-
{% endhighlight %}
|
11
|
-
|
12
|
-
<h3>CSS Output</h3>
|
13
|
-
{% highlight scss %}
|
14
|
-
input[type="email"], input[type="number"], input[type="password"], input[type="search"],
|
15
|
-
input[type="tel"], input[type="text"], input[type="url"], input[type="color"],
|
16
|
-
input[type="date"], input[type="datetime"], input[type="datetime-local"],
|
17
|
-
input[type="month"], input[type="time"], input[type="week"] {
|
18
|
-
border: 1px solid green;
|
19
|
-
}
|
20
|
-
{% endhighlight %}
|
21
|
-
|
22
|
-
</section>
|