bourbon 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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.
|