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 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.