thoughtbot / bourbon

A Lightweight Sass Tool Set

A Lightweight Sass Tool Set

Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author.

It is…

• Dependency-free: Bourbon is pure Sass.
• Human-readable: We aim for clarity over brevity.
• Lightweight: Zero output post-install and has no visual opinion.

Helpful Links

• Documentation
• Change log
• Twitter
• Stack Overflow

Table of Contents

• Requirements
• Installation
• Command Line Interface
• Browser Support
• Contributing
• License
• About

Requirements

• Sass 3.4+ or LibSass 3.3+

Installation

1. Install the Bourbon gem using the RubyGems package manager:

   gem install bourbon

2. Install the Bourbon library into the current directory:

   bourbon install

   Pro Tip: You can target installation into a specific directory using the path flag:

   bourbon install --path my/custom/path/

3. Import Bourbon at the beginning of your stylesheet:

   @import "bourbon/bourbon";

   It’s not recommended that you modify Bourbon’s files directly as it will make updating to future versions difficult, by overwriting your custom changes or causing merge conflicts.

Installation for Ruby on Rails 4.2+

1. Add Bourbon to your Gemfile:

   gem "bourbon"

2. Then run:

   bundle install

3. Restart your server and rename application.css to application.scss:

   mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

4. Delete all Sprockets directives in application.scss (require, require_tree and require_self) and use Sass’s native @import instead (why?).

5. Import Bourbon at the beginning of application.scss. Any project styles that utilize Bourbon’s features must be imported after Bourbon.

   @import "bourbon";
   @import "home";
   @import "users";

Installing with npm and using a Node-based asset pipeline

1. Add Bourbon as a dependency:

   npm install --save bourbon

2. If you’re using eyeglass, skip to Step 3. Otherwise, you’ll need to add Bourbon to your node-sass includePaths option. require("bourbon").includePaths is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project.

3. Import Bourbon into your Sass files:

   @import "bourbon";

Installing older versions of Bourbon

1. Uninstall any Bourbon gem versions you already have:

   gem uninstall bourbon

2. Reinstall the Bourbon gem, using the -v flag to specify the version you need:

   gem install bourbon -v 4.2.7

3. Follow the instructions above to install Bourbon into your project.

Command Line Interface

bourbon [options]

Options

Option	Description
-h, --help	Show help
-v, --version	Show the version number
--path	Specify a custom path
--force	Force install (overwrite)

Commands

Command	Description
bourbon install	Install Bourbon into the current directory
bourbon update	Overwrite and update Bourbon in the current directory
bourbon help	Show help

Browser Support

Bourbon supports Internet Explorer 11+ and the latest versions of Chrome, Firefox, Safari, and Edge.

Contributing

See the contributing document. Thank you, contributors!

License

Bourbon is copyright © 2011 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the license.

About thoughtbot

This repo is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects. We are available for hire.

bourbon's Issues

Deprecated Webkit Linear Gradient not respecting gradient direction

I'm trying to create a gradient that goes from left to right. I'm using the following in my SCSS file using Bourbon 1.4.0:
@include linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(255,255,255,.5) 5%, rgba(255,255,255,0) 12%, $fallback:'transparent');

This is what I end up getting back
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(5%, rgba(255, 255, 255, 0.5)), color-stop(12%, rgba(255, 255, 255, 0)));
background-image: linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.5) 5%, rgba(255, 255, 255, 0) 12%);

So in iOS4 the gradient ends up going from the top down. I also tried using different degrees for the direction but the changes never took effect in older webkit.

Using Bourbon in another gem?

Is it possible to include Bourbon in another gem or a mountable engine? I'm having difficulty loading the Bourbon mixins and functions in the gem's stylesheets.

Is there documentation I can reference, or an example gem that includes Bourbon?

Many thanks.

Error Running Rake Install

When attempting to run rake bourbon:install the rake task aborts after throwing a whole bunch of errors about already initialized constants. My stack is as follows:

Rails 3.0.9
Rake 0.9.2
Bourbon 0.2.1
Ruby 1.9.2-p290 (through RVM)

Missing some images..

On http://thoughtbot.com/bourbon/ page missing some images..

minor typo in documentation

Under the Box Shadow section in the documentation, the second @include example has an extra 0 for the color. #fff0000

Multiple arguments must be comma-delimited.

