Issue with bourbon, neat, bitters and flash bar

I created a new rails project and setup bourban, neat, and bitters but the flash div isn’t getting styled by the default bitters style. I installed bitters into app/assets/stylesheets/bitters by running bitters install in app/assets/stylesheets and moving base to bitters (i.e., mv base bitters).

Gemfile has:

gem 'bourbon'
gem 'bitters'
gem 'neat'
gem 'refills'

app/assets/stylesheets/application.css.scss has:

@import "normalize.css";
@import "bourbon";
@import "bitters/grid-settings";
@import "neat";
@import "bitters/base";

The rendered page has:

<div class="flash success">This success should be styled</div>
<div class="flash notice">This notice should be styled</div>
<div class="flash error">This error should be styled</div>

I put a sample project which demonstrates the problem at Can someone tell me what I need to do to get the flash divs to be styled by the default bitters style?

hi Christian,

you need to extend the flash-style in your own styles, eg:

p.notice {
  @extend %flash-success;



Thanks. using

.success {
  @extend %flash-success;

did get the flashbar styled. I didn’t expect that I needed to do anything extra since most of the styles are applied without me having to do anything beyond applying the appropriate class to the div. I guess I just need to get more experience with Sass.

It would be nice if the bitters example page provided the markup and stylesheets used to generate the page.

Hi Christopher, yeah, I agree, some markup examples for Bitters would be a great idea. Overall I would welcome more examples, best practices, etc …