A Lightweight Sass Tool Set

thoughtbot, inc.

Last update: Dec 30, 2022

Overview

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.

Requirements

Sass 3.4+ or LibSass 3.3+

Installation

Install the Bourbon gem using the RubyGems package manager:
```
gem install bourbon
```
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/
```
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+

Add Bourbon to your Gemfile:
```
gem "bourbon"
```
Then run:
```
bundle install
```

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

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

Delete all Sprockets directives in application.scss (require, require_tree and require_self) and use Sass’s native @import instead (why?).
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

Add Bourbon as a dependency:
```
npm install --save bourbon
```
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.
Import Bourbon into your Sass files:
```
@import "bourbon";
```

Installing older versions of Bourbon

Uninstall any Bourbon gem versions you already have:
```
gem uninstall bourbon
```
Reinstall the Bourbon gem, using the -v flag to specify the version you need:
```
gem install bourbon -v 4.2.7
```
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

About

Bourbon is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open-source software! See our other projects or hire us to design, develop, and grow your product.

Comments

[Announcement] An Update on Bourbon v5.0
We’re working hard on the next major version of Bourbon (v5.0) and we’d like to update you with our goals and progress. You can also follow along on with the v5.0 branch.

First, we’ve decided to remove browser prefixing features from Bourbon. Our main reasons for doing so are:

It’s no longer best practice for pre-processors like Sass to handle prefixing. Instead, a post-processor is better suited for this task and allows you to write much cleaner Sass (no more @include’s for prefixes!).

Autoprefixer is a robust, well-maintained tool to post-process prefixes.

There’s no easy way for us to decide what browser versions Bourbon should support.

Autoprefixer ties into the Can I use database and allows you to specify the exact browser support you need, per project. This is quite powerful, yet painless.

Along with that, we are porting our documentation over to SassDoc, so that it’s more comprehensive, consistent and easier to contribute to. And we’re also writing feature tests for Bourbon, so that we can make sure the code is always stable.

We hope everyone is as excited for the future of Bourbon as we are!

– The Bourbon Team
opened by tysongach 72
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.
opened by bltavares 47
Deprecate `em()` and `rem()` functions
I think the em and rem functions should be deprecated because they do not properly indicate the true output and make the em to pixel conversion more confusing.

Ems are powerful because they are not an absolute unit, but rather based off their parent’s font size. So if the font size through an entire website or app remained at 16px, then this function would make sense. But that is not always the case.

Consider this example:

.element { font-size: 20px; .nested-element { margin-right: em(48); } }

The code above makes it appear that margin-right is equal to 48px. However, the output of will actually be 3em, which equates to 60px. This is because the parent font size has changed and the function has no way of taking that into consideration automatically.

Of course, you can pass a second argument into the function (e.g. em(12, 24)), but this adds unnecessary overhead and our Sass has now become more verbose and less DRY:

.element { font-size: 20px; .nested-element { margin-right: em(48, 20); } }

Done many times throughout stylesheets and it makes for lots of repetition.

I have found that if you give up thinking about layouts in exact pixels and instead align things relationally, everything still falls into place nicely.

[x] Remove from _grid in Neat (PR)

[x] Remove from Neat’s readme

[x] Remove from Bourbon’s modular scale function

[x] Deprecate $em-base since it would no longer be used

[type] deprecation
opened by tysongach 32

Undefined variable: "$em-base"

I'm getting this error when assets:precompile runs...

The deploy has failed with an error: #<SSHKit::Runner::ExecuteError: Exception while executing on host cfs.staging: rake exit status: 1
rake stdout: Nothing written
rake stderr: /usr/local/rvm/rubies/ruby-2.1.2/bin/ruby /usr/local/rvm/gems/ruby-2.1.2@cfs-web/bin/rake assets:precompile:all RAILS_ENV=staging RAILS_GROUPS=assets
rake aborted!
Sass::SyntaxError: Undefined variable: "$em-base".
  (in /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/bourbon-4.1.1/app/assets/stylesheets/functions/_modular-scale.scss)
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/bourbon-4.1.1/app/assets/stylesheets/functions/_modular-scale.scss:21
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/variable.rb:49:in `_perform'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/node.rb:50:in `perform'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:170:in `perform_arg'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `block in _perform'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each_with_index'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `map'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `_perform'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/node.rb:50:in `perform'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:468:in `visit_variable'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:79:in `block in with_base'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:115:in `with_frame'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:79:in `with_base'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:158:in `visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:157:in `visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:8:in `visit'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/root_node.rb:36:in `css_tree'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/root_node.rb:20:in `render'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/engine.rb:268:in `render'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-rails-3.2.6/lib/sass/rails/template_handlers.rb:106:in `evaluate'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:193:in `block in evaluate'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:190:in `each'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:190:in `evaluate'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/processed_asset.rb:16:in `initialize'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `new'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `block in build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:270:in `circular_call_protection'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:14:in `build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:93:in `block in build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/caching.rb:19:in `cache_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:92:in `build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:169:in `find_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/bundled_asset.rb:12:in `initialize'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `new'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:93:in `block in build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/caching.rb:19:in `cache_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:92:in `build_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:169:in `find_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:41:in `block in compile'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:219:in `block in each_logical_path'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:206:in `block (2 levels) in each_file'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:196:in `each'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:196:in `each_entry'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:204:in `block in each_file'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:203:in `each'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:203:in `each_file'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:217:in `each_logical_path'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:29:in `compile'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/tasks/assets.rake:108:in `internal_precompile'
/usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/tasks/assets.rake:115:in `block (3 levels) in <top (required)>'
Tasks: TOP => assets:precompile:all
(See full trace by running task with --trace)
rake aborted!

opened by flynfish 28

Removed -moz-border-radius and -mox-box-shadow as Firefox 3.6 reached EOL.

Yay for the gradual death of vendor prefixes.

Here is Mozilla's official announcement, https://blog.mozilla.org/futurereleases/2012/03/23/upcoming-firefox-support-changes/

opened by frznk-tank 24
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)):

opened by davidkariuki 23
Add contrasting-color function
Bourbon has had an is-light function for awhile now (we used to use it in our now-deprecated button mixin). This new contrasting-color function builds on is-light and allows you to pass it arguments to easily output a light or dark color of your choosing based on the lightness of another color.

So for example, our default button styles in Bitters could become a bit smarter/more flexible (for brevity, I’m only showing the affected styles below):

#{$all-buttons} { background-color: $action-color; color: contrasting-color($action-color, #000, #fff); }

cc: @whmii

[x] Needs documentation

[x] Needs tests

[type] new feature
opened by tysongach 22
Add rem unit mixin for font-size
This mixin allows easier use of rem units when working with font-size. Rem gives user resizable text, just like em units, without the hassle of compounding font-sizes. More info about the advantages of using rem over em or px can be found here: http://snook.ca/archives/html_and_css/font-size-with-rem

As rem is not supported by IE8 and lower (http://caniuse.com/#search=rem), we still need to provide a pixel fallback, hence the need for a mixin. The easiest way to work with this is to set font-size: 62.5% on the html or body tag, wich gives us a nice 1rem == 10px relation to work with.

The usage is:

h2 { @include rem(18); }

wich outputs:

h2 { font-size: 18px; font-size: 1.8rem; }

Let me know what you think!
[type] new feature
opened by renaudleo 22
Add 2012 spec of flexbox.

As per Chris Coyier's post on the latest spec for flexbox, which is in CR (Candidate Recommendation) status: http://css-tricks.com/old-flexbox-and-new-flexbox/.

Should be a pretty simple addition... display: flex;
[type] new feature

opened by hotmeteor 21
Rails 4 with font-face
Using Rails 4 and Bourbon, and some issues have reared their ugly heads. I'm using the font-face mixin:

+font-face(OpenSans, opensans-regular, normal, normal, true)

However, the path generated in the stylesheet is /fonts/opensans-regular... but Rails 4 claims it doesn't exist. I have put all my font files under app/assets/fonts and added:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

to my application.rb. It seems the correct path in rails 4 is now /assets/opensans-regular. Is it possible to redirect fonts to assets, or should Bourbon be using asset-path in the font-face helper instead? Would this break Rails 3 compatibility? ~ Jonathan
opened by nybblr 20
Can I add bourbon v5 (beta) to my project with Bower?

I'm using Autoprefixer, so a lot of mixins from bourbon v4 conflict with it. Bourbon v5 (beta) fixed this issue, is there any way to add it to my project using Bower?

opened by Trost123 19
Compatibility with Rails 7

Description

This change addresses an undefined method error that happens at boot time when the bourbon gem is in the Gemfile. After this change Rails will boot and the files under /core are available to the app.

The problem is with line 6 in lib/bourbon.rb. My guess is that assets is not available on Rails::Engine::Configuration due to boot changes related to the Zeitwerk transition, and/or related to Sprockets no longer being a dependency.

opened by hayesr 1
Document compatibility with Ruby Sass/gh-pages

If #1107 is going to be merged, presumably it means compatibility with Ruby Sass (and thus stock github pages) has been dropped? Which is the latest version that will work with Ruby Sass? Can you please make that information prominently visible?

Thanks!

opened by dabrahams 0

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Description

Using SASS >= 1.33.0 produces the following warnings when compiling:

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($v1, $ratio)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
113 │         $v1: ($v1 / $ratio);
    │               ^^^^^^^^^^^^
    ╵
    node_modules\bourbon\core\bourbon\library\_modular-scale.scss 113:15  modular-scale()
    resources\scss\settings\_typography.scss 48:24                        @import
    resources\scss\settings\__index.scss 13:9                             @import
    resources\scss\main.scss 16:9                                         root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value, $value * 0 + 1)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
16 │   @return ($value / ($value * 0 + 1));
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\bourbon\core\bourbon\library\_strip-unit.scss 16:12  strip-unit()
    resources\scss\elements\_typography.scss 20:33                    @content
    resources\scss\tools\_mixins.scss 71:3                            mq()
    resources\scss\elements\_typography.scss 19:2                     @import
    resources\scss\elements\__index.scss 13:9                         @import
    resources\scss\main.scss 19:9                                     root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
70 │       border-width: $height ($width / 2) 0;
   │                              ^^^^^^^^^^
   ╵
    node_modules\bourbon\core\bourbon\library\_triangle.scss 70:30  triangle()
    resources\scss\components\_sub-menu.scss 92:4                   @import
    resources\scss\components\__index.scss 19:9                     @import
    resources\scss\main.scss 21:9                                   root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
58 │       border-width: 0 ($width / 2) $height;
   │                        ^^^^^^^^^^
   ╵
    node_modules\bourbon\core\bourbon\library\_triangle.scss 58:24  triangle()
    resources\scss\components\_sub-menu.scss 99:5                   @import
    resources\scss\components\__index.scss 19:9                     @import
    resources\scss\main.scss 21:9                                   root stylesheet

Development Environment

Bourbon version: 7.0.0
Webpack version: 5.38.1

opened by dkjensen 9

_is-color validator fails on CSS Custom Properties
Description

I would like to use the triangle() mixin with a CSS Custom Property as the color parameter but it obviously fails because the _is-color validator doesn't recognize the custom property as a color, which seems legit, but I think it should accept in some way CSS Custom Properties as they are more and more used, specially within a themable context.

Steps to Reproduce

.element { @include triangle($arrow-direction, $arrow-width, $arrow-height, var(--my-triangle-color)); }

Bourbon version: 7

Platform: any
opened by GoOz 0

NoMethodError: undefined method `assets' for Rails enginer

