Issue with bourbon, neat, bitters and flash bar

Design Front End Development
1

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 http://github.com/cvoltz/bourban-test. Can someone tell me what I need to do to get the flash divs to be styled by the default bitters style?

2

hi Christian,

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

p.notice {
  @extend %flash-success;
}

greetings,

Anthony

3

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.

4

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

greetings,

Anthony