bourbon 1.3.0 → 1.3.2

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore CHANGED
@@ -1,5 +1,7 @@
1
1
  *swp
2
2
  *gem
3
3
  .sass-cache/
4
- bourbon/
4
+ /bourbon/
5
5
  demo/
6
+ tmp/
7
+ tags
@@ -1,16 +1,50 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- bourbon (0.1.4)
4
+ bourbon (1.3.2)
5
5
  sass (>= 3.1)
6
6
 
7
7
  GEM
8
8
  remote: http://rubygems.org/
9
9
  specs:
10
- sass (3.1.7)
10
+ aruba (0.4.6)
11
+ bcat (>= 0.6.1)
12
+ childprocess (>= 0.2.0)
13
+ cucumber (>= 1.0.2)
14
+ rdiscount (>= 1.6.8)
15
+ rspec (>= 2.6.0)
16
+ bcat (0.6.2)
17
+ rack (~> 1.0)
18
+ builder (3.0.0)
19
+ childprocess (0.2.9)
20
+ ffi (~> 1.0.6)
21
+ cucumber (1.1.4)
22
+ builder (>= 2.1.2)
23
+ diff-lcs (>= 1.1.2)
24
+ gherkin (~> 2.7.1)
25
+ json (>= 1.4.6)
26
+ term-ansicolor (>= 1.0.6)
27
+ diff-lcs (1.1.3)
28
+ ffi (1.0.11)
29
+ gherkin (2.7.1)
30
+ json (>= 1.4.6)
31
+ json (1.6.4)
32
+ rack (1.3.6)
33
+ rdiscount (1.6.8)
34
+ rspec (2.7.0)
35
+ rspec-core (~> 2.7.0)
36
+ rspec-expectations (~> 2.7.0)
37
+ rspec-mocks (~> 2.7.0)
38
+ rspec-core (2.7.1)
39
+ rspec-expectations (2.7.0)
40
+ diff-lcs (~> 1.1.2)
41
+ rspec-mocks (2.7.0)
42
+ sass (3.1.12)
43
+ term-ansicolor (1.0.7)
11
44
 
12
45
  PLATFORMS
13
46
  ruby
14
47
 
15
48
  DEPENDENCIES
49
+ aruba (~> 0.4)
16
50
  bourbon!
data/Rakefile CHANGED
@@ -1,14 +1,2 @@
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,6 +1,22 @@
1
1
  // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2
2
  // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3
3
 
4
+ // Official animation shorthand property.
5
+ @mixin animation ($animation-1,
6
+ $animation-2: false, $animation-3: false,
7
+ $animation-4: false, $animation-5: false,
8
+ $animation-6: false, $animation-7: false,
9
+ $animation-8: false, $animation-9: false)
10
+ {
11
+ $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
12
+ $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
13
+
14
+ -webkit-animation: $full;
15
+ -moz-animation: $full;
16
+ animation: $full;
17
+ }
18
+
19
+ // Individual Animation Properties
4
20
  @mixin animation-name ($name-1,
5
21
  $name-2: false, $name-3: false,
6
22
  $name-4: false, $name-5: false,
@@ -127,8 +143,7 @@
127
143
  }
128
144
 
129
145
 
130
- // Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
131
- // Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
146
+ // Deprecated
132
147
  @mixin animation-basic ($name, $time: 0, $motion: ease) {
133
148
  $length-of-name: length($name);
134
149
  $length-of-time: length($time);
@@ -151,21 +166,6 @@
151
166
  } @else {
152
167
  @include animation-timing-function( $motion);
153
168
  }
169
+ @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
154
170
  }
155
171
 