@include box-shadow(1px 1px 2px 0 #fff0000, -1px -2px 0 #ccc);

transitions mixin doesn't seem to work as per documentation

The Bourbon docs on transition shows this example:

@include transition (all 2.0s ease-in-out);

That doesn't seem to work for me.

This css declaration:

test {
    @include transition(opacity 2.0s linear);
}

gets compiled to:

test { 
    -webkit-transition-property: opacity, 2s, linear; 
    -moz-transition-property: opacity, 2s, linear; 
    -ms-transition-property: opacity, 2s, linear; 
    -o-transition-property: opacity, 2s, linear; 
    transition-property: opacity, 2s, linear; 
    -webkit-transition-duration: 0.15s; 
    -moz-transition-duration: 0.15s; 
    -ms-transition-duration: 0.15s; 
    -o-transition-duration: 0.15s; 
    transition-duration: 0.15s; 
    -webkit-transition-timing-function: ease-out; 
    -moz-transition-timing-function: ease-out; 
    -ms-transition-timing-function: ease-out; 
    -o-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
    -webkit-transition-delay: 0; 
    -moz-transition-delay: 0; 
    -ms-transition-delay: 0; 
    -o-transition-delay: 0; 
    transition-delay: 0; 
}

timing and delay is correct, but property and durations aren't.

If i use commas:

test2 {
    @include transition(opacity, 2.0s, linear);
}

Then the output is correct:

test2 { 
    -webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -ms-transition-property: opacity; 
    -o-transition-property: opacity; 
    transition-property: opacity; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -ms-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    transition-duration: 2s; 
    -webkit-transition-timing-function: linear; 
    -moz-transition-timing-function: linear; 
    -ms-transition-timing-function: linear; 
    -o-transition-timing-function: linear; 
    transition-timing-function: linear; 
    -webkit-transition-delay: 0; 
    -moz-transition-delay: 0; 
    -ms-transition-delay: 0; 
    -o-transition-delay: 0; 
    transition-delay: 0; 
}

However, as per docs commas should separate multiple transitions - 2nd example in the docs - not sure how this would work..

Environment:

• I'm running sass with sass -r ./bourbon/lib/bourbon.rb style.scss style.css
• ruby --version is ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-darwin11.2.0] (using rbenv)
• gem --version is 1.8.10
• gem list --local bourbon is bourbon (1.4.0, 1.3.5)
• gem list --local sass is sass (3.1.12)

inline-block mixin defined above linear gradient breaks linear gradient

http://cl.ly/3j0714181h121x192V1E

Chrome and Firefox won't acknowledge linear-gradient when inline-block is defined first. Difficult for the programmer to debug.

Can't install bourbon 2.0 gem

Opening a separate issue as a follow up to issue #79.

I apparently need to 2.0 gem of bourbon to fit the documentation but can't seem to install or update the gem to 2.0.

gem list --local bourbon

*** LOCAL GEMS ***

bourbon (1.4.0)


gem update bourbon

Updating installed gems
Nothing to update

How can I get the bourbon version that matches the docs?

Release Tags

I was wondering if it would be possible to tag releases in the future? It makes it much easier to figure out what has changed when upgrading between versions. The most current tag is currently v1.3.6.

If not, is there a good way to figure out what has changed since a specific release?

gem install causes "invalid byte sequence in US-ASCII"

I'm attempting to install Bourbon v1.1.0 on our EngineYard server (staging and production)

I receive the following error

$ sudo gem install bourbon -v '1.1.0'
Fetching: sass-3.1.10.gem (100%)
Fetching: bourbon-1.1.0.gem (100%)
ERROR:  While executing gem ... (ArgumentError)
    invalid byte sequence in US-ASCII

I'm guessing that this is because of the following commit (where some international UTF-8 characters were added to the list of authors):

72cf1e7#bourbon.gemspec

Note: I don't have a problem when installing the gem on my development machine (Mac OS X 10.7.2)

radial-gradient also includes background-color with no way to disable it

Hello,

The radial-gradient mixin sets a background color, which might make sense in some cases but not all of them.

It's a fairly easy thing to just add a new background-color style rule after the include call, but it seems like un-necessary duplication.

that being said, I do understand the ease of automatically including the background color to match the gradient. Could it be removed entirely or optional?

Thanks,
Jeremy

Wrong path for html5-input-types

https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/_bourbon.scss#L22

should be addons/html5-input-types

Bourbon not importing in 3.1 app with sass-rails gem

Bourbon isn't getting imported via sass-rails in a new 3.1.0 app. Flutie works as expected.

Sample app: https://github.com/jasonm/bourbon-import-issue-demo-app

Demo on Heroku (view-source and see application-shashashasha.css file) http://vivid-beach-3931.herokuapp.com/

mixin for user-select

handy to disable highlight on buttons, calendars, etc

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Add Sinatra setup instructions to README

http://koffeinfrei.heroku.com/2012/03/24/sinatra-with-bourbon

Using button mixin throws an error

Mac Os X 10.7.3
Clean gemset
Rails 3.2.0
Bourbon 1.4.0

