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 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: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
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: bold 14px "helvetica neue", helvetica, arial, sans-serif;
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;
@@ -0,0 +1,4 @@
1
+ $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2
+ $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3
+ $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4
+ $verdana: Verdana, Geneva, sans-serif;
@@ -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, 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);
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, 0.460, 0.450, 0.940);
15
- $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
16
- $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
17
- $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
18
- $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
19
- $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
20
- $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
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, 0.030, 0.515, 0.955);
24
- $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
25
- $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
26
- $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
27
- $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
28
- $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
29
- $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
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,7 @@
1
+ @mixin appearance ($value) {
2
+ -webkit-appearance: $value;
3
+ -moz-appearance: $value;
4
+ -ms-appearance: $value;
5
+ -o-appearance: $value;
6
+ appearance: $value;
7
+ }
@@ -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
- @if $increment == 0 {
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
 
@@ -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", "Andrés Mejía", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea"]
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."
@@ -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}/public/stylesheets/sass/bourbon`
7
- `cp -a #{source_root}/app/assets/stylesheets/* #{Rails.root}/public/stylesheets/sass/bourbon`
8
- `find #{Rails.root}/public/stylesheets/sass/bourbon -name "*.css.scss" | while read i; do mv "$i" "${i%.css.scss}.scss"; done`
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 sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax.
3
- The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
4
- Bourbon uses SCSS syntax.
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
- Update your Gemfile
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
- Rename application.css to application.css.scss
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 disabled the require_tree sprocket directive.
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
- # Install without Rails
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
- chmod a+x generate-bourbon.sh
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
- ./generate-bourbon.sh
59
+ rake generate
58
60
 
59
- **Step 3:** Move the new *bourbon* directory into your project's sass directory. *e.g. stylesheets/sass/*
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
- **Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:
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 as well, you will need to import the mixins at the beginning of your stylesheet
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 will also take short-hand notation.
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 #fff0000, -1px -2px 0 #ccc);
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
- @ border-radius(*args)
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
- @ button(*args)
468
+ @ button(*args)
469
+ @ position(*args)
470
+
410
471
  #{$all-text-inputs}
411
- @ position(*args)
412
- timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)
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
- **Pull requests:** See *Browser Support* in this readme for more info
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.1.0
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
- - Andrés Mejía
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-10-16 00:00:00.000000000Z
22
+ date: 2011-11-18 00:00:00.000000000Z
23
23
  dependencies:
24
24
  - !ruby/object:Gem::Dependency
25
25
  name: sass
26
- requirement: &70205360452500 !ruby/object:Gem::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: *70205360452500
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.10
116
+ rubygems_version: 1.8.11
114
117
  signing_key:
115
118
  specification_version: 3
116
119
  summary: Bourbon Sass Mixins using SCSS syntax.
@@ -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.