156
- // Official animation shorthand property.
157
- @mixin animation ($animation-1,
158
- $animation-2: false, $animation-3: false,
159
- $animation-4: false, $animation-5: false,
160
- $animation-6: false, $animation-7: false,
161
- $animation-8: false, $animation-9: false)
162
- {
163
- $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
164
- $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
165
-
166
- -webkit-animation: $full;
167
- -moz-animation: $full;
168
- -ms-animation: $full;
169
- -o-animation: $full;
170
- animation: $full;
171
- }
@@ -0,0 +1,5 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bourbon"
4
+
5
+ Bourbon::Generator.new(ARGV).run
@@ -27,4 +27,6 @@ that support only CSS3 prefixed properties.
27
27
  s.require_paths = ["lib"]
28
28
 
29
29
  s.add_dependency('sass', '>= 3.1')
30
+
31
+ s.add_development_dependency('aruba', '~> 0.4')
30
32
  end
@@ -0,0 +1,17 @@
1
+ @disable-bundler
2
+ Feature: Generate bourbon files
3
+
4
+ Scenario: Bourbon generates a new bourbon installation
5
+ When I generate bourbon files
6
+ Then the sass directories should have been generated
7
+ And the following directories should exist:
8
+ | bourbon |
9
+ | bourbon/lib |
10
+ And the master bourbon partial should have been generated
11
+ And the lib files should have been generated
12
+ And the output should contain "Bourbon files generated to bourbon/"
13
+
14
+ Scenario: Generating does not overwrite an existing bourbon directory
15
+ Given bourbon is already generated
16
+ When I generate bourbon files
17
+ Then the output should contain "Bourbon files already generated, doing nothing."
@@ -0,0 +1,33 @@
1
+ Given /^bourbon is already generated$/ do
2
+ set_up_bourbon_directory
3
+ generate_bourbon
4
+ end
5
+
6
+ When /^I generate bourbon files$/ do
7
+ set_up_bourbon_directory
8
+ generate_bourbon
9
+ end
10
+
11
+ When /^I update bourbon files$/ do
12
+ update_bourbon
13
+ end
14
+
15
+ Then /^the sass directories should have been generated$/ do
16
+ sass_directories = ["bourbon/addons", "bourbon/css3", "bourbon/functions"]
17
+ check_directory_presence(sass_directories, true)
18
+ end
19
+
20
+ Then /^the master bourbon partial should have been generated$/ do
21
+ check_file_presence(["bourbon/_bourbon.scss"], true)
22
+ end
23
+
24
+ Then /^the lib files should have been generated$/ do
25
+ check_file_presence(["bourbon/lib/bourbon.rb"], true)
26
+ check_directory_presence(["bourbon/lib/bourbon"], true)
27
+ check_file_presence(["bourbon/lib/bourbon/sass_extensions.rb"], true)
28
+ check_directory_presence(["bourbon/lib/bourbon/sass_extensions"], true)
29
+ end
30
+
31
+ Then /^bourbon should not have been generated$/ do
32
+ check_directory_presence(["bourbon"], false)
33
+ end
@@ -0,0 +1,16 @@
1
+ module BourbonSupport
2
+ def set_up_bourbon_directory
3
+ write_file("Gemfile", "gem 'bourbon', :path => '../../..'")
4
+ run_simple("bundle install")
5
+ end
6
+
7
+ def generate_bourbon
8
+ run_simple("bundle exec bourbon generate")
9
+ end
10
+
11
+ def update_bourbon
12
+ run_simple("bundle exec bourbon update")
13
+ end
14
+ end
15
+
16
+ World(BourbonSupport)
@@ -0,0 +1 @@
1
+ require "aruba/cucumber"
@@ -0,0 +1,17 @@
1
+ @disable-bundler
2
+ Feature: Update bourbon files
3
+
4
+ Scenario: Updating updates an existing bourbon install
5
+ When I generate bourbon files
6
+ And I write to "bourbon/_bourbon.scss" with:
7
+ """
8
+ foobar
9
+ """
10
+ And I update bourbon files
11
+ Then the output should contain "Bourbon files updated."
12
+ And the file "bourbon/_bourbon.scss" should not contain "foobar"
13
+
14
+ Scenario: Updating does not generate a new bourbon install
15
+ When I update bourbon files
16
+ Then bourbon should not have been generated
17
+ And the output should contain "No existing bourbon installation. Doing nothing."
@@ -1,3 +1,5 @@
1
+ require "bourbon/generator"
2
+
1
3
  module Bourbon
