bourbon 1.1.0 → 1.2.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.
- data/Rakefile +12 -0
- data/app/assets/stylesheets/_bourbon.scss +5 -1
- data/app/assets/stylesheets/addons/_button.scss +4 -3
- data/app/assets/stylesheets/addons/_font-family.scss +4 -0
- data/app/assets/stylesheets/addons/_timing-functions.scss +24 -21
- data/app/assets/stylesheets/css3/_appearance.scss +7 -0
- data/app/assets/stylesheets/css3/_background-size.scss +15 -0
- data/app/assets/stylesheets/css3/_border-radius.scss +52 -0
- data/app/assets/stylesheets/css3/_columns.scss +67 -0
- data/app/assets/stylesheets/functions/_golden-ratio.scss +2 -3
- data/bourbon.gemspec +1 -1
- data/lib/tasks/install.rake +5 -4
- data/readme.md +123 -42
- metadata +10 -7
- data/generate-bourbon.sh +0 -22
data/Rakefile
CHANGED
@@ -1,2 +1,14 @@
|
|
1
1
|
require 'bundler'
|
2
2
|
Bundler::GemHelper.install_tasks
|
3
|
+
|
4
|
+
directory 'bourbon/lib'
|
5
|
+
|
6
|
+
desc "Generate bourbon directory for use outside Rails"
|
7
|
+
task :generate => 'bourbon/lib' do
|
8
|
+
FileUtils.cp_r(Dir['app/assets/stylesheets/*'], 'bourbon/')
|
9
|
+
FileUtils.cp_r(Dir['lib/*'], 'bourbon/lib/')
|
10
|
+
|
11
|
+
FileUtils.rm_r('bourbon/lib/tasks')
|
12
|
+
FileUtils.rm('bourbon/lib/bourbon/engine.rb')
|
13
|
+
FileUtils.rm('bourbon/lib/bourbon/version.rb')
|
14
|
+
end
|
@@ -1,16 +1,19 @@
|
|
1
1
|
// Custom Functions
|
2
|
+
@import "functions/deprecated-webkit-gradient";
|
2
3
|
@import "functions/golden-ratio";
|
3
4
|
@import "functions/grid-width";
|
4
5
|
@import "functions/tint-shade";
|
5
|
-
@import "functions/deprecated-webkit-gradient";
|
6
6
|
|
7
7
|
// CSS3 Mixins
|
8
8
|
@import "css3/animation";
|
9
|
+
@import "css3/appearance";
|
9
10
|
@import "css3/background-image";
|
11
|
+
@import "css3/background-size";
|
10
12
|
@import "css3/border-image";
|
11
13
|
@import "css3/border-radius";
|
12
14
|
@import "css3/box-shadow";
|
13
15
|
@import "css3/box-sizing";
|
16
|
+
@import "css3/columns";
|
14
17
|
@import "css3/flex-box";
|
15
18
|
@import "css3/inline-block";
|
16
19
|
@import "css3/linear-gradient";
|
@@ -20,6 +23,7 @@
|
|
20
23
|
|
21
24
|
// Addons & other mixins
|
22
25
|
@import "addons/button";
|
26
|
+
@import "addons/font-family";
|
23
27
|
@import "addons/html5-input-types";
|
24
28
|
@import "addons/position";
|
25
29
|
@import "addons/timing-functions";
|
@@ -35,7 +35,8 @@
|
|
35
35
|
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
|
36
36
|
color: $color;
|
37
37
|
display: inline;
|
38
|
-
font:
|
38
|
+
font-size: 11px;
|
39
|
+
font-weight: bold;
|
39
40
|
@include linear-gradient ($base-color, $stop-gradient);
|
40
41
|
padding: 6px 18px 7px;
|
41
42
|
text-shadow: 0 1px 0 $text-shadow;
|
@@ -82,7 +83,8 @@
|
|
82
83
|
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
|
83
84
|
color: $color;
|
84
85
|
display: inline;
|
85
|
-
font:
|
86
|
+
font-size: 14px;
|
87
|
+
font-weight: bold;
|
86
88
|
padding: 7px 20px 8px;
|
87
89
|
text-decoration: none;
|
88
90
|
text-align: center;
|
@@ -126,7 +128,6 @@
|
|
126
128
|
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
|
127
129
|
color: $color;
|
128
130
|
display: inline;
|
129
|
-
font-family: "lucida grande", sans-serif;
|
130
131
|
font-size: 11px;
|
131
132
|
font-weight: normal;
|
132
133
|
line-height: 1;
|
@@ -2,28 +2,31 @@
|
|
2
2
|
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
|
3
3
|
|
4
4
|
// EASE IN
|
5
|
-
$ease-in-quad: cubic-bezier(0.550,
|
6
|
-
$ease-in-cubic: cubic-bezier(0.550,
|
7
|
-
$ease-in-quart: cubic-bezier(0.895,
|
8
|
-
$ease-in-quint: cubic-bezier(0.755,
|
9
|
-
$ease-in-sine: cubic-bezier(0.470,
|
10
|
-
$ease-in-expo: cubic-bezier(0.950,
|
11
|
-
$ease-in-circ: cubic-bezier(0.600,
|
5
|
+
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
6
|
+
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
7
|
+
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
8
|
+
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
9
|
+
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
10
|
+
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
11
|
+
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
12
|
+
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
12
13
|
|
13
14
|
// EASE OUT
|
14
|
-
$ease-out-quad: cubic-bezier(0.250,
|
15
|
-
$ease-out-cubic: cubic-bezier(0.215,
|
16
|
-
$ease-out-quart: cubic-bezier(0.165,
|
17
|
-
$ease-out-quint: cubic-bezier(0.230,
|
18
|
-
$ease-out-sine: cubic-bezier(0.390,
|
19
|
-
$ease-out-expo: cubic-bezier(0.190,
|
20
|
-
$ease-out-circ: cubic-bezier(0.075,
|
15
|
+
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
16
|
+
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
17
|
+
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
18
|
+
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
19
|
+
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
20
|
+
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
21
|
+
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
22
|
+
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
21
23
|
|
22
24
|
// EASE IN OUT
|
23
|
-
$ease-in-out-quad: cubic-bezier(0.455,
|
24
|
-
$ease-in-out-cubic: cubic-bezier(0.645,
|
25
|
-
$ease-in-out-quart: cubic-bezier(0.770,
|
26
|
-
$ease-in-out-quint: cubic-bezier(0.860,
|
27
|
-
$ease-in-out-sine: cubic-bezier(0.445,
|
28
|
-
$ease-in-out-expo: cubic-bezier(1.000,
|
29
|
-
$ease-in-out-circ: cubic-bezier(0.785,
|
25
|
+
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
26
|
+
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
27
|
+
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
28
|
+
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
29
|
+
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
30
|
+
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
31
|
+
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
32
|
+
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
@@ -0,0 +1,15 @@
|
|
1
|
+
@mixin background-size ($length-1,
|
2
|
+
$length-2: false, $length-3: false,
|
3
|
+
$length-4: false, $length-5: false,
|
4
|
+
$length-6: false, $length-7: false,
|
5
|
+
$length-8: false, $length-9: false)
|
6
|
+
{
|
7
|
+
$full: compact($length-1, $length-2, $length-3, $length-4,
|
8
|
+
$length-5, $length-6, $length-7, $length-8, $length-9);
|
9
|
+
|
10
|
+
-webkit-background-size: $full;
|
11
|
+
-moz-background-size: $full;
|
12
|
+
-ms-background-size: $full;
|
13
|
+
-o-background-size: $full;
|
14
|
+
background-size: $full;
|
15
|
+
}
|
@@ -5,3 +5,55 @@
|
|
5
5
|
-o-border-radius: $radii;
|
6
6
|
border-radius: $radii;
|
7
7
|
}
|
8
|
+
|
9
|
+
@mixin border-top-left-radius($radii) {
|
10
|
+
-webkit-border-top-left-radius: $radii;
|
11
|
+
-moz-border-top-left-radius: $radii;
|
12
|
+
-ms-border-top-left-radius: $radii;
|
13
|
+
-o-border-top-left-radius: $radii;
|
14
|
+
border-top-left-radius: $radii;
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin border-top-right-radius($radii) {
|
18
|
+
-webkit-border-top-right-radius: $radii;
|
19
|
+
-moz-border-top-right-radius: $radii;
|
20
|
+
-ms-border-top-right-radius: $radii;
|
21
|
+
-o-border-top-right-radius: $radii;
|
22
|
+
border-top-right-radius: $radii;
|
23
|
+
}
|
24
|
+
|
25
|
+
@mixin border-bottom-left-radius($radii) {
|
26
|
+
-webkit-border-bottom-left-radius: $radii;
|
27
|
+
-moz-border-bottom-left-radius: $radii;
|
28
|
+
-ms-border-bottom-left-radius: $radii;
|
29
|
+
-o-border-bottom-left-radius: $radii;
|
30
|
+
border-bottom-left-radius: $radii;
|
31
|
+
}
|
32
|
+
|
33
|
+
@mixin border-bottom-right-radius($radii) {
|
34
|
+
-webkit-border-bottom-right-radius: $radii;
|
35
|
+
-moz-border-bottom-right-radius: $radii;
|
36
|
+
-ms-border-bottom-right-radius: $radii;
|
37
|
+
-o-border-bottom-right-radius: $radii;
|
38
|
+
border-bottom-right-radius: $radii;
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin border-top-radius($radii) {
|
42
|
+
@include border-top-left-radius($radii);
|
43
|
+
@include border-top-right-radius($radii);
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin border-right-radius($radii) {
|
47
|
+
@include border-top-right-radius($radii);
|
48
|
+
@include border-bottom-right-radius($radii);
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin border-bottom-radius($radii) {
|
52
|
+
@include border-bottom-left-radius($radii);
|
53
|
+
@include border-bottom-right-radius($radii);
|
54
|
+
}
|
55
|
+
|
56
|
+
@mixin border-left-radius($radii) {
|
57
|
+
@include border-top-left-radius($radii);
|
58
|
+
@include border-bottom-left-radius($radii);
|
59
|
+
}
|
@@ -0,0 +1,67 @@
|
|
1
|
+
@mixin columns($arg: auto) {
|
2
|
+
// <column-count> || <column-width>
|
3
|
+
-webkit-columns: $arg;
|
4
|
+
-moz-columns: $arg;
|
5
|
+
columns: $arg;
|
6
|
+
}
|
7
|
+
|
8
|
+
@mixin column-count($int: auto) {
|
9
|
+
// auto || integer
|
10
|
+
-webkit-column-count: $int;
|
11
|
+
-moz-column-count: $int;
|
12
|
+
column-count: $int;
|
13
|
+
}
|
14
|
+
|
15
|
+
@mixin column-gap($length: normal) {
|
16
|
+
// normal || length
|
17
|
+
-webkit-column-gap: $length;
|
18
|
+
-moz-column-gap: $length;
|
19
|
+
column-gap: $length;
|
20
|
+
}
|
21
|
+
|
22
|
+
@mixin column-fill($arg: auto) {
|
23
|
+
// auto || length
|
24
|
+
-webkit-columns-fill: $arg;
|
25
|
+
-moz-columns-fill: $arg;
|
26
|
+
columns-fill: $arg;
|
27
|
+
}
|
28
|
+
|
29
|
+
@mixin column-rule($arg) {
|
30
|
+
// <border-width> || <border-style> || <color>
|
31
|
+
-webkit-column-rule: $arg;
|
32
|
+
-moz-column-rule: $arg;
|
33
|
+
column-rule: $arg;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin column-rule-color($color) {
|
37
|
+
-webkit-column-rule-color: $color;
|
38
|
+
-moz-column-rule-color: $color;
|
39
|
+
column-rule-color: $color;
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin column-rule-style($style: none) {
|
43
|
+
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
44
|
+
-webkit-column-rule-style: $style;
|
45
|
+
-moz-column-rule-style: $style;
|
46
|
+
column-rule-style: $style;
|
47
|
+
}
|
48
|
+
|
49
|
+
@mixin column-rule-width ($width: none) {
|
50
|
+
-webkit-column-rule-width: $width;
|
51
|
+
-moz-column-rule-width: $width;
|
52
|
+
column-rule-width: $width;
|
53
|
+
}
|
54
|
+
|
55
|
+
@mixin column-span($arg: none) {
|
56
|
+
// none || all
|
57
|
+
-webkit-column-span: $arg;
|
58
|
+
-moz-column-span: $arg;
|
59
|
+
column-span: $arg;
|
60
|
+
}
|
61
|
+
|
62
|
+
@mixin column-width($length: auto) {
|
63
|
+
// auto || length
|
64
|
+
-webkit-column-width: $length;
|
65
|
+
-moz-column-width: $length;
|
66
|
+
column-width: $length;
|
67
|
+
}
|
@@ -4,15 +4,14 @@
|
|
4
4
|
$value: ($value * 1.618);
|
5
5
|
}
|
6
6
|
}
|
7
|
+
|
7
8
|
@if $increment < 0 {
|
8
9
|
$increment: abs($increment);
|
9
10
|
@for $i from 1 through $increment {
|
10
11
|
$value: ($value / 1.618);
|
11
12
|
}
|
12
13
|
}
|
13
|
-
|
14
|
-
@warn "Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...";
|
15
|
-
}
|
14
|
+
|
16
15
|
@return $value;
|
17
16
|
}
|
18
17
|
|
data/bourbon.gemspec
CHANGED
@@ -6,7 +6,7 @@ Gem::Specification.new do |s|
|
|
6
6
|
s.name = "bourbon"
|
7
7
|
s.version = Bourbon::VERSION
|
8
8
|
s.platform = Gem::Platform::RUBY
|
9
|
-
s.authors = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "
|
9
|
+
s.authors = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "Andres Mejia", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea"]
|
10
10
|
s.email = ["support@thoughtbot.com"]
|
11
11
|
s.homepage = "https://github.com/thoughtbot/bourbon"
|
12
12
|
s.summary = "Bourbon Sass Mixins using SCSS syntax."
|
data/lib/tasks/install.rake
CHANGED
@@ -1,10 +1,11 @@
|
|
1
1
|
# Needed for pre-3.1.
|
2
2
|
namespace :bourbon do
|
3
3
|
desc "Move files to the Rails assets directory."
|
4
|
-
task :install do
|
4
|
+
task :install, [:sass_path] do |t, args|
|
5
|
+
args.with_defaults :sass_path => 'public/stylesheets/sass'
|
5
6
|
source_root = File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
|
6
|
-
`mkdir -p #{Rails.root}/
|
7
|
-
`cp -a #{source_root}/app/assets/stylesheets/* #{Rails.root}/
|
8
|
-
`find #{Rails.root}/
|
7
|
+
`mkdir -p #{Rails.root}/#{args.sass_path}/bourbon`
|
8
|
+
`cp -a #{source_root}/app/assets/stylesheets/* #{Rails.root}/#{args.sass_path}/bourbon`
|
9
|
+
`find #{Rails.root}/#{args.sass_path}/bourbon -name "*.css.scss" | while read i; do mv "$i" "${i%.css.scss}.scss"; done`
|
9
10
|
end
|
10
11
|
end
|
data/readme.md
CHANGED
@@ -1,33 +1,39 @@
|
|
1
1
|
# Bourbon Sass Mixins
|
2
|
-
The purpose of Bourbon Sass Mixins is to provide a comprehensive library of
|
3
|
-
|
4
|
-
|
2
|
+
The purpose of Bourbon Sass Mixins is to provide a comprehensive library of Sass
|
3
|
+
mixins that are designed to be as vanilla as possible, meaning they should not
|
4
|
+
deter you from using the original CSS syntax.
|
5
|
+
The mixins contain vendor specific prefixes for all CSS3 properties for support
|
6
|
+
amongst modern browsers. The prefixes also ensure graceful degradation for older
|
7
|
+
browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
|
5
8
|
|
6
9
|
# Requirements
|
7
10
|
Sass 3.1+
|
8
11
|
|
9
12
|
# Install for Rails
|
10
|
-
|
13
|
+
In your Gemfile:
|
11
14
|
|
12
15
|
gem 'bourbon'
|
13
16
|
|
17
|
+
Then run:
|
18
|
+
|
14
19
|
$ bundle install
|
15
20
|
|
16
21
|
## Rails 3.1.x
|
17
|
-
|
22
|
+
|
23
|
+
Rename application.css to application.css.scss:
|
18
24
|
|
19
25
|
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
|
20
26
|
|
21
|
-
Bourbon needs the sass files to be imported in a specific order to function properly. Therefore, you will need to
|
22
|
-
Delete the following sprocket directive in application.css.scss
|
27
|
+
Bourbon needs the sass files to be imported in a specific order to function properly. Therefore, you will need to disable the require\_tree sprocket directive.
|
28
|
+
Delete the following sprocket directive in application.css.scss:
|
23
29
|
|
24
30
|
*= require_tree .
|
25
31
|
|
26
|
-
Import bourbon at the beginning of application.css.scss
|
32
|
+
Import bourbon at the beginning of application.css.scss:
|
27
33
|
|
28
34
|
@import "bourbon";
|
29
35
|
|
30
|
-
Import all additional stylesheets from your app/assets/stylesheets directory underneath the bourbon import
|
36
|
+
Import all additional stylesheets from your app/assets/stylesheets directory underneath the bourbon import:
|
31
37
|
|
32
38
|
@import "bourbon";
|
33
39
|
@import "home";
|
@@ -43,45 +49,29 @@ Import the mixins at the beginning of your stylesheet
|
|
43
49
|
|
44
50
|
@import 'bourbon/bourbon';
|
45
51
|
|
52
|
+
*Optional*: If you use a non-standard location for your sass files, you can specify the path to your sass files as an argument to the install task
|
46
53
|
|
47
|
-
|
48
|
-
The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.
|
49
|
-
Preliminary step: clone this repo and cd into the directory.
|
50
|
-
|
51
|
-
**Step 1:** Make script executable by changing file permission
|
54
|
+
rake bourbon:install[app/stylesheets]
|
52
55
|
|
53
|
-
|
54
|
-
|
55
|
-
**Step 2:** Generate files
|
56
|
+
# Install without Rails
|
57
|
+
Bourbon includes an easy way to generate a directory with all the necessary files.
|
56
58
|
|
57
|
-
|
59
|
+
rake generate
|
58
60
|
|
59
|
-
|
61
|
+
This will create a `bourbon` directory that can be used by `sass --watch`. Move
|
62
|
+
the generated directory into your project's sass directory, e.g. `stylesheets/sass/`.
|
60
63
|
|
61
|
-
|
62
|
-
*-r ./bourbon/lib/bourbon.rb*
|
64
|
+
To output properly, Bourbon must be explicitly required (`-r`) by Sass at the command line:
|
63
65
|
|
64
66
|
# Example (project root directory)
|
65
67
|
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
|
66
68
|
|
67
|
-
In this case
|
69
|
+
In this case, you will need to import the mixins at the beginning of your stylesheet:
|
68
70
|
|
69
71
|
@import 'bourbon/bourbon';
|
70
72
|
|
71
73
|
# Browser support
|
72
74
|
Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
|
73
|
-
**Pull requests:** A general rule when considering a new mixin: Do the following browsers *only* support the CSS3 property using vendor specific prefixes? If the answer is yes, there is a high chance the mixin will be accepted via a pull request.
|
74
|
-
|
75
|
-
* Firefox 3.6+
|
76
|
-
* Safari 4.0+
|
77
|
-
* Chrome 4.0+
|
78
|
-
* Opera 10+
|
79
|
-
* IE 9+
|
80
|
-
|
81
|
-
*Bourbon does not intend to support IE filters.*
|
82
|
-
|
83
|
-
Resources for checking browser support: [MDN - Moz Dev Network](https://developer.mozilla.org/en-US/), [Mozilla CSS Extensions](https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions), [Webkit CSS Properties](http://css-infos.net/properties/webkit.php), [Firefox CSS Properties](http://css-infos.net/properties/firefox.php), [MSDN - Microsoft Dev Network](http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx)
|
84
|
-
|
85
75
|
|
86
76
|
# Using Bourbon Mixins
|
87
77
|
Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
|
@@ -99,6 +89,22 @@ The animation mixins support comma separated lists of values, which allows diffe
|
|
99
89
|
@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
100
90
|
|
101
91
|
|
92
|
+
### Appearance
|
93
|
+
The `appearance` CSS property is used to display an element using a platform-native styling based on the operating system's theme.
|
94
|
+
|
95
|
+
@include appearance(none);
|
96
|
+
|
97
|
+
|
98
|
+
### Background-size
|
99
|
+
The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.
|
100
|
+
|
101
|
+
# Single background-image
|
102
|
+
@include background-size(50% 100%);
|
103
|
+
|
104
|
+
# Multiple background-images
|
105
|
+
@include background-size(50% 100%, 75% 100%);
|
106
|
+
|
107
|
+
|
102
108
|
### Background-image
|
103
109
|
|
104
110
|
The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear-gradients into one background-image property. background-image supports up to 10 background-images.
|
@@ -122,11 +128,25 @@ border-image supports short-hand notation.
|
|
122
128
|
|
123
129
|
### Border Radius
|
124
130
|
|
125
|
-
border-radius
|
131
|
+
border-radius can take short-hand notation, or the full radius expression.
|
126
132
|
|
127
133
|
@include border-radius(10px);
|
128
134
|
@include border-radius(5px 5px 2px 2px);
|
129
135
|
|
136
|
+
You can also specify individual corners.
|
137
|
+
|
138
|
+
@include border-top-left-radius(5px);
|
139
|
+
@include border-top-right-radius(5px);
|
140
|
+
@include border-bottom-right-radius(5px);
|
141
|
+
@include border-bottom-left-radius(5px);
|
142
|
+
|
143
|
+
Individual sides are supported as well.
|
144
|
+
|
145
|
+
@include border-top-radius(5px);
|
146
|
+
@include border-bottom-radius(5px);
|
147
|
+
@include border-left-radius(5px);
|
148
|
+
@include border-right-radius(5px);
|
149
|
+
|
130
150
|
|
131
151
|
### Box Shadow
|
132
152
|
|
@@ -135,7 +155,7 @@ box-shadow supports single or multiple arguments:
|
|
135
155
|
@include box-shadow(1px 1px 2px 0 #ff0000);
|
136
156
|
|
137
157
|
# Multiple arguments must be comma-delimited.
|
138
|
-
@include box-shadow(1px 1px 2px 0 #
|
158
|
+
@include box-shadow(1px 1px 2px 0 #fff000, -1px -2px 0 #ccc);
|
139
159
|
|
140
160
|
|
141
161
|
### Box Sizing
|
@@ -145,6 +165,13 @@ Box-sizing will change the box-model of the element it is applied to.
|
|
145
165
|
@include box-sizing(border-box);
|
146
166
|
|
147
167
|
|
168
|
+
### Columns
|
169
|
+
All current CSS3 column properties are supported. See the list at the bottom of the page for more info.
|
170
|
+
|
171
|
+
@include columns(12 8em);
|
172
|
+
@include column-rule(1px solid green);
|
173
|
+
|
174
|
+
|
148
175
|
### Flex Box
|
149
176
|
|
150
177
|
The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the flexible box-model. [More info.](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
|
@@ -317,6 +344,13 @@ Create beautiful buttons by defining a style and color argument; using a single
|
|
317
344
|
}
|
318
345
|
|
319
346
|
|
347
|
+
### Font-family
|
348
|
+
Bourbon provides a few default font-families for convenience sake.
|
349
|
+
Available font-family variables: `$georgia`, `$helvetica`, `$lucida-grand`, `$verdana`
|
350
|
+
|
351
|
+
font-family: $helvetica
|
352
|
+
|
353
|
+
|
320
354
|
### HTML5 Input Types
|
321
355
|
This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
|
322
356
|
In other words, it allows for easy targeting of all inputs that mimick input[type="text"].
|
@@ -341,7 +375,7 @@ Usage Note: You must use interpolation with the variable.
|
|
341
375
|
These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
|
342
376
|
|
343
377
|
Variables supported: $ease-in-*, $ease-out-*, $ease-in-out-*
|
344
|
-
* = [quad, cubic, quart, quint, sine, expo, circ]
|
378
|
+
* = [quad, cubic, quart, quint, sine, expo, circ, back]
|
345
379
|
|
346
380
|
@include animation-timing-function($ease-in-circ);
|
347
381
|
@include animation-basic(fade-in, 1s, $ease-in-quad);
|
@@ -373,12 +407,37 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
|
|
373
407
|
@ animation-play-state(*args)
|
374
408
|
@ animation-timing-function(*args)
|
375
409
|
|
410
|
+
@ appearance(*args)
|
376
411
|
@ background-image(*args)
|
412
|
+
@ background-size(*args)
|
377
413
|
@ border-image(*args)
|
378
|
-
|
414
|
+
|
415
|
+
border-radius
|
416
|
+
@ border-radius(*args)
|
417
|
+
@ border-radius-top(*args)
|
418
|
+
@ border-radius-top-left(*args)
|
419
|
+
@ border-radius-top-right(*args)
|
420
|
+
@ border-radius-bottom(*args)
|
421
|
+
@ border-radius-bottom-left(*args)
|
422
|
+
@ border-radius-bottom-right(*args)
|
423
|
+
@ border-radius-left(*args)
|
424
|
+
@ border-radius-right(*args)
|
425
|
+
|
379
426
|
@ box-shadow(*args)
|
380
427
|
@ box-sizing(*args)
|
381
428
|
|
429
|
+
columns
|
430
|
+
@columns(*args)
|
431
|
+
@column-count(*args)
|
432
|
+
@column-fill(*args)
|
433
|
+
@column-gap(*args)
|
434
|
+
@column-rule(*args)
|
435
|
+
@column-rule-color(*args)
|
436
|
+
@column-rule-style(*args)
|
437
|
+
@column-rule-width(*args)
|
438
|
+
@column-span(*args)
|
439
|
+
@column-width(*args)
|
440
|
+
|
382
441
|
flex-box
|
383
442
|
@ box(*args)
|
384
443
|
@ box-align(*args)
|
@@ -406,16 +465,38 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
|
|
406
465
|
|
407
466
|
#Addons
|
408
467
|
--------------------------------
|
409
|
-
|
468
|
+
@ button(*args)
|
469
|
+
@ position(*args)
|
470
|
+
|
410
471
|
#{$all-text-inputs}
|
411
|
-
|
412
|
-
|
472
|
+
|
473
|
+
font-family
|
474
|
+
$georgia
|
475
|
+
$helvetica
|
476
|
+
$lucida-grande
|
477
|
+
$verdana
|
478
|
+
|
479
|
+
timing-functions
|
480
|
+
$ease-in-*
|
481
|
+
$ease-out-*
|
482
|
+
$ease-in-out-*
|
413
483
|
|
414
484
|
|
415
485
|
## Help Out
|
416
486
|
|
417
487
|
Currently the project is a work in progress. Feel free to help out.
|
418
|
-
|
488
|
+
A general rule when considering filing a pull request for a new mixin: Do the following browsers *only* support the CSS3 property using vendor specific prefixes?
|
489
|
+
If the answer is yes, there is a high chance the mixin will be accepted via a pull request.
|
490
|
+
|
491
|
+
* Firefox 3.6+
|
492
|
+
* Safari 4.0+
|
493
|
+
* Chrome 4.0+
|
494
|
+
* Opera 10+
|
495
|
+
* IE 9+
|
496
|
+
|
497
|
+
*Bourbon does not intend to support IE filters.*
|
498
|
+
|
499
|
+
Resources for checking browser support: [MDN - Moz Dev Network](https://developer.mozilla.org/en-US/), [Mozilla CSS Extensions](https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions), [Webkit CSS Properties](http://css-infos.net/properties/webkit.php), [Firefox CSS Properties](http://css-infos.net/properties/firefox.php), [MSDN - Microsoft Dev Network](http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx)
|
419
500
|
|
420
501
|
Credits
|
421
502
|
-------
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bourbon
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -11,7 +11,7 @@ authors:
|
|
11
11
|
- Nick Quaranto
|
12
12
|
- Jeremy Raines
|
13
13
|
- Mike Burns
|
14
|
-
-
|
14
|
+
- Andres Mejia
|
15
15
|
- Travis Haynes
|
16
16
|
- Chris Lloyd
|
17
17
|
- Gabe Berke-Williams
|
@@ -19,11 +19,11 @@ authors:
|
|
19
19
|
autorequire:
|
20
20
|
bindir: bin
|
21
21
|
cert_chain: []
|
22
|
-
date: 2011-
|
22
|
+
date: 2011-11-18 00:00:00.000000000Z
|
23
23
|
dependencies:
|
24
24
|
- !ruby/object:Gem::Dependency
|
25
25
|
name: sass
|
26
|
-
requirement: &
|
26
|
+
requirement: &70161945062080 !ruby/object:Gem::Requirement
|
27
27
|
none: false
|
28
28
|
requirements:
|
29
29
|
- - ! '>='
|
@@ -31,7 +31,7 @@ dependencies:
|
|
31
31
|
version: '3.1'
|
32
32
|
type: :runtime
|
33
33
|
prerelease: false
|
34
|
-
version_requirements: *
|
34
|
+
version_requirements: *70161945062080
|
35
35
|
description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
|
36
36
|
framework of
|
37
37
|
|
@@ -59,15 +59,19 @@ files:
|
|
59
59
|
- Rakefile
|
60
60
|
- app/assets/stylesheets/_bourbon.scss
|
61
61
|
- app/assets/stylesheets/addons/_button.scss
|
62
|
+
- app/assets/stylesheets/addons/_font-family.scss
|
62
63
|
- app/assets/stylesheets/addons/_html5-input-types.scss
|
63
64
|
- app/assets/stylesheets/addons/_position.scss
|
64
65
|
- app/assets/stylesheets/addons/_timing-functions.scss
|
65
66
|
- app/assets/stylesheets/css3/_animation.scss
|
67
|
+
- app/assets/stylesheets/css3/_appearance.scss
|
66
68
|
- app/assets/stylesheets/css3/_background-image.scss
|
69
|
+
- app/assets/stylesheets/css3/_background-size.scss
|
67
70
|
- app/assets/stylesheets/css3/_border-image.scss
|
68
71
|
- app/assets/stylesheets/css3/_border-radius.scss
|
69
72
|
- app/assets/stylesheets/css3/_box-shadow.scss
|
70
73
|
- app/assets/stylesheets/css3/_box-sizing.scss
|
74
|
+
- app/assets/stylesheets/css3/_columns.scss
|
71
75
|
- app/assets/stylesheets/css3/_flex-box.scss
|
72
76
|
- app/assets/stylesheets/css3/_inline-block.scss
|
73
77
|
- app/assets/stylesheets/css3/_linear-gradient.scss
|
@@ -81,7 +85,6 @@ files:
|
|
81
85
|
- app/assets/stylesheets/functions/_radial-gradient.scss
|
82
86
|
- app/assets/stylesheets/functions/_tint-shade.scss
|
83
87
|
- bourbon.gemspec
|
84
|
-
- generate-bourbon.sh
|
85
88
|
- lib/bourbon.rb
|
86
89
|
- lib/bourbon/engine.rb
|
87
90
|
- lib/bourbon/sass_extensions.rb
|
@@ -110,7 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
110
113
|
version: '0'
|
111
114
|
requirements: []
|
112
115
|
rubyforge_project: bourbon
|
113
|
-
rubygems_version: 1.8.
|
116
|
+
rubygems_version: 1.8.11
|
114
117
|
signing_key:
|
115
118
|
specification_version: 3
|
116
119
|
summary: Bourbon Sass Mixins using SCSS syntax.
|
data/generate-bourbon.sh
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
#!/bin/sh
|
2
|
-
|
3
|
-
# README
|
4
|
-
# This will generate a bourbon directory and convert all .css.scss to .scss extensions.
|
5
|
-
# The bourbon directory is for 'sass --watch' use outside of rails.
|
6
|
-
# Step 1: Make install executable by changing permission
|
7
|
-
# chmod a+x generate-bourbon.sh
|
8
|
-
|
9
|
-
# Step 2: Generate Files
|
10
|
-
# ./generate-bourbon.sh
|
11
|
-
|
12
|
-
echo Creating directory...
|
13
|
-
mkdir -p $PWD/bourbon/lib
|
14
|
-
|
15
|
-
echo Copying files...
|
16
|
-
cp -a $PWD/app/assets/stylesheets/* $PWD/bourbon
|
17
|
-
cp -a $PWD/lib/* $PWD/bourbon/lib
|
18
|
-
rm -r $PWD/bourbon/lib/tasks
|
19
|
-
rm -r $PWD/bourbon/lib/bourbon/engine.rb
|
20
|
-
rm -r $PWD/bourbon/lib/bourbon/version.rb
|
21
|
-
|
22
|
-
echo Done.
|