After upgrading to bourbon 7.0.0 with rails 6.0.3.3 getting this error


06:03:43 workers.1     | 2020-09-10T06:03:43.643Z pid=16842 tid=82wdq WARN: NoMethodError: undefined method `assets' for #<Rails::Engine::Configuration:0x0000000002b91f70>
06:03:43 workers.1     | 2020-09-10T06:03:43.643Z pid=16842 tid=82wdq WARN: /home/vagrant/.rbenv/versions/2.6.0/lib/ruby/gems/2.6.0/gems/railties-6.0.3.3/lib/rails/railtie/configuration.rb:96:in `method_missing'
06:03:43 workers.1     | /home/vagrant/.rbenv/versions/2.6.0/lib/ruby/gems/2.6.0/gems/bourbon-7.0.0/lib/bourbon.rb:6:in `<class:Engine>'

opened by aditya-citrix 2

can't resolve`bourbon`
Some bundlers like parcel can't resolvebourbon when included in scss because of the main entry in package.json file. Please change the main entry point to same path as it is in style = "core/_bourbon.scss", :notes:

No result in scss looks like

@import 'normalize.css'; @import '~node_modules/bourbon/core/bourbon';

but could be like

@import 'normalize.css'; @import 'bourbon';

Originally posted by @FDiskas in https://github.com/thoughtbot/bourbon/issues/802#issuecomment-510624302 Reference: https://github.com/parcel-bundler/parcel/issues/3205
[type] enhancement
opened by FDiskas 2

Releases(v7.2.0)

v7.2.0(Feb 22, 2022)
What's Changed

Reverted:

Replace / with math.div per Dart Sass 2.0.0 updates. Thanks to @dkjensen for raising the issue and @jclusso for merging the migration."

For context see : https://github.com/thoughtbot/bourbon/issues/1106#issuecomment-1048061338
Source code(tar.gz)
Source code(zip)
v7.1.0(Feb 22, 2022)
Changed

Replace / with math.div per Dart Sass 2.0.0 updates. Thanks to @dkjensen for raising the issue and @jclusso for merging the migration.

Source code(tar.gz)
Source code(zip)
v7.0.0(Mar 9, 2020)
Added

Improved error handling of unsupported font file formats in the font-face mixin (supported formats are woff2 and woff).

CSS var() and env() functions are now accepted as values in the position and size mixins.

Changed

Updated thor from 0.x to 1.x

Removed

The font-face mixin no longer supports ttf, svg, and eot font file formats.

Source code(tar.gz)
Source code(zip)
v6.0.0(Jul 10, 2019)
Removed

Installation through Bower is no longer supported.

The sass gem (the deprecated Ruby Sass) is no longer a runtime dependency.

Source code(tar.gz)
Source code(zip)
v5.1.0(Jul 20, 2018)
Added

$font-stack-system now includes the system-ui value.

Changed

The _gamma function will use a pow function, if available.

Source code(tar.gz)
Source code(zip)
v5.0.1(Jun 8, 2018)
Fixed

Fixed an issue that would cause Bourbon to not be found when using SassC.

Source code(tar.gz)
Source code(zip)
v5.0.0(Jan 5, 2018)

Bourbon 5.0.0 is a major release with lots of changes and removals, which are documented in the change log in each of the alpha and beta releases. There are no changes between v5.0.0-beta.8 and v5.0.0. For information on how to upgrade from v4 to v5, read our migrating guide.
Source code(tar.gz)
Source code(zip)
v5.0.0.beta.8(Jun 26, 2017)
Added

A style property has been added to our package.json, which makes for easy importing when using npm-sass, sass-module-importer and others.

Changed

The triangle mixin no longer has default argument values. The order of the arguments also changed: $width and $height now come before $color.

Fixed

The bourbon update CLI command now works when Bourbon is installed using a custom path.

Fixed an issue that would cause Bourbon to not be found within Rails apps.

Source code(tar.gz)
Source code(zip)
v4.3.4(Apr 1, 2017)
Changed

Updated deprecation warning message for strip-units. (#1016)

Source code(tar.gz)
Source code(zip)
v4.3.3(Feb 23, 2017)
Fixed

Internal Bourbon deprecation warnings for is-size and is-length will no longer be thrown when using the size mixin.

Source code(tar.gz)
Source code(zip)
v4.3.2(Feb 10, 2017)
Fixed

Internal Bourbon deprecation warnings for unpack and is-length will no longer be thrown when using the position mixin. (#1004)

Source code(tar.gz)
Source code(zip)
v4.3.1(Feb 8, 2017)
Fixed

Internal Bourbon deprecation warnings will no longer be thrown. (#1002)

Source code(tar.gz)
Source code(zip)
v4.3.0(Feb 3, 2017)
Added

Added deprecation warnings for features that will be removed in 5.0.0. Please reference our change log, which includes a list of these changes and removals. (#891)

Source code(tar.gz)
Source code(zip)
v5.0.0.beta.7(Nov 3, 2016)
Added

Added white-space: nowrap; to the hide-visually mixin so that content renders on one line and is correctly pronounced by screen readers. You can read more about this in Jesse Beach’s article “Beware smushed off-screen accessible text.”

Changed

Removed the default values from the $position and $coordinates arguments for the position mixin.

Updated contrast-switch to calculate contrast based on the WCAG 2.0 specification. Please note that it is an approximation and we cannot guarantee full compliance, though all of our manual testing passed.

Renamed the $coordinates argument in the position mixin to $box-edge-values.

Updated $font-stack-system to include Avenir Next, Avenir, Lucida Grande, Helvetica, Noto, Franklin Gothic Medium, Century Gothic, and Liberation Sans. This follows system-fonts by Adam Morse.

The word-break property was removed from the word-wrap mixin and is no longer output.

Renamed the word-wrap mixin to overflow-wrap to align with the name change in the CSS spec.

Source code(tar.gz)
Source code(zip)
v5.0.0.beta.6(Jun 6, 2016)
Added

Added a value-prefixer mixin for generating vendor prefixes on values.

Source code(tar.gz)
Source code(zip)
v4.2.7(Apr 15, 2016)
Fixed

Fixed a Sass deprecation warning when using the background and background-image mixins.

Source code(tar.gz)
Source code(zip)
v5.0.0.beta.5(Mar 23, 2016)
Fixed

Fixed a Sass load path issue that would intermittently break the importing of Bourbon in Rails apps.

Changed

Swapped the order of the $file-formats and $asset-pipeline arguments in the font-face mixin, so that $asset-pipeline is last (because it has a default and is likely used the least).

Source code(tar.gz)
Source code(zip)
v5.0.0.beta.4(Mar 11, 2016)
Fixed

We accidentally published 5.0.0.beta.3 as a stable release on npm, rather than a prerelease. We’ve unpublished that to go back to 4.2.6 on the stable channel.

Source code(tar.gz)
Source code(zip)
v5.0.0.beta.3(Mar 4, 2016)
Added

Added pathname requirement to resolve install issues.

Full Changelog
Source code(tar.gz)
Source code(zip)
v5.0.0.beta.2(Mar 4, 2016)
Added

Added global settings for the contrast-switch mixin: contrast-switch-dark-color & contrast-switch-light-color.

Added the triangle mixin back, but note that it’s been refactored and the arguments have changed.

Changed

Swapped argument names contrast-switch; what was $dark-color is now $light-color and what was $light-color is now $dark-color.

Removed

Dropped support for Ruby on Rails versions older than 4.2.

Dropped support for LibSass versions older than 3.3.

The is-light function is now private.

Full Changelog
Source code(tar.gz)
Source code(zip)
v5.0.0.beta.1(Feb 10, 2016)
Added

Added a contrast-switch mixin that switches between two colors based on the lightness of a another color. Great for building button styles.

Added an $all-text-inputs-invalid variable to target the :invalid pseudo-class on all text-based inputs.

The ellipsis mixin now takes a $display argument.

Added a font stack for system fonts: $font-stack-system.

Added a hide-visually mixin that hides an element visually while still allowing the content to be accessible to assistive technology, e.g. screen readers.

The font-face mixin now allows additional CSS properties to be included in its block, which will output as part of the @font-face declaration. See 2356719.

Changed

The global default for the modular-scale ratio is now set to $major-third (1.25), instead of $perfect-fourth (1.333).

All font stack variables are now prefixed with $font-stack-, e.g. $font-stack-helvetica.

Global settings are now set via a $bourbon map, instead of variables. See 4e43c2d.

The clearfix mixin now uses block display, instead of table.

Removed

The $weight and $style arguments in the font-face mixin have been deprecated. Instead, you can now include these—along with other CSS properties—within the mixin block and they’ll be output as part of the @font-face declaration.

Full Changelog
Source code(tar.gz)
Source code(zip)
v4.2.6(Nov 1, 2015)
Fixed

Fixed a bug with eyeglass support.

Source code(tar.gz)
Source code(zip)
v4.2.5(Sep 17, 2015)
Added

Support for eyeglass.

Source code(tar.gz)
Source code(zip)
v5.0.0.alpha.0(Aug 21, 2015)
:warning: The changes mentioned below may not be complete, but should cover most of the deprecations and changes.

New features

A new $global-font-file-formats setting has been added, allowing you to globally set the font file formats you want the font-face mixin to use. The default is ttf woff2 woff.

Improvements

Removed the type selectors in $all-text-inputs and $all-buttons to reduce specificity.

Font stack variables have been modernized.

The prefixer mixin has been refactored and no-longer uses the $global-prefixes setting.

Deprecations

All vendor prefixing mixins have been removed. We recommend using a more robust and maintainable solution like Autoprefixer.

The em() and rem() mixins have been deprecated.

The $monospace font stack variable has been deprecated in favor of new $consolas, $courier-new and $monaco variables.

The triangle() mixin has been deprecated.

Maintenance

The strip-units function is now strip-unit.

The size() mixin now requires a comma-separated argument list: @include size(1em, 2em);.

We restructured Bourbon’s directory tree to be more succinct and reduce possible conflicts. The full library now lives in a core/ directory and all of the Sass partials are within a bourbon/ directory to avoid polluting imports paths. This will affect load paths if you use Bower.

Compatibility with Neat, Bitters & Refills

This alpha should be fully compatible with the latest version of Neat (1.7.2). Bitters 1.0 is not compatible, however the master branch is. We’ll get 1.1 out ASAP. At this time, most of Refills will not be compatible.

If you have comments or come across a bug, please open an issue here on GitHub.
Source code(tar.gz)
Source code(zip)
v4.2.4(Aug 21, 2015)
Improvements

$all-text-inputs now accounts for input’s that don’t have a type attribute specified, as they default to type="text". (https://github.com/thoughtbot/bourbon/commit/8e7e36e01c47194d83951fb6315c5b26a008f2b7)

Maintenance

The bourbon npm package now has a proper load path. (https://github.com/thoughtbot/bourbon/commit/36c2d5576f1fe9dbdfd9543e15064c5a4a16343e)

Source code(tar.gz)
Source code(zip)
bourbon-v4.2.4.zip(7.76 MB)
v4.2.3(May 8, 2015)
Bug fixes

Fixed an issue with the font-face mixin outputting an extraneous commas when using LibSass set to compressed output

Source code(tar.gz)
Source code(zip)
bourbon-v4.2.3.zip(49.48 KB)
v4.2.2(Apr 1, 2015)
Bug fixes

The flex-direction mixin now properly outputs box-direction (old syntax) if set to normal.

Source code(tar.gz)
Source code(zip)
bourbon-v4.2.2.zip(49.73 KB)
v4.2.1(Feb 23, 2015)

Restore app directory for npm
Source code(tar.gz)
Source code(zip)
bourbon-v4.2.1.zip(5.18 MB)
v4.2.0(Feb 13, 2015)
:tada: Bourbon is now compatible with LibSass 3.1+!

Improvements

$all-button-inputs is now simply $all-buttons ($all-button-inputs will continue to work until v5.0).

$all-buttons also now includes the button element.

$all-text-inputs now includes the textarea element.

Bug fixes

selection is now compatible with LibSass and we fixed a bug which caused errors in certain versions of Ruby Sass.

Fixed a bug with hide-text which caused some typefaces to extend into the visible area. It also no longer requires a height.

Deprecations

box-sizing has been deprecated and will be removed in v5.0.

Maintenance

Bourbon now requires Sass 3.4.

We are now bourbon on npm.

We are now using SCSS-Lint with Hound to help us keep our Sass in tip-top shape.

We’ve begun porting our documentation over to SassDoc, which will allow them to be versioned and make updating easier.

We’ve updated our browser support.

Source code(tar.gz)
Source code(zip)
bourbon-v4.2.0.zip(6.42 MB)
v3.2.4(Jan 16, 2015)
Fixed syntax bugs in the flexbox and render-gradients mixins

Fixed a bug in the position mixin which caused LibSass to not ignore values

Source code(tar.gz)
Source code(zip)
bourbon-v3.2.4.zip(3.90 MB)

Owner

thoughtbot, inc.

We work with organizations of all sizes to design, develop, and grow their web and mobile products.

GitHub https://www.bourbon.io/

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

210 Dec 13, 2022

Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp

Quick start dự án Pug, Sass, Gulp Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp #️⃣ Setup Cài đặt Node js Tới thư mục project cài template và các mo

3 Oct 7, 2022

A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

1.3k Nov 8, 2022

A CSS button library built using Sass and Compass

Buttons 2.0 Buttons 2.0 Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is a free open source pro

5.1k Jan 4, 2023

⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

8 Sep 10, 2022

Convert css (scss/sass) to vanilla-extract.

CSS-to-vanilla-extract ⚡ Welcome ?? Convert CSS (SCSS/SASS) to vanilla-extract. playground Install npm i -D c2ve Usage Once installed, you can run it

31 Jan 4, 2023

An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

7 Sep 22, 2022

A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

22.7k Jan 3, 2023

Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

11 Jan 1, 2023

A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

17.7k Jan 8, 2023

Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

11.1k Jan 8, 2023

Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

4.5k Jan 1, 2023

Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation

SC5 style guide generator Looking for a maintainer If you would like to maintain the project, create an issue and tell a few words about yourself. Sty

1.3k Sep 26, 2022

JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

6.9k Dec 31, 2022

A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

21 Oct 9, 2022

A powerful little tool for managing CSS animations

NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.

2.1k Jan 2, 2023

:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

845 Dec 22, 2022

Microverse Module 02 Project: This is educational project is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with HTML, Sass, JavaScript and Webpack.

Project Demo Live Demo Description To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you

7 Oct 21, 2022

SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

2 Oct 3, 2022

A simple CSS tooltip made with Sass

Simptip [v1.0.4] A simple CSS tooltip made with Sass Visit Site, Documentation and some examples Installation Install with npm, Yarn or Bower: npm: np

650 Dec 14, 2022

A Lightweight Sass Tool Set

Related tags

Overview

A Lightweight Sass Tool Set

Helpful Links

Table of Contents

Requirements

Installation

Installation for Ruby on Rails 4.2+

Installing with npm and using a Node-based asset pipeline

Installing older versions of Bourbon

Command Line Interface

Options

Commands

Browser Support

Contributing

License

About

Comments

Description

Description

Development Environment

Description

Steps to Reproduce

Releases(v7.2.0)

v7.2.0(Feb 22, 2022)

What's Changed

v7.1.0(Feb 22, 2022)

Changed

v7.0.0(Mar 9, 2020)

Added

Changed

Removed

v6.0.0(Jul 10, 2019)

Removed

v5.1.0(Jul 20, 2018)

Added

Changed

v5.0.1(Jun 8, 2018)

Fixed

v5.0.0(Jan 5, 2018)

v5.0.0.beta.8(Jun 26, 2017)

Added

Changed

Fixed

v4.3.4(Apr 1, 2017)

Changed

v4.3.3(Feb 23, 2017)

Fixed

v4.3.2(Feb 10, 2017)

Fixed

v4.3.1(Feb 8, 2017)

Fixed

v4.3.0(Feb 3, 2017)

Added

v5.0.0.beta.7(Nov 3, 2016)

Added

Changed

v5.0.0.beta.6(Jun 6, 2016)

Added

v4.2.7(Apr 15, 2016)

Fixed

v5.0.0.beta.5(Mar 23, 2016)

Fixed

Changed

v5.0.0.beta.4(Mar 11, 2016)

Fixed

v5.0.0.beta.3(Mar 4, 2016)

Added

v5.0.0.beta.2(Mar 4, 2016)

Added

Changed

Removed

v5.0.0.beta.1(Feb 10, 2016)

Added

Changed

Removed

v4.2.6(Nov 1, 2015)

Fixed

v4.2.5(Sep 17, 2015)