2
4
  if defined?(Rails)
3
5
  class Engine < ::Rails::Engine
@@ -0,0 +1,5 @@
1
+ module Bourbon
2
+ class Engine < Rails::Engine
3
+ # auto wire
4
+ end
5
+ end
@@ -0,0 +1,86 @@
1
+ require "fileutils"
2
+
3
+ module Bourbon
4
+ class Generator
5
+ def initialize(arguments)
6
+ @subcommand = arguments.first
7
+ end
8
+
9
+ def run
10
+ if @subcommand == "generate"
11
+ generate
12
+ elsif @subcommand == "update"
13
+ update
14
+ end
15
+ end
16
+
17
+ def update
18
+ if bourbon_files_already_exist?
19
+ remove_bourbon_directory
20
+ generate_files
21
+ puts "Bourbon files updated."
22
+ else
23
+ puts "No existing bourbon installation. Doing nothing."
24
+ end
25
+ end
26
+
27
+ def generate
28
+ if bourbon_files_already_exist?
29
+ puts "Bourbon files already generated, doing nothing."
30
+ else
31
+ generate_files
32
+ puts "Bourbon files generated to bourbon/"
33
+ end
34
+ end
35
+
36
+ private
37
+
38
+ def bourbon_files_already_exist?
39
+ Dir.exist?("bourbon")
40
+ end
41
+
42
+ def generate_files
43
+ make_lib_directory
44
+ copy_in_sass_extensions
45
+ copy_in_scss_files
46
+ end
47
+
48
+ def remove_bourbon_directory
49
+ FileUtils.rm_rf("bourbon")
50
+ end
51
+
52
+ def make_lib_directory
53
+ FileUtils.mkdir_p("bourbon/lib/bourbon")
54
+ end
55
+
56
+ def copy_in_sass_extensions
57
+ FileUtils.cp(File.join(lib_directory, "bourbon.rb"), "bourbon/lib/")
58
+ FileUtils.cp(File.join(lib_bourbon_directory, "sass_extensions.rb"), "bourbon/lib/bourbon/")
59
+ FileUtils.cp_r(File.join(lib_bourbon_directory, "sass_extensions"), "bourbon/lib/bourbon/")
60
+ end
61
+
62
+ def copy_in_scss_files
63
+ FileUtils.cp_r(all_stylesheets, "bourbon/")
64
+ end
65
+
66
+ def all_stylesheets
67
+ Dir["#{stylesheets_directory}/*"]
68
+ end
69
+
70
+ def stylesheets_directory
71
+ File.join(top_level_directory, "app", "assets", "stylesheets")
72
+ end
73
+
74
+ def lib_directory
75
+ File.join(top_level_directory, "lib")
76
+ end
77
+
78
+ def lib_bourbon_directory
79
+ File.join(top_level_directory, "lib", "bourbon")
80
+ end
81
+
82
+ def top_level_directory
83
+ File.dirname(File.dirname(File.dirname(__FILE__)))
84
+ end
85
+ end
86
+ end
@@ -0,0 +1,6 @@
1
+ module Bourbon::SassExtensions
2
+ end
3
+
4
+ require "sass"
5
+
6
+ require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
@@ -0,0 +1,13 @@
1
+ module Bourbon::SassExtensions::Functions
2
+ end
3
+
4
+ require File.join(File.dirname(__FILE__), "/functions/compact")
5
+
6
+ module Sass::Script::Functions
7
+ include Bourbon::SassExtensions::Functions::Compact
8
+ end
9
+
10
+ # Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
11
+ class Sass::Script::Functions::EvaluationContext
12
+ include Sass::Script::Functions
13
+ end
@@ -0,0 +1,13 @@
1
+ # Compact function pulled from compass
2
+ module Bourbon::SassExtensions::Functions::Compact
3
+
4
+ def compact(*args)
5
+ sep = :comma
6
+ if args.size == 1 && args.first.is_a?(Sass::Script::List)
7
+ args = args.first.value
8
+ sep = args.first.separator
9
+ end
10
+ Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
11
+ end
12
+
13
+ end
@@ -0,0 +1,3 @@
1
+ module Bourbon
2
+ VERSION = "1.3.2"
3
+ end
data/readme.md CHANGED
@@ -1,4 +1,4 @@
1
- # Bourbon Sass Mixins
1
+ # Bourbon Sass Mixins – [View Documentation](http://thoughtbot.com/bourbon)
2
2
  The purpose of Bourbon Sass Mixins is to provide a comprehensive library of Sass
3
3
  mixins that are designed to be as vanilla as possible, meaning they should not
4
4
  deter you from using the original CSS syntax.
@@ -54,354 +54,53 @@ Import the mixins at the beginning of your stylesheet
54
54
  rake bourbon:install[app/stylesheets]
55
55
 
56
56
  # Install without Rails
57
- Bourbon includes an easy way to generate a directory with all the necessary files.
57
+ Bourbon includes an easy way to generate a directory with all the necessary files.
58
+ Install the bourbon gem:
58
59
 
59
- rake generate
60
+ gem install bourbon
60
61
 
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/`.
62
+ Change the directory to where you want to generate the bourbon folder and files:
63
63
 
64
- To output properly, Bourbon must be explicitly required (`-r`) by Sass at the command line:
64
+ cd project_name/stylesheets/sass/
65
65
 
66
- # Example (project root directory)
67
- sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
68
-
69
- In this case, you will need to import the mixins at the beginning of your stylesheet:
70
-
71
- @import 'bourbon/bourbon';
72
-
73
- # Browser support
74
- Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
75
-
76
- # Using Bourbon Mixins
77
- Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
78
-
79
-
80
- ### Animation
81
-
82
- The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
83
-
84
- @include animation-name(slideup, fadein);
85
- @include animation-duration(1.0s, 1.2s);
86
- @include animation-timing-function(ease-in-out, ease-out);
87
-
88
- # Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
89
- @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
90
-
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
-
108
- ### Background-image
109
-
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.
111
-
112
- # Multiple image assets
113
- @include background-image( url("/images/a.png"), url("images/b.png") );
114
-
115
- # Image asset with a linear-gradient
116
- @include background-image( url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%) );
117
-
118
- # Multiple linear-gradients;
119
- @include background-image( linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
120
-
121
- # NOT SUPPORTED - Multiple image assets with shorthand notation
122
- @include background-image( url("/images/a.png") center no-repeat, url("images/b.png") left repeat );
123
-
124
- #### Note about shorthand notation
125
-
126
- All CSS background properties support comma delimited values.
127
- For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:
128
-
129
- @include background-image( url("/images/a.png"), url("images/b.png") );
130
- background-position: center top, center;
131
- background-repeat: no-repeat, repeat-x;
132
-
133
-
134
- ### Border-image
135
-
136
- border-image supports short-hand notation.
137
-
138
- @include border-image(url(border.png) 27 round);
139
-
140
-
141
- ### Border Radius
142
-
143
- border-radius can take short-hand notation, or the full radius expression.
144
-
145
- @include border-radius(10px);
146
- @include border-radius(5px 5px 2px 2px);
147
-
148
- You can also specify individual corners.
149
-
150
- @include border-top-left-radius(5px);
151
- @include border-top-right-radius(5px);
152
- @include border-bottom-right-radius(5px);
153
- @include border-bottom-left-radius(5px);
154
-
155
- Individual sides are supported as well.
156
-
157
- @include border-top-radius(5px);
158
- @include border-bottom-radius(5px);
159
- @include border-left-radius(5px);
160
- @include border-right-radius(5px);
161
-
162
-
163
- ### Box Shadow
164
-
165
- box-shadow supports single or multiple arguments:
166
-
167
- @include box-shadow(1px 1px 2px 0 #ff0000);
168
-
169
- # Multiple arguments must be comma-delimited.
170
- @include box-shadow(1px 1px 2px 0 #fff000, -1px -2px 0 #ccc);
171
-
172
-
173
- ### Box Sizing
174
-
175
- Box-sizing will change the box-model of the element it is applied to.
176
-
177
- @include box-sizing(border-box);
178
-
179
-
180
- ### Columns
181
- All current CSS3 column properties are supported. See the list at the bottom of the page for more info.
182
-
183
- @include columns(12 8em);
184
- @include column-rule(1px solid green);
185
-
186
-
187
- ### Flex Box
188
-
189
- 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/)
190
-
191
- div.parent {
192
- @include display-box;
193
- @include box-align(start);
194
- @include box-orient(horizontal);
195
- @include box-pack(start);
196
- }
197
-
198
- div.parent > div.child {
199
- @include box-flex(2);
200
- }
201
-
202
- # Alternative custom shorthand mixin.
203
- div.parent {
204
- @include box($orient: horizontal, $pack: center, $align: stretch);
205
- }
206
-
207
-
208
- ### Inline-block
209
-
210
- The inline-block mixin provides support for the inline-block property in IE6 and IE7.
211
-
212
- @include inline-block;
213
-
214
-
215
- ### Linear-Gradient
216
-
217
- Gradient position is optional, default is top. Position can be a degree. Color-stops are optional as well. Mixin will support up to 10 gradients.
66
+ Install bourbon:
218
67
 
219
- @include linear-gradient(#1e5799, #2989d8);
220
- @include linear-gradient(top, #1e5799 0%, #2989d8 100%);
221
- @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
68
+ bourbon install
222
69
 
70
+ This will generate a folder called `bourbon` containing all the mixins and other necessary bourbon files. It is recommended not to add or modify the bourbon files so that you can update bourbon easily.
223
71
 
224
- ### Position
72
+ Update an existing bourbon installation with:
225
73
 
226
- Shorthand notation for setting the position of elements in your page.
74
+ bourbon update
227
75
 
228
- Instead of writing:
76
+ This will delete the bourbon directory and regenerate it.
229
77
 
230
- position: relative;
231
- top: 0px;
232
- left: 100px;
78
+ *Sass Watch:* To output properly, Bourbon must be explicitly required (`-r`) by Sass at the command line:
233
79
 
234
- You can write:
235
-
236
- @include position(relative, 0px 0 0 100px);
237
-
238
- The first parameter is optional, with a default value of relative. The second parameter is a space delimited list of values that follow the standard CSS shorthand notation.
239
-
240
- Note: unit-less values will be ignored. In the example above, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.
241
-
242
-
243
- ### Radial-Gradient
244
-
245
- Takes up to 10 gradients. Position and shape are required.
246
-
247
- @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
248
- @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
249
-
250
-
251
- ### Transform & Transform-origin
252
-
253
- @include transform(translateY(50px));
254
- @include transform-origin(center top);
255
-
256
-
257
- ### Transitions
258
-
259
- Shorthand mixin: Supports multiple parentheses-delimited values for each variable.
260
-
261
- @include transition (all, 2.0s, ease-in-out);
262
- @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
263
- @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
264
-
265
-
266
- ## Functions
267
- ### Compact
268
-
269
- The compact function will strip out any value from a list that is 'false'. Takes up to 10 arguments.
270
-
271
- $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
272
-
273
-
274
- ### Golden Ratio
275
-
276
- Returns the golden ratio of a given number. Must provide a Pixel or Em value for first argument. Also takes a required increment value that is not zero and an integer: ...-3, -2, -1, 1, 2, 3...
277
-
278
- div {
279
- Increment Up GR with positive value
280
- font-size: golden-ratio(14px, 1); // returns: 22.652px
281
-
282
- Increment Down GR with negative value
283
- font-size: golden-ratio(14px, -1); // returns: 8.653px
284
-
285
- Can be used with ceil(round up) or floor(round down)
286
- font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
287
- font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
288
- }
289
-
290
- Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com)
291
-
292
-
293
- ### Linear-gradient
294
-
295
- Outputs a linear-gradient. Use in conjunction with the background-image mixin. The function takes the same arguments as the linear-gradient mixin (See Mixins section of this README).
296
-
297
- # Image asset with a linear-gradient
298
- @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
299
-
300
- # Multiple linear-gradients;
301
- @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
302
-
303
-
304
- ### Grid-width
305
-
306
- Easily setup and follow a grid based design. Need help busting a move grid-style?!? Check out [gridulator.com](http://gridulator.com/)
307
-
308
- # The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
309
- $gw-column: 100px; // Column Width
310
- $gw-gutter: 40px; // Gutter Width
311
-
312
- div {
313
- width: grid-width(4); // returns 520px;
314
- margin-left: $gw-gutter; // returns 40px;
315
- }
316
-
317
-
318
- ### Tint & Shade
319
-
320
- Tint & shade are different from lighten() and darken() functions built into sass.
321
- Tint is a mix of a color with white. Tint takes a color and a percent argument.
322
-
323
- div {
324
- background: tint(red, 40%);
325
- }
326
-
327
- Shade is a mix of a color with black. Shade takes a color and a percent argument.
328
-
329
- div {
330
- background: shade(blue, 60%);
331
- }
332
-
333
-
334
- ## Add-ons
335
-
336
- ### Buttons
337
-
338
- The button add-on provides well-designed buttons with a single line in your CSS.
339
- The mixin supports a style parameter and an optional color argument. The available styles are **"simple"** (default), **"shiny"**, and **"pill"**.
340
-
341
- # The mixin can be called with no arguments, which will render a blue button with the "simple" style.
342
- button, input[type="button"] {
343
- @include button;
344
- }
345
-
346
- # Pass a style argument
347
- button, input[type="button"] {
348
- @include button(shiny);
349
- }
350
-
351
- Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
352
-
353
- # Style + color arguments
354
- button, input[type="button"] {
355
- @include button(shiny, #ff0000);
356
- }
357
-
358
-
359
- ### Font-family
360
- Bourbon provides a few default font-families for convenience sake.
361
- Available font-family variables: `$georgia`, `$helvetica`, `$lucida-grand`, `$verdana`
362
-
363
- font-family: $helvetica
364
-
365
-
366
- ### HTML5 Input Types
367
- This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
368
- In other words, it allows for easy targeting of all inputs that mimick input[type="text"].
369
-
370
- input[type="*"]
371
- * = [color, date, datetime, datetime-local, email, month, number, password, search, tel, text, time, url, week]
372
-
373
-
374
- Usage Note: You must use interpolation with the variable.
375
-
376
- #{$all-text-inputs}, textarea {
377
- border: 1px solid green;
378
- }
379
-
380
- Output:
381
- input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea {
382
- border: 1px solid green;
383
- }
80
+ # Example (project root directory)
81
+ sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
384
82
 
83
+ You will need to import the mixins at the beginning of your stylesheet(s):
385
84
 
386
- ### Timing functions
387
- 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).
85
+ @import 'bourbon/bourbon';
388
86
 
389
- Variables supported: $ease-in-*, $ease-out-*, $ease-in-out-*
390
- * = [quad, cubic, quart, quint, sine, expo, circ, back]
391
87
 
392
- @include animation-timing-function($ease-in-circ);
393
- @include animation-basic(fade-in, 1s, $ease-in-quad);
88
+ # Browser support
89
+ Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
394
90
 
395
91
 
396
92
  # All Supported Functions, Mixins, and Addons
93
+ [View the Bourbon documentation](http://thoughtbot.com/bourbon)
94
+
397
95
  *@ denotes a mixin and must be prefaced with @include*
398
96
 
399
97
  #Functions
400
98
  --------------------------------
401
99
  compact(*args)
402
100
  golden-ratio(*args)
403
- linear-gradient(*args)
404
101
  grid-width(*args)
102
+ linear-gradient(*args)
103
+ radial-gradient(*args)
405
104
  shade(*args)
406
105
  tint(*args)
407
106
 
@@ -409,7 +108,6 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
409
108
  --------------------------------
410
109
  animation
411
110
  @ animation(*args)
412
- @ animation-basic(*args)
413
111
  @ animation-delay(*args)
414
112
  @ animation-direction(*args)
415
113
  @ animation-duration(*args)
@@ -492,6 +190,7 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
492
190
  $ease-in-*
493
191
  $ease-out-*
494
192
  $ease-in-out-*
193
+ * = quad, cubic, quart, quint, sine, expo, circ, back
495
194
 
496
195
 
497
196
  ## Help Out
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.3.0
4
+ version: 1.3.2
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -19,11 +19,11 @@ authors:
19
19
  autorequire:
20
20
  bindir: bin
21
21
  cert_chain: []
22
- date: 2012-01-10 00:00:00.000000000 Z
22
+ date: 2012-01-22 00:00:00.000000000 Z
23
23
  dependencies:
24
24
  - !ruby/object:Gem::Dependency
25
25
  name: sass
26
- requirement: &70286637279820 !ruby/object:Gem::Requirement
26
+ requirement: &70209714092360 !ruby/object:Gem::Requirement
27
27
  none: false
28
28
  requirements:
29
29
  - - ! '>='
@@ -31,7 +31,18 @@ dependencies:
31
31
  version: '3.1'
32
32
  type: :runtime
33
33
  prerelease: false
34
- version_requirements: *70286637279820
34
+ version_requirements: *70209714092360
35
+ - !ruby/object:Gem::Dependency
36
+ name: aruba
37
+ requirement: &70209714091860 !ruby/object:Gem::Requirement
38
+ none: false
39
+ requirements:
40
+ - - ~>
41
+ - !ruby/object:Gem::Version
42
+ version: '0.4'
43
+ type: :development
44
+ prerelease: false
45
+ version_requirements: *70209714091860
35
46
  description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
36
47
  framework of
37
48
 
@@ -48,7 +59,8 @@ description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a compr
48
59
  '
49
60
  email:
50
61
  - support@thoughtbot.com
51
- executables: []
62
+ executables:
63
+ - bourbon
52
64
  extensions: []
53
65
  extra_rdoc_files: []
54
66
  files:
@@ -84,9 +96,16 @@ files:
84
96
  - app/assets/stylesheets/functions/_linear-gradient.scss
85
97
  - app/assets/stylesheets/functions/_radial-gradient.scss
86
98
  - app/assets/stylesheets/functions/_tint-shade.scss
99
+ - bin/bourbon
87
100
  - bourbon.gemspec
101
+ - features/generate.feature
102
+ - features/step_definitions/bourbon_steps.rb
103
+ - features/support/bourbon_support.rb
104
+ - features/support/env.rb
105
+ - features/update.feature
88
106
  - lib/bourbon.rb
89
107
  - lib/bourbon/engine.rb
108
+ - lib/bourbon/generator.rb
90
109
  - lib/bourbon/sass_extensions.rb
91
110
  - lib/bourbon/sass_extensions/functions.rb
92
111
  - lib/bourbon/sass_extensions/functions/compact.rb
@@ -117,4 +136,9 @@ rubygems_version: 1.8.10
117
136
  signing_key:
118
137
  specification_version: 3
119
138
  summary: Bourbon Sass Mixins using SCSS syntax.
120
- test_files: []
139
+ test_files:
140
+ - features/generate.feature
141
+ - features/step_definitions/bourbon_steps.rb
142
+ - features/support/bourbon_support.rb
143
+ - features/support/env.rb
144
+ - features/update.feature