As soon as I put @include button; in one of my css selectors I get this error:

Sass::SyntaxError in Sessions#new
Mixin box-shadow takes 1 argument but 3 were passed.
(in /Users/brandon/Projects/dealer_locator/app/assets/stylesheets/application.css.scss)

I don't have time to look at the bourbon source right now to give you a fix, just thought you guys should be aware. If no one fixes this, I'll submit a patch for it later.

This happens if I pass params to button() or not.

Rails 3.2

This doesn't seem to work with rails 3.2 at all. I put bourbon in my gemfile and bundle'd apparently successfully, yet there are no bourbon files in my app.

Wrong -webkit-linear-gradient

Compass's linear-gradient mixin returns a value like background-image: -webkit-linear-gradient(#d2d2d2, #b3b3b3 1px, #9b9b9b);, which works great on latest Chrome. Bourbon's returns background-image: -webkit-linear-gradient(color-stops(#d2d2d2, #b3b3b3 1px, #9b9b9b)), which Chrome doesn't like.

Possibly related to #6, but it doesn't seem to be exactly the same thing.

@mixin background-image doesn't support positions

Hello folks,

I wanted to create a Finder-like sidebar using the @mixin background-image, but unfortunately it seems that this is impossible in the current version.

Until now I used some CSS like the following, including the positioned icon and the linear gradient in one line:

li a {
  background: url(/icon/desktop.png) 20px center no-repeat, webkit-gradient(linear,0% 0,0% 100%,from(#5F749F),to(#4C5D7F)); 
}

The problem is that the position and repeat properties should only apply the to icon, not to the gradient. Using background-position: 20px center; also applies to the gradient. Is there any way to solve it in the current version?

Do not require copying of sass files

There seems to be a way for a Sass extension .rb file to provide load paths to be used:

https://github.com/nex3/sass/blob/master/lib/sass.rb#L37

Right now, it is necessary for me to specify the path to bourbon's sass files explicitly, or copy them into my sass directory, both of which are suboptimal.

Add the keyframe mix in with vendor prefixes

Hi

It would be nice to be able to do something like

@mixin foo{
  from{
   /* something here */
  }
  to{
  /* something here */
  }
}

Then...

@include keyframes(name,  @include foo);

Which would then produces the vendor prefixes for all of the keyframes. Then you could use animate like normal.

Position addon does not allow for 'auto' value

Sometimes, when I am positioning elements, I want some of the coordinates to be 'auto'. For example:

@include position(absolute, 0 0 auto 0);

I believe this is the only way to specify that top, right and left should be set but the bottom should be left.

However, the Bourbon mixin specifies the value must be a unit, which of course does not allow for auto as a value:

  @if not(unitless($top)) {
    top: $top;
  }

prefix bourbon's functions to avoid collisions with *every* other css framework?

just a thought: i'd like to use more than one css framework (or at least try others out from time to time) without immediately running into trouble with @border-radius(radius); in each of them. would it make sense to namespace via a prefix on the functions, say bb-border-radius() for example?

CSS3-only attributes?

Just wondering if bourbon, by some definition or philosophy, will only ever support real CSS3 features or if bourbon is in the business of killing kittens?

Consider making bourbon a compass extension

Bourbon may be better served as a compass extension: http://compass-style.org/help/tutorials/extensions/

Compass provides a way to register a framework, which means that it can be used pretty easily outside of the Rails stack (here's a good example of one I've used in a handful of projects recently: https://github.com/nextmat/compass-960-plugin). I've used this successfully in an Octopress blog as well as a Rails app, and I'm pretty certain it could be used in a Sinatra app as well (although I've not tried it).

This may also help get around having to omit the require_tree . directive, although I'm not positive. It may just be inherent in how bourbon and the asset pipeline interact.

File to import not found or unreadable: ../functions/linear-gradient.

Hi there,

Today I just updated to version 1.0.3 and now I'm getting this error

ActionView::Template::Error (File to import not found or unreadable: ../functions/linear-gradient.)

I can't identify the problem just by checking the source code and the stack trace.

Make possible to run without ruby

I would like to use bourbon in non-ruby projects (.Net at the moment). I even built you guys a nuget package, however the dependency on the compact() ruby sass extension makes this a far more difficult task.

Is it possible to make that dependency optional so that non-ruby projects can use this.

Also, shipping it all as one file would be nice :)

WARNING: Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...

I'm getting this error

WARNING: Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...
  on line 14 of ../../../vendor/assets/stylesheets/bourbon/functions/_golden-ratio.scss

because I use something like:

padding: golden-ratio($font-size, 0);

I know it's not the right way, but padding: $font-size confuses me too much. Any way to get rid of this warning?

Button disabled state needed

A button with @include button(type, color) does not change appearance when disabled, also retaining hover and active states. The buttons don't work, they are disabled, they just appear as if they are not disabled.

`rake assets:precompile` does not work with bourbon

I experience the following problem when running rake assets:precompile:

rake aborted!
Undefined mixin 'border-radius'.
  (in /Users/vladimir/Code/zenith.org.mk/app/assets/stylesheets/application.css.scss)

• The problem appears with either Bundler line in application.rb being active
• I have the sass-rails gem installed, as generated from rails new
• The only line in my layout for stylesheets is <%= stylesheet_link_tag "manifest" %>
• I try to run rake assets:precompile when it blows up.

Here are the contents of my manifest.css.scss:

/*
 *= require normalize
 *= require ggs
 *= require_self
*/
@import "bourbon";
@import "application";
@import "about";
@import "contact_us";

In development mode, everything works fine.

getting error after ugrading to sass-3.1.8

after upgrading to sass-3.1.8 form sass-3.1.7 I get this error:

Functions may only be defined at the root of a document.

any Idea how I can solve this?

Make fallback color on linear-gradient more flexible

I'm looking at maybe using bourbon to standardize some of the SASS mixins and functions that I've currently been writing myself. Looking at the linear-gradient mixin it's much more flexible than my own mixin with one exception - in my own mixin I don't specify a fallback color but leaves that up to the includer to decide. In my use sometimes it's the start color that should be the fallback, sometimes the stop color and sometimes a color from the middle of the gradient. I find it kind of limiting to be forced to always use the start color as a fallback.

It would be nice if one could either define a fallback color oneself or if one could opt out from it so that one can define it oneself.

What do you think?

Deprecated webkit radial gradient just ignores center points

Hi there,

I'm trying to use bourbon, but having an issue with the output of radial-gradient. For some reason, the mixin doesn't even offer the ability to pass a position into the deprecated-webkit-gradient function.

I've changed the code on my side, but I'm curious if there is a reason for this that I'm not aware of before I submit a pull request. :)

Thanks,
Jeremy

Cannot install in a Rails 2.3 project

When one adds the bourbon gem to a Rails 2.3 project (via bundler) and then tries to do anything like start the server or run rake, the following happens:

$ rake -T --trace
(in /home/malept/test)
rake aborted!
uninitialized constant Rails::Engine
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:466:in `load_missing_constant'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:106:in `const_missing'
/home/malept/test/shared/bundle/ruby/1.8/gems/bourbon-1.4.0/lib/bourbon.rb:5
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:68:in `require'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:68:in `require'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:66:in `each'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:66:in `require'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:55:in `each'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler/runtime.rb:55:in `require'
/usr/local/lib/ruby/gems/1.8/gems/bundler-1.0.9/lib/bundler.rb:114:in `require'
/usr/home/malept/test/releases/20120301190810/config/boot.rb:119:in `load_gems'
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/initializer.rb:164:in `process'
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/initializer.rb:113:in `send'
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/initializer.rb:113:in `run'
/usr/home/malept/test/releases/20120301190810/lib/tasks/../../config/environment.rb:13
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:182:in `require'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:182:in `require'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:547:in `new_constants_in'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:182:in `require'
/usr/home/malept/test/releases/20120301190810/lib/tasks/generate_test_sequencing.rake:1
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:171:in `load_without_new_constant_marking'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:171:in `load'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:547:in `new_constants_in'
/home/malept/test/shared/bundle/ruby/1.8/gems/activesupport-2.3.11/lib/active_support/dependencies.rb:171:in `load'
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/tasks/rails.rb:14
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/tasks/rails.rb:14:in `each'
/home/malept/test/shared/bundle/ruby/1.8/gems/rails-2.3.11/lib/tasks/rails.rb:14
/usr/home/malept/test/releases/20120301190810/Rakefile:10:in `require'
/usr/home/malept/test/releases/20120301190810/Rakefile:10
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2383:in `load'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2383:in `raw_load_rakefile'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2017:in `load_rakefile'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2068:in `standard_exception_handling'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2016:in `load_rakefile'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2000:in `run'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:2068:in `standard_exception_handling'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake.rb:1998:in `run'
/usr/local/lib/ruby/gems/1.8/gems/rake-0.8.7/bin/rake:31
/usr/local/bin/rake:19:in `load'
/usr/local/bin/rake:19

The problem seems to be that the Rails module exists, but Rails::Engine does not.

border-image mixin can't handle gradients

It should be possible to use a linear-gradient as a border-image, as demonstrated here (at least in Webkit). Unfortunately, the border-image mixin just prepends the vendor prefixes; the gradient declaration list is expanded, and the resulting CSS is invalid.

I'd expect

  @include border-image(linear-gradient(left,green,blue) 20 stretch);

to compile to

  -webkit-border-image(-webkit-linear-gradient(left,green,blue) 20 stretch);
  -moz-border-image(-moz-linear-gradient(left,green,blue) 20 stretch);
  -ms-border-image(-ms-linear-gradient(left,green,blue) 20 stretch);
  -o-border-image(-o-linear-gradient(left,green,blue) 20 stretch);
  border-image(linear-gradient(left,green,blue) 20 stretch);

Instead it compiles to

  -webkit-border-image(linear, left, green, blue 20 stretch);
  -moz-border-image(linear, left, green, blue 20 stretch);
  -ms-border-image(linear, left, green, blue 20 stretch);
  -o-border-image(linear, left, green, blue 20 stretch);
  border-image(linear, left, green, blue 20 stretch);

Unlike background-image, border-image makes no attempt to check if any of its arguments are a list.

Wouldn't it make more sense to refactor out that code of background-image which checks the argument types, and reuse it in any mixin that can accept an image/url argument?

Installation outside of Rails: Undefined mixins

I am unable to use the mixins after following the directions for installing Bourbon without Rails. Here's representative output (I added a puts statement to make sure the ruby was being executed):

slim:hamljunk jeremy$ sass --watch sass:stylesheets -r ./sass/bourbon/lib/bourbon.rb
Hello from compact.rb
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: /jeremy/hamljunk/sass/main.sass
      error sass/main.sass (Line 8: Undefined mixin 'border-radius'.)
>>> Change detected to: jeremy/hamljunk/sass/main.sass
      error sass/main.sass (Line 9: Undefined mixin 'box-shadow'.)

I'm using Sass 3.1.7

File to Import not found or unreadable: html5-input-types with 0.1.8

I updated to bourbon 0.1.8 from 0.1.7 and started getting this error when loading my rails app.

Load Path: Sass::Rails::Importer(/path/to/application.css.scss)

I followed the instructions in your readme and it has worked fine until now.

background repeat-y broken

background: url(nav.bg.png) 0 0 repeat-y

does not work properly, meaning the tiling does not occur. However, if I drop the -y (which will repeat in both X and Y), all is fine.

The 'shiny' button style has errors with background color and gradients

Using @include button(shiny); produces the following markup:

background-color: top;
background-image: -webkit-gradient(linear, left top, left bottom, from(top), to(#4294f0 0%));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
background-image: -moz-linear-gradient(top, top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
background-image: -ms-linear-gradient(top, top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
background-image: -o-linear-gradient(top, top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
background-image: top, top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%;

The top parameter is being inserted incorrectly.

border-image mixin

Couldn't find this one? Is there any reason why it's not part of bourbon?

No good way to +transition a +transform?

Hi,

There doesn't seem to be a good way to use bourbon to specify a transition of transforms. For instance, if I want to generate cross-browser CSS to specify a transition for a scale transform, it'd be nice to be able to do something like:

+transition(+transforms)

Obviously, this isn't proper SASS, but ideally it'd generate

transition: transform
-webkit-transition: -webkit-transform
-moz-transition: -moz-transform
-o-transition: -o-transform

Perhaps the best way to do this would be the following syntax:

+transition($prefixed(transform))

That would allow you to combine property specifications such as:

+transition((opacity, $prefixed(transform)), (1.0s, 2.0s) )

Button Addon does not seem to be working properly

I am using Bourbon in a Rails 3.0.5 application with Sass 3.1.1. I am trying to use the button add-on which appears to be working properly except that it doesn't seem to be rendering the gradients or shadows properly. This is the output that I get:

...
background-image: linear-gradient(top, compact(top, #4294F0 0%, #116DD5 50%, #095CB8 50%, #0F63C2 100%, false, false, false, false, false));
...

I think the problem is the compact() method that is being used. Shouldn't that be converted to

...
background-image: linear-gradient(#4294F0 0%, #116DD5 50%, #095CB8 50%, #0F63C2 100%);
...

Any assistance on this would be greatly appreciated.

Doesn't work with rails 3.1 on Heroku cedar stack

See attached stack trace. The gem is installed on heroku but for some reason @import can't find bourbon. No problems in development.

2011-09-18T21:34:09+00:00 app[web.1]: Processing by PagesController#home as HTML
2011-09-18T21:34:09+00:00 app[web.1]: Rendered pages/home.html.haml within layouts/application (5.5ms)
2011-09-18T21:34:10+00:00 app[web.1]: Completed 500 Internal Server Error in 394ms
2011-09-18T21:34:10+00:00 app[web.1]:
2011-09-18T21:34:10+00:00 app[web.1]: ActionView::Template::Error (File to import not found or unreadable: bourbon.
2011-09-18T21:34:10+00:00 app[web.1]: Load path: /app
2011-09-18T21:34:10+00:00 app[web.1]: (in /app/app/assets/stylesheets/application.css.sass)):

@import bourbon in multiple files generates "cruft"

hello,
here's some files i have for my stylesheet :
asset/stylesheets :
-- application.css.scss
-- structure.css.scss
-- elements.css.scss
-- styles.css.scss

I will need @import 'bourbon' in all those files to use the mixins but when I import bourbon I get a whole bunch of stuff (@-webkit-keyframes fade-in....) EACH TIME.

I was used to compass with the concept of partials and imports being available globally so I could @import "utilities" once and use them helpers everywhere... I don't mind writing @import "bourbon" in every file but then it should not generate text.

I realize that this may also be a sprocket issue (why can't an import be global ?) but meanwhile bourbon doesn't fit in !

thanx for the gem

Sass::SyntaxError: Undefined variable: "$count".

Hello folks,

after upgrading to the newest version of your awesome gem, I'm getting this error each time accessing my web app:

Sass::SyntaxError: Undefined variable: "$count".

/../bourbon/css3/_background-image.scss:79:in `background-image`

Btw my setup:

• Rails 3.0.9
• Ruby 1.9.3 RC1
• Bourbon 0.2.0

TIA, Mario

Prefix path to addons with bourbon

Shouldn't

@import "addons/hide-text;

be

@import "bourbon/addons/hide-text;

Just like how the Compass framework allows importing its partials.

@import "compass/utilities/general/clearfix";

This will help me find where a mixin is coming from when I look at the import statement.

What do you think?

@include linear-gradient don't work

This bourbon scss snippet

@include linear-gradient(#1e5799, #2989d8);

Outputs

background-color: #1E5799;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false)));
background-image: -webkit-linear-gradient(top, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false));
background-image: -moz-linear-gradient(top, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false));
background-image: -ms-linear-gradient(top, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false));
background-image: -o-linear-gradient(top, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false));
background-image: linear-gradient(top, compact(#1E5799, #2989D8, false, false, false, false, false, false, false, false));

Linear gradient forcing 'top' at the beginning of the argument list

Hello,

I added the following example form the README to my stylesheet:

@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

The actual styles that are being generated are:

background-color: 50deg;
background-image: -webkit-gradient(linear, left top, left bottom, from(50deg), to(#1e5799 0%));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, 50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(top, 50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(top, 50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(top, 50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: linear-gradient(top, 50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

This doesn't work as expected.

It looks like bourbon is forcing a top argument at the beginning of the argument list, and then it thinks the 50deg parameter is the first color of the gradient.

The styles that should have been generated should look something like:

background-image: -webkit-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Instructions don't tell me how to get things working on 3.1

app/assets/stylesheets/application.scss:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
*/

@import 'bourbon';

Gemfile.lock

GEM
  remote: http://rubygems.org/
  specs:
    Saikuro (1.1.0)
    actionmailer (3.1.0)
      actionpack (= 3.1.0)
      mail (~> 2.3.0)
    actionpack (3.1.0)
      activemodel (= 3.1.0)
      activesupport (= 3.1.0)
      builder (~> 3.0.0)
      erubis (~> 2.7.0)
      i18n (~> 0.6)
      rack (~> 1.3.2)
      rack-cache (~> 1.0.3)
      rack-mount (~> 0.8.2)
      rack-test (~> 0.6.1)
      sprockets (~> 2.0.0)
    activemodel (3.1.0)
      activesupport (= 3.1.0)
      bcrypt-ruby (~> 3.0.0)
      builder (~> 3.0.0)
      i18n (~> 0.6)
    activerecord (3.1.0)
      activemodel (= 3.1.0)
      activesupport (= 3.1.0)
      arel (~> 2.2.1)
      tzinfo (~> 0.3.29)
    activeresource (3.1.0)
      activemodel (= 3.1.0)
      activesupport (= 3.1.0)
    activesupport (3.1.0)
      multi_json (~> 1.0)
    acts_as_audited (2.0.0.rc7)
      rails (>= 3.0.3)
    addressable (2.2.6)
    ansi (1.3.0)
    arel (2.2.1)
    bcrypt-ruby (3.0.0)
    bourbon (0.1.5)
      sass (>= 3.1)
    builder (3.0.0)
    capistrano (2.8.0)
      highline
      net-scp (>= 1.0.0)
      net-sftp (>= 2.0.0)
      net-ssh (>= 2.0.14)
      net-ssh-gateway (>= 1.1.0)
    capybara (1.0.1)
      mime-types (>= 1.16)
      nokogiri (>= 1.3.3)
      rack (>= 1.0.0)
      rack-test (>= 0.5.4)
      selenium-webdriver (~> 2.0)
      xpath (~> 0.1.4)
    capybara-webkit (0.6.1)
      capybara (~> 1.0.0)
    childprocess (0.2.2)
      ffi (~> 1.0.6)
    chronic (0.3.0)
    churn (0.0.13)
      chronic (>= 0.2.3)
      hirb
      json_pure
      main
      ruby_parser (~> 2.0.4)
      sexp_processor (~> 3.0.3)
    cocaine (0.2.0)
    coffee-rails (3.1.0)
      coffee-script (>= 2.2.0)
      railties (~> 3.1.0.rc1)
    coffee-script (2.2.0)
      coffee-script-source
      execjs
    coffee-script-source (1.1.2)
    colored (1.2)
    cucumber (1.0.2)
      builder (>= 2.1.2)
      diff-lcs (>= 1.1.2)
      gherkin (~> 2.4.5)
      json (>= 1.4.6)
      term-ansicolor (>= 1.0.5)
    cucumber-rails (1.0.2)
      capybara (>= 1.0.0)
      cucumber (~> 1.0.0)
      nokogiri (>= 1.4.6)
    database_cleaner (0.6.7)
    devise (1.4.4)
      bcrypt-ruby (~> 3.0)
      orm_adapter (~> 0.0.3)
      warden (~> 1.0.3)
    diff-lcs (1.1.3)
    erubis (2.7.0)
    execjs (1.2.4)
      multi_json (~> 1.0)
    factory_girl (2.0.5)
    factory_girl_rails (1.1.0)
      factory_girl (~> 2.0.0)
      railties (>= 3.0.0)
    ffi (1.0.9)
    flay (1.4.3)
      ruby_parser (~> 2.0)
      sexp_processor (~> 3.0)
    flog (2.5.2)
      ruby_parser (~> 2.0)
      sexp_processor (~> 3.0)
    gherkin (2.4.16)
      json (>= 1.4.6)
    google_currency (1.2.0)
      money (~> 3.5)
    growl (1.0.3)
    haml (3.1.2)
    highline (1.6.2)
    hike (1.2.1)
    hirb (0.5.0)
    i18n (0.6.0)
    jquery-rails (1.0.13)
      railties (~> 3.0)
      thor (~> 0.14)
    json (1.5.4)
    json_pure (1.5.4)
      spruz (~> 0.2.8)
    launchy (2.0.5)
      addressable (~> 2.2.6)
    mail (2.3.0)
      i18n (>= 0.4.0)
      mime-types (~> 1.16)
      treetop (~> 1.4.8)
    main (4.7.1)
    memcache (1.2.13)
    memcache-client (1.8.5)
    metric_fu (2.1.1)
      Saikuro (>= 1.1.0)
      activesupport (>= 2.0.0)
      chronic (~> 0.3.0)
      churn (>= 0.0.7)
      flay (>= 1.2.1)
      flog (>= 2.3.0)
      rails_best_practices (>= 0.6.4)
      rcov (>= 0.8.3.3)
      reek (>= 1.2.6)
      roodi (>= 2.1.0)
      syntax
    mime-types (1.16)
    money (3.7.1)
      i18n (~> 0.4)
    multi_json (1.0.3)
    net-scp (1.0.4)
      net-ssh (>= 1.99.1)
    net-sftp (2.0.5)
      net-ssh (>= 2.0.9)
    net-ssh (2.2.1)
    net-ssh-gateway (1.1.0)
      net-ssh (>= 1.99.1)
    nokogiri (1.5.0)
    orm_adapter (0.0.5)
    paperclip (2.3.16)
      activerecord (>= 2.3.0)
      activesupport (>= 2.3.2)
      cocaine (>= 0.0.2)
      mime-types
    pg (0.11.0)
    polyglot (0.3.2)
    rack (1.3.2)
    rack-cache (1.0.3)
      rack (>= 0.4)
    rack-mount (0.8.3)
      rack (>= 1.0.0)
    rack-ssl (1.3.2)
      rack
    rack-test (0.6.1)
      rack (>= 1.0)
    rails (3.1.0)
      actionmailer (= 3.1.0)
      actionpack (= 3.1.0)
      activerecord (= 3.1.0)
      activeresource (= 3.1.0)
      activesupport (= 3.1.0)
      bundler (~> 1.0)
      railties (= 3.1.0)
    rails_best_practices (0.10.1)
      activesupport
      colored
      erubis
      haml
      i18n
      ruby-progressbar
      ruby_parser
    railties (3.1.0)
      actionpack (= 3.1.0)
      activesupport (= 3.1.0)
      rack-ssl (~> 1.3.2)
      rake (>= 0.8.7)
      rdoc (~> 3.4)
      thor (~> 0.14.6)
    rake (0.9.2)
    rb-fsevent (0.4.3.1)
    rcov (0.9.10)
    rdoc (3.9.4)
    reek (1.2.8)
      ruby2ruby (~> 1.2)
      ruby_parser (~> 2.0)
      sexp_processor (~> 3.0)
    roodi (2.1.0)
      ruby_parser
    rspec (2.6.0)
      rspec-core (~> 2.6.0)
      rspec-expectations (~> 2.6.0)
      rspec-mocks (~> 2.6.0)
    rspec-core (2.6.4)
    rspec-expectations (2.6.0)
      diff-lcs (~> 1.1.2)
    rspec-mocks (2.6.0)
    rspec-rails (2.6.1)
      actionpack (~> 3.0)
      activesupport (~> 3.0)
      railties (~> 3.0)
      rspec (~> 2.6.0)
    ruby-progressbar (0.0.10)
    ruby2ruby (1.2.5)
      ruby_parser (~> 2.0)
      sexp_processor (~> 3.0)
    ruby_parser (2.0.6)
      sexp_processor (~> 3.0)
    rubyzip (0.9.4)
    sass (3.1.7)
    sass-rails (3.1.0)
      actionpack (~> 3.1.0)
      railties (~> 3.1.0)
      sass (>= 3.1.4)
    selenium-webdriver (2.5.0)
      childprocess (>= 0.2.1)
      ffi (>= 1.0.7)
      json_pure
      rubyzip
    sexp_processor (3.0.6)
    shoulda (2.11.3)
    sprockets (2.0.0)
      hike (~> 1.2)
      rack (~> 1.0)
      tilt (~> 1.1, != 1.3.0)
    spruz (0.2.13)
    squeel (0.8.9)
      activerecord (~> 3.0)
      activesupport (~> 3.0)
    syntax (1.0.0)
    term-ansicolor (1.0.6)
    thor (0.14.6)
    tilt (1.3.3)
    treetop (1.4.10)
      polyglot
      polyglot (>= 0.3.1)
    turn (0.8.2)
      ansi (>= 1.2.2)
    tzinfo (0.3.29)
    uglifier (1.0.2)
      execjs (>= 0.3.0)
      multi_json (>= 1.0.2)
    warden (1.0.5)
      rack (>= 1.0)
    xpath (0.1.4)
      nokogiri (~> 1.3)
    yaml_db (0.2.1)

PLATFORMS
  ruby

DEPENDENCIES
  acts_as_audited (= 2.0.0.rc7)
  bourbon
  capistrano
  capybara
  capybara-webkit
  coffee-rails (~> 3.1.0)
  cucumber
  cucumber-rails
  database_cleaner
  devise
  factory_girl
  factory_girl_rails
  google_currency
  growl
  haml
  jquery-rails
  json
  launchy
  memcache
  memcache-client
  metric_fu
  mime-types
  money
  paperclip
  pg
  rails (= 3.1.0)
  rb-fsevent
  rspec-rails
  sass
  sass-rails (~> 3.1.0)
  shoulda
  squeel
  turn
  uglifier
  warden
  yaml_db

Doesn't work!

---

@background-image Converts to gradients when it shouldn't

I am using the following in my SCSS file to utilize multiple backgrounds; one on the top and one on the bottom...

         @include background-image(
              url("../images/layout/quote_top.png") center top no-repeat,
              url("../images/layout/quote_bottom.png") center bottom no-repeat
            );

However the CSS it outputs:

        background-image: -webkit-url("../images/layout/quote_top.png")-gradient(center), -webkit-url("../images/layout/quote_bottom.png")-gradient(center);
        background-image: -moz-url("../images/layout/quote_top.png")-gradient(center), -moz-url("../images/layout/quote_bottom.png")-gradient(center);
        background-image: -ms-url("../images/layout/quote_top.png")-gradient(center), -ms-url("../images/layout/quote_bottom.png")-gradient(center);
        background-image: -o-url("../images/layout/quote_top.png")-gradient(center), -o-url("../images/layout/quote_bottom.png")-gradient(center);
        background-image: url("../images/layout/quote_top.png")-gradient(center), url("../images/layout/quote_bottom.png")-gradient(center);

Is the short hand not supported? I didn't see mention of it in the docs, so was curious if I needed to add additional CSS (background-position, etc) which sort of seems like it would defeat the purpose.