thoughtbot/bitters

Add a dash of pre-defined style to your Bourbon.

Scaffold styles, variables and structure for web projects.

Bitters helps designers start projects faster by defining a basic set of CSS and Sass variables, default element style and project structure. It’s been specifically designed for use within web applications. Bitters should live in your project’s root Sass directory and we encourage you to modify and extend it to meet your project's needs.

Bitters is made to work alongside a CSS reset or style-normalizer; not replace one. We like to use Normalize.

Helpful Links

• Change log
• Twitter
• Stack Overflow

Table of Contents

• Requirements
• Installation
• Using Bitters
• Command Line Interface
• Contributing
• License
• About

Requirements

• Sass 3.4+ or LibSass 3.3+
• Ruby 1.9.3+ (required to install Bitters from the command line)

Installation

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

   gem install bitters

2. Install the Bitters library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in app/assets/stylesheets:

   bitters install

   A base directory will be generated which contains all of the Bitters files.

3. Import Bitters in your application.css.scss or main manifest file. All additional stylesheets should be imported below Bitters.

   @import "base/base";

4. Once Bitters is set up, you can begin to import your styles below them.

   @import "base/base";
   @import "my-project-styles";
   …

Using Bitters

Sass structure & default style

The Bitters directory (base/) should contain styles for all the basic elements used throughout the project. Add code to the existing files or add new files. Customize Bitters for your site as you see fit.

Variables

This houses all variables that are used, or will be used, in more than one file in your site.

Typography

All type is based on a font-size of 100%, set on the html element.

Lists

All lists have stripped out styles. No bullets, no left padding.

Forms

Adds basic styles all form elements. The variables at the top of the file all inherit from the variables file but make it really easy to be overridden.

Buttons

Basic style for button and input[type="submit"]. Base button styles can be changed by modifying the styles applied to button as well as [type='button'], [type='reset'], and [type='submit'] in the base/_buttons.scss file.

Command Line Interface

bitters [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
bitters install	Install Bitters into the current directory
bitters reset	Reset Bitters
bitters remove	Removes Bitters from the current directory
bitters help	Show help
bitters version	Show the version number

Contributing

See the contributing document. Thank you, contributors!

License

Bitters is copyright © 2013-2019 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the license.

About

Bitters 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.

bitters's Issues

Flash alerts not displaying

Having only just seen 5aa232c, this may now be irrelevant but I'll post it anyway in case others have been having the same.

All other elements within bitters seem to be loading fine and I've tried creating pre and blockquote elements just to check that I'm not going mad. Whatever I do, I'm unable to get alerts working the way I expect. Installation of Bourbon/Neat/Bitters was fine so I don't think this is an installation issue.

I've uploaded a project with this issue to https://github.com/jackturnbull/phdb in case that saves you chasing a ghost.

Remove non-type elements from typography.scss

Specifically <hr /> and <img> because they aren't type

Confusing Links on Example Page

It´s not much of an issue, but more a suggestion. On the Bitters Examplepage there´s a link to the example itself (on the top and on the bottom). I was confused. I thought these links would get me to a 'real' example (e.g. a website built on top of bitters).

Thanks Ben

Resize Attribute

This may be more a question than a bug report. 😄 Does it make sense to have a resize attribute on text inputs? I understand the declaration for text areas.

Unitless Line-height Issues

Good day!

It's been a long day, so please excuse me if I'm spacing out on this one.

Use this snippet as reference:

$base-font-size: 16px;
$base-line-height: $base-font-size * 1.75;
$unitless-line-height: $base-line-height / ($base-line-height * 0 + 1);
$header-line-height: 1;
$base-border-radius: em(3);

There are a couple issues that I'm seeing with this line: $unitless-line-height: $base-line-height / ($base-line-height * 0 + 1);

Wouldn't ($base-line-height * 0 + 1), just equal 1? You're basically, just stripping $base-line-height of its units and setting that, which introduces the next issue:

According to the Mozilla line-height summary, the "number value" is:

The used value is this unitless multiplied by the element's font size. The computed value is the same as the specified . In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.

So, if we calculate $unitless-line-height, we would get 28. If 28 is used as a line-height value without units, the resulting line-height would be roughly 448px. This is wrong.

I think this is what you guys were looking for:

$unitless-line-height: $base-line-height / $base-font-size;

This will result in 1.75 and strip the units while at it - which is what you want to use for unitless line-height.

which tags does the project aim to cover?

There isn't style for many tags, like article, aside, section. would it be appropriate to have style for these, or is that somehow not in line with the goal of the project?

Inconsistent instructions.

The README instructions say to install bitters via gem and import with @import "bitters/bitters"; to add it to your sheets. However, when installing via gem it creates a base folder with a structure similar to what's in app/assets/stylesheets/ (as I assume it should). The README seems to be expecting it to install what's in the bitters/ folder in this repo, which isn't what seems to be on gem.

Is the repo just not up to date with the readme, or are the stylesheets misplaced?

problem with list rendering

What is &% in the following?

&%default-ul {
  list-style-type: disc;
  margin-bottom: $base-spacing / 2;
  padding-left: $base-spacing;
}

&%default-ol {
  list-style-type: decimal;
  margin-bottom: $base-spacing / 2;
  padding-left: $base-spacing;
}

It does not seem to end up in the comiled css file.

Marketing language should explicitly say that Bitters is for applications

See discussion here: #60 (comment)

Add marketing site to Beautiful Open

http://beautifulopen.com/

New release/version bump?

Hello,

Most of your refills copy/pastes on the refills website do not work because they are missing variables available in the master but not in the gem version. Time for a version bump so they are synced up?

Thank you!

Make Neat a dependency

This would allow us to do some more interesting things with the typography.

Semantic Versioning

Hello, with commit ee3a533 some partials were renamed, which broke third-party references to said files (e.g. centresource/generator-playbook#33). Would you consider using semantic versioning in the future? I would argue that renaming partials is like changing the API in a backwards-incompatible manner. :)

Missing import "extends/base"

For Bitters version 0.9.4 ...

When importing Bitters in my SASS, this error popped up:

error bower_components/bitters/app/assets/stylesheets/_bitters.scss (Line 10: File to import not found or unreadable: extends/base.

Using the Bower package (as "bitters": "~0.9.4" within bower.json) here is the file tree:

bower_components/bitters/
├── Gemfile
├── LICENSE
├── README.md
├── Rakefile
├── app
│   └── assets
│       └── stylesheets
│           ├── _bitters.scss
│           ├── _buttons.scss
│           ├── _flashes.scss
│           ├── _forms.scss
│           ├── _grid-settings.scss
│           ├── _lists.scss
│           ├── _tables.scss
│           ├── _typography.scss
│           ├── _variables.scss
│           ├── extends
│           │   ├── _button.scss
│           │   ├── _clearfix.scss
│           │   ├── _ellipsis.scss
│           │   ├── _extends.scss
│           │   └── _hide-text.scss
│           └── mixins
│               ├── _flash.scss
│               └── _mixins.scss
├── bin
│   └── bitters
├── bitters.gemspec
└── lib
    ├── bitters
    │   ├── generator.rb
    │   └── version.rb
    └── bitters.rb

8 directories, 25 files

Is there a missing file, or is this an extraneous import?

$base-spacing non-existent variable?

Just started experimenting with the Bourbon/Neat/Bitters family. I just added Bitters to the mix so I can add some refills. Now when I compile, I'm getting an undefined error for a variable called $base-spacing. I checked the _variables.scss file in base and don't see it. Can anyone shed some light on this variable, if it exists, and what the value is if it does?

Change to Bitters-only buttons results in a loss of :disabled

The change made in ca2b617 (specifically, this line switching away from Bourbon’s button mixin has resulted in the loss the the :disabled state for buttons.

It was rather lovely that it was there as part of the button mixin, and if Bourbon’s mixin is going away in v4.0, perhaps it should be added back in here?

Allow variables to be overridden

Hello,

I'm loving bitters so far but one annoyance I have is that I can't override variables without modifying the Bitters source files.

It would be helpful to add !default to all the variables in _variables.scss to allow us to set those variables before the file is loaded, that way Bitters won't override them and use our setting.

This is useful especially when it comes to updating the library - it means that we won't lose any of our changes.

Undefined variable: "$helvetica".

When I installed bitters in my rails app I got this error message:

Undefined variable: "$helvetica".
(in G:/blog/app/assets/stylesheets/base/_base.scss:2)
How do I fix it:

Full Trace:
app/assets/stylesheets/base/_variables.scss:2
app/assets/stylesheets/base/_base.scss:7
sass (3.2.19) lib/sass/script/variable.rb:49:in _perform' sass (3.2.19) lib/sass/script/node.rb:40:inperform'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:327:in visit_variable' sass (3.2.19) lib/sass/tree/visitors/base.rb:37:invisit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:inblock in visit_import'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:in map' sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:invisit_import'
sass (3.2.19) lib/sass/tree/visitors/base.rb:37:in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:invisit'
sass (3.2.19) lib/sass/tree/visitors/base.rb:53:in block in visit_children' sass (3.2.19) lib/sass/tree/visitors/base.rb:53:inmap'
sass (3.2.19) lib/sass/tree/visitors/base.rb:53:in visit_children' sass (3.2.19) lib/sass/tree/visitors/perform.rb:109:inblock in visit_children'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:121:in with_environment' sass (3.2.19) lib/sass/tree/visitors/perform.rb:108:invisit_children'
sass (3.2.19) lib/sass/tree/visitors/base.rb:37:in block in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:128:invisit_root'
sass (3.2.19) lib/sass/tree/visitors/base.rb:37:in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:invisit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:7:in visit' sass (3.2.19) lib/sass/tree/root_node.rb:20:inrender'
sass (3.2.19) lib/sass/engine.rb:315:in _render' sass (3.2.19) lib/sass/engine.rb:262:inrender'
sass-rails (4.0.5) lib/sass/rails/template.rb:22:in evaluate' tilt (1.4.1) lib/tilt/template.rb:103:inrender'
sprockets (2.12.3) lib/sprockets/context.rb:197:in block in evaluate' sprockets (2.12.3) lib/sprockets/context.rb:194:ineach'
sprockets (2.12.3) lib/sprockets/context.rb:194:in evaluate' sprockets (2.12.3) lib/sprockets/processed_asset.rb:12:ininitialize'
sprockets (2.12.3) lib/sprockets/base.rb:374:in new' sprockets (2.12.3) lib/sprockets/base.rb:374:inblock in build_asset'
sprockets (2.12.3) lib/sprockets/base.rb:395:in circular_call_protection' sprockets (2.12.3) lib/sprockets/base.rb:373:inbuild_asset'
sprockets (2.12.3) lib/sprockets/index.rb:94:in block in build_asset' sprockets (2.12.3) lib/sprockets/caching.rb:58:incache_asset'
sprockets (2.12.3) lib/sprockets/index.rb:93:in build_asset' sprockets (2.12.3) lib/sprockets/base.rb:287:infind_asset'
sprockets (2.12.3) lib/sprockets/index.rb:61:in find_asset' sprockets (2.12.3) lib/sprockets/processed_asset.rb:111:inblock in resolve_dependencies'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:105:in each' sprockets (2.12.3) lib/sprockets/processed_asset.rb:105:inresolve_dependencies'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:97:in build_required_assets' sprockets (2.12.3) lib/sprockets/processed_asset.rb:16:ininitialize'
sprockets (2.12.3) lib/sprockets/base.rb:374:in new' sprockets (2.12.3) lib/sprockets/base.rb:374:inblock in build_asset'
sprockets (2.12.3) lib/sprockets/base.rb:395:in circular_call_protection' sprockets (2.12.3) lib/sprockets/base.rb:373:inbuild_asset'
sprockets (2.12.3) lib/sprockets/index.rb:94:in block in build_asset' sprockets (2.12.3) lib/sprockets/caching.rb:58:incache_asset'
sprockets (2.12.3) lib/sprockets/index.rb:93:in build_asset' sprockets (2.12.3) lib/sprockets/base.rb:287:infind_asset'
sprockets (2.12.3) lib/sprockets/index.rb:61:in find_asset' sprockets (2.12.3) lib/sprockets/bundled_asset.rb:37:ininit_with'
sprockets (2.12.3) lib/sprockets/asset.rb:24:in from_hash' sprockets (2.12.3) lib/sprockets/caching.rb:54:incache_asset'
sprockets (2.12.3) lib/sprockets/index.rb:93:in build_asset' sprockets (2.12.3) lib/sprockets/base.rb:287:infind_asset'
sprockets (2.12.3) lib/sprockets/index.rb:61:in find_asset' sprockets (2.12.3) lib/sprockets/environment.rb:75:infind_asset'
sprockets (2.12.3) lib/sprockets/base.rb:295:in []' sprockets-rails (2.2.2) lib/sprockets/rails/helper.rb:230:inlookup_asset_for_path'
sprockets-rails (2.2.2) lib/sprockets/rails/helper.rb:190:in check_errors_for' sprockets-rails (2.2.2) lib/sprockets/rails/helper.rb:159:inblock in stylesheet_link_tag'
sprockets-rails (2.2.2) lib/sprockets/rails/helper.rb:158:in map' sprockets-rails (2.2.2) lib/sprockets/rails/helper.rb:158:instylesheet_link_tag'
app/views/layouts/application.html.erb:5:in _app_views_layouts_application_html_erb___1606148923_53075660' actionview (4.1.8) lib/action_view/template.rb:145:inblock in render'
activesupport (4.1.8) lib/active_support/notifications.rb:161:in instrument' actionview (4.1.8) lib/action_view/template.rb:339:ininstrument'
actionview (4.1.8) lib/action_view/template.rb:143:in render' actionview (4.1.8) lib/action_view/renderer/template_renderer.rb:67:inrender_with_layout'
actionview (4.1.8) lib/action_view/renderer/template_renderer.rb:53:in render_template' actionview (4.1.8) lib/action_view/renderer/template_renderer.rb:17:inrender'
actionview (4.1.8) lib/action_view/renderer/renderer.rb:42:in render_template' actionview (4.1.8) lib/action_view/renderer/renderer.rb:23:inrender'
actionview (4.1.8) lib/action_view/rendering.rb:99:in _render_template' actionpack (4.1.8) lib/action_controller/metal/streaming.rb:217:in_render_template'
actionview (4.1.8) lib/action_view/rendering.rb:82:in render_to_body' actionpack (4.1.8) lib/action_controller/metal/rendering.rb:32:inrender_to_body'
actionpack (4.1.8) lib/action_controller/metal/renderers.rb:32:in render_to_body' actionpack (4.1.8) lib/abstract_controller/rendering.rb:25:inrender'
actionpack (4.1.8) lib/action_controller/metal/rendering.rb:16:in render' actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:41:inblock (2 levels) in render'
activesupport (4.1.8) lib/active_support/core_ext/benchmark.rb:12:in block in ms' C:/Ruby21-x64/lib/ruby/2.1.0/benchmark.rb:294:inrealtime'
activesupport (4.1.8) lib/active_support/core_ext/benchmark.rb:12:in ms' actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:41:inblock in render'
actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:84:in cleanup_view_runtime' activerecord (4.1.8) lib/active_record/railties/controller_runtime.rb:25:incleanup_view_runtime'
actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:40:in render' actionpack (4.1.8) lib/action_controller/metal/implicit_render.rb:10:indefault_render'
actionpack (4.1.8) lib/action_controller/metal/responder.rb:238:in default_render' actionpack (4.1.8) lib/action_controller/metal/responder.rb:165:into_html'
actionpack (4.1.8) lib/action_controller/metal/responder.rb:158:in respond' actionpack (4.1.8) lib/action_controller/metal/responder.rb:151:incall'
actionpack (4.1.8) lib/action_controller/metal/mime_responds.rb:400:in respond_with' app/controllers/posts_controller.rb:9:inindex'
actionpack (4.1.8) lib/action_controller/metal/implicit_render.rb:4:in send_action' actionpack (4.1.8) lib/abstract_controller/base.rb:189:inprocess_action'
actionpack (4.1.8) lib/action_controller/metal/rendering.rb:10:in process_action' actionpack (4.1.8) lib/abstract_controller/callbacks.rb:20:inblock in process_action'
activesupport (4.1.8) lib/active_support/callbacks.rb:113:in call' activesupport (4.1.8) lib/active_support/callbacks.rb:113:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:149:in block in halting_and_conditional' activesupport (4.1.8) lib/active_support/callbacks.rb:149:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:149:in block in halting_and_conditional' activesupport (4.1.8) lib/active_support/callbacks.rb:229:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:229:in block in halting' activesupport (4.1.8) lib/active_support/callbacks.rb:229:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:229:in block in halting' activesupport (4.1.8) lib/active_support/callbacks.rb:166:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:166:in block in halting' activesupport (4.1.8) lib/active_support/callbacks.rb:166:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:166:in block in halting' activesupport (4.1.8) lib/active_support/callbacks.rb:166:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:166:in block in halting' activesupport (4.1.8) lib/active_support/callbacks.rb:86:incall'
activesupport (4.1.8) lib/active_support/callbacks.rb:86:in run_callbacks' actionpack (4.1.8) lib/abstract_controller/callbacks.rb:19:inprocess_action'
actionpack (4.1.8) lib/action_controller/metal/rescue.rb:29:in process_action' actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:31:inblock in process_action'
activesupport (4.1.8) lib/active_support/notifications.rb:159:in block in instrument' activesupport (4.1.8) lib/active_support/notifications/instrumenter.rb:20:ininstrument'
activesupport (4.1.8) lib/active_support/notifications.rb:159:in instrument' actionpack (4.1.8) lib/action_controller/metal/instrumentation.rb:30:inprocess_action'
actionpack (4.1.8) lib/action_controller/metal/params_wrapper.rb:250:in process_action' activerecord (4.1.8) lib/active_record/railties/controller_runtime.rb:18:inprocess_action'
actionpack (4.1.8) lib/abstract_controller/base.rb:136:in process' actionview (4.1.8) lib/action_view/rendering.rb:30:inprocess'
actionpack (4.1.8) lib/action_controller/metal.rb:196:in dispatch' actionpack (4.1.8) lib/action_controller/metal/rack_delegation.rb:13:indispatch'
actionpack (4.1.8) lib/action_controller/metal.rb:232:in block in action' actionpack (4.1.8) lib/action_dispatch/routing/route_set.rb:82:incall'
actionpack (4.1.8) lib/action_dispatch/routing/route_set.rb:82:in dispatch' actionpack (4.1.8) lib/action_dispatch/routing/route_set.rb:50:incall'
actionpack (4.1.8) lib/action_dispatch/journey/router.rb:73:in block in call' actionpack (4.1.8) lib/action_dispatch/journey/router.rb:59:ineach'
actionpack (4.1.8) lib/action_dispatch/journey/router.rb:59:in call' actionpack (4.1.8) lib/action_dispatch/routing/route_set.rb:678:incall'
warden (1.2.3) lib/warden/manager.rb:35:in block in call' warden (1.2.3) lib/warden/manager.rb:34:incatch'
warden (1.2.3) lib/warden/manager.rb:34:in call' rack (1.5.2) lib/rack/etag.rb:23:incall'
rack (1.5.2) lib/rack/conditionalget.rb:25:in call' rack (1.5.2) lib/rack/head.rb:11:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/params_parser.rb:27:in call' actionpack (4.1.8) lib/action_dispatch/middleware/flash.rb:254:incall'
rack (1.5.2) lib/rack/session/abstract/id.rb:225:in context' rack (1.5.2) lib/rack/session/abstract/id.rb:220:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/cookies.rb:560:in call' activerecord (4.1.8) lib/active_record/query_cache.rb:36:incall'
activerecord (4.1.8) lib/active_record/connection_adapters/abstract/connection_pool.rb:621:in call' activerecord (4.1.8) lib/active_record/migration.rb:380:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/callbacks.rb:29:in block in call' activesupport (4.1.8) lib/active_support/callbacks.rb:82:inrun_callbacks'
actionpack (4.1.8) lib/action_dispatch/middleware/callbacks.rb:27:in call' actionpack (4.1.8) lib/action_dispatch/middleware/reloader.rb:73:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/remote_ip.rb:76:in call' actionpack (4.1.8) lib/action_dispatch/middleware/debug_exceptions.rb:17:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/show_exceptions.rb:30:in call' railties (4.1.8) lib/rails/rack/logger.rb:38:incall_app'
railties (4.1.8) lib/rails/rack/logger.rb:20:in block in call' activesupport (4.1.8) lib/active_support/tagged_logging.rb:68:inblock in tagged'
activesupport (4.1.8) lib/active_support/tagged_logging.rb:26:in tagged' activesupport (4.1.8) lib/active_support/tagged_logging.rb:68:intagged'
railties (4.1.8) lib/rails/rack/logger.rb:20:in call' actionpack (4.1.8) lib/action_dispatch/middleware/request_id.rb:21:incall'
rack (1.5.2) lib/rack/methodoverride.rb:21:in call' rack (1.5.2) lib/rack/runtime.rb:17:incall'
activesupport (4.1.8) lib/active_support/cache/strategy/local_cache_middleware.rb:26:in call' rack (1.5.2) lib/rack/lock.rb:17:incall'
actionpack (4.1.8) lib/action_dispatch/middleware/static.rb:84:in call' rack (1.5.2) lib/rack/sendfile.rb:112:incall'
railties (4.1.8) lib/rails/engine.rb:514:in call' railties (4.1.8) lib/rails/application.rb:144:incall'
rack (1.5.2) lib/rack/lock.rb:17:in call' rack (1.5.2) lib/rack/content_length.rb:14:incall'
rack (1.5.2) lib/rack/handler/webrick.rb:60:in service' C:/Ruby21-x64/lib/ruby/2.1.0/webrick/httpserver.rb:138:inservice'
C:/Ruby21-x64/lib/ruby/2.1.0/webrick/httpserver.rb:94:in run' C:/Ruby21-x64/lib/ruby/2.1.0/webrick/server.rb:295:inblock in start_thread'

Padding and margin-bottom for forms is missing unit

My forms didn't look as pretty as the examples on the bitters site. It looks like Chrome didn't like the calculated padding and margin-bottom because it was missing the em unit.

I changed lines 40 & 41 in _forms.scss from this:

 margin-bottom: $base-line-height / 2;
 padding: ($base-line-height / 3) ($base-line-height / 3);

to this:

 margin-bottom: #{$base-line-height / 2}em;
 padding: #{$base-line-height / 3}em #{$base-line-height / 3}em;

and everything seems OK now. If this makes sense to you then I can submit a pull request.

Checkboxes are labeled as radio buttons in example page

�In "Fieldsets and Form Elements" section, there are checkboxes labeled as "Radio1, 2, 3 ..." respectively. It looks unintended and should be like "Checkbox 1, 2, 3...".

Broken links to Flashes & Errors

Clicking the links to "Flashes" and "Errors" on http://bitters.bourbon.io produces 404 errors.

Instructions on Github do not mention `bitters install` should be in stylesheets directory

after installing bourbon and neat i added gem 'bitters' to the Gemfile and then did:

bundle install
bitters install

and found the resulting base/ in the rails project home where the Gemfile is.

should this not be installed either in app/assets/stylesheets/ or vendor/assets/stylesheets/?

also, i found it unclear what is being said in part 5 of the install instructions... are you saying that we should add what is mentioned after "And import Neat after Bitters:" to _base.scss or app/assets/stylesheets/application.css.scss (i am expecting this is the correct one)?

this is with:
osx 10.10
rvm 1.25.33
Rails 4.1.6
ruby 2.1.3p242 (2014-09-19 revision 47630) [x86_64-darwin14.0]

Split up variables file

Right now variables file is getting rather long. Is it worth it to split up into variables/_colors.scss variables/_sizes.scss etc?

Overwriting $base-accent-color not working

When I try overwriting $base-accent-color: red;. it doesn't work. I put it on top of the sass.

@import "_settings/fonts";

@import "../bower/bourbon/dist/bourbon";
@import "_settings/grid";
@import "../bower/neat/app/assets/stylesheets/neat";
$base-accent-color: red; // not working
@import "../bower/bitters/app/assets/stylesheets/base";

Install Through Bower

Would be nice to be able to fetch bitters through bower as you can with bourbon and neat.

Carry-over in-depth instructions to marketing website

Right now, the GitHub README and the marketing website have slightly different installation instructions. Specifically, the marketing website doesn’t provide “in-depth” instructions, which can cause confusion for people (e.g. this Refills issue).

Website links to non-existant heading in README

A link on the website ('In-depth instructions on Github') points to a heading which was changed here, so the anchor does not work.

The file I'm referring to is index.html on the gh-pages branch, line 83.

<button>s have weird text alignment

First one is an <input type="submit">, second one is a <button>:

Incomplete Documentation

When importing the grid settings I kept getting compiling errors. I went through a bunch of installs just to realize you need to change the path of neat_helpers when not in Rails. This should be noted in the documentation. Thanks.

Add default! to variables to allow easy overriding

I want to override the default bitter variables such as $base-font-family and $header-font-family. Right now, since these do not have the SASS default! on them you need to do the following (at least I think you do):

@import "base/variables"

// Bitters Variable Overrides
$base-font-family: "Adobe Garamond W01", $serif
$header-font-family: "ITC Kabel W01", $base-font-family

@import "base/base"

If the default! was added I can just do

$base-font-family: "Adobe Garamond W01", $serif
$header-font-family: "ITC Kabel W01", $base-font-family

@import "base/base"

And my custom defined variables would stick.

Is there a reason not to do this? I will create a PR if people like this idea.

Thanks,
Evan

Potentially rename $base-body-color

Currently the base background variable is named $base-body-color which is a bit of a misnomer since color is an attribute. I think this could potentially be renamed $base-bg or $base-background-color`.

The name $base-body-color makes it sound like it is the color: for body which it is not. I would be curious on what people think about this.

https://github.com/thoughtbot/bitters/blob/master/app/assets/stylesheets/_variables.scss#L27

Text-Rendering prevents Typekit from working in default Android Browser.

Hello everyone! I'm a huge fan of Sass and the Bourbon library and have been using it at every opportunity here in the UX & Front-End Dev course here at Metis with @tysongach. Woot!

I encountered a bug that interferes with deployment of Typekit fonts in the stock Android browser.

The text-rendering: optimizeLegibility; declaration prevents all Typekit fonts from displaying for all headings. It forces the browser to fall down the font stack to the default sans-serif for my device (Roboto, in this case).

My device is a Samsung Galaxy running version 4.4.2-L710VPUDND8 of the "Internet" app for Android. I was able to duplicate this bug on other Android devices, and on a live server as well.

Below, I've included two images, one showing how the font looks with text-rendering: optimizeLegibility; included, and one with it commented out.

Other information about this bug in the wild:

• Adobe Communities
• Android Issue Tracker

Hope this helps! 😄

Include bower support

Would be very nice to have support for bower as you do for neat and bourbon.

Thanks a lot! =)

gem install Bitters per instructions returns an error on OSX with RVM

output:

ERROR:  Could not find a valid gem 'Bitters' (>= 0) in any repository
ERROR:  Possible alternatives: bitters

gem install bitters

works. I know its a typo but it helps when using c&p.

Wrong import link when using bitters with neat

From the README, in _bitters.scss:

@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
@import "grid-settings";

When not in Rails, this should be:

@import "../neat/neat-helpers"
@import "grid-settings";

If you run bourbon install, bitters install and neat install in a scss directory, and the folder structure is

├── scss
│   ├── bitters
│   ├── bourbon
│   ├── neat

Error or am I somehow not sticking to convention?

ActionView::Template::Error (Undefined variable: "$helvetica".

Got this off a fresh Rails 4.0 install, after installing and importing bitters:

ActionView::Template::Error (Undefined variable: "$helvetica".
  (in /Users/qrush/Dev/switchboard/app/assets/stylesheets/application.css.scss:3)):
    2: <html>
    3: <head>
    4:   <title>Switchboard</title>
    5:   <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    6:   <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    7:   <%= csrf_meta_tags %>
    8: </head>

Found that this is in Bourbon...so installing that now. I thought I wouldn't have to, since the README says:

Install Bourbon and Neat (optional).

So maybe that means Install Bourbon, OPTIONALLY install Neat? Maybe this just needs to be clarified in the README.

Trouble Compiling Bitters in rails4

Hi guys,

I've installed Bitters following the instructions here.
But I'm having lot's of trouble compiling bitters in a production env in rails 4.
(also deploying to heroku because of this)

Is there any known issue?

(I've done every trick I knew but cant compile Bitters...)

$ rake assets:precompile RAILS_ENV=production
rake aborted!
Sass::SyntaxError: Undefined variable: "$helvetica".
  (in /Users/abarro/projects/bizzu/app/assets/stylesheets/base/_base.scss:2)
/Users/abarro/projects/bizzu/app/assets/stylesheets/base/_variables.scss:2
/Users/abarro/projects/bizzu/app/assets/stylesheets/base/_base.scss:7
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/script/variable.rb:49:in `_perform'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/script/node.rb:40:in `perform'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:327:in `visit_variable'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:37:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:100:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:227:in `block in visit_import'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:227:in `map'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:227:in `visit_import'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:37:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:100:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:53:in `map'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:53:in `visit_children'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:37:in `block in visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/base.rb:37:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:100:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/visitors/perform.rb:7:in `visit'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/tree/root_node.rb:20:in `render'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/engine.rb:315:in `_render'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-3.2.19/lib/sass/engine.rb:262:in `render'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sass-rails-4.0.4/lib/sass/rails/template.rb:22:in `evaluate'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/context.rb:197:in `block in evaluate'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/context.rb:194:in `each'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/context.rb:194:in `evaluate'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:12:in `initialize'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:374:in `new'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:374:in `block in build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:395:in `circular_call_protection'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:373:in `build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:94:in `block in build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/caching.rb:58:in `cache_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:93:in `build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:287:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:61:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:111:in `block in resolve_dependencies'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:105:in `each'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:105:in `resolve_dependencies'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:97:in `build_required_assets'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/processed_asset.rb:16:in `initialize'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:374:in `new'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:374:in `block in build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:395:in `circular_call_protection'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:373:in `build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:94:in `block in build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/caching.rb:58:in `cache_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:93:in `build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:287:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:61:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/bundled_asset.rb:37:in `init_with'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/asset.rb:24:in `from_hash'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/caching.rb:54:in `cache_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:93:in `build_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/base.rb:287:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/index.rb:61:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:211:in `block in find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:257:in `benchmark'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:210:in `find_asset'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:119:in `block in compile'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:118:in `each'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/sprockets/manifest.rb:118:in `compile'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-rails-2.2.0/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-2.11.3/lib/rake/sprocketstask.rb:146:in `with_logger'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/gems/sprockets-rails-2.2.0/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/bin/ruby_executable_hooks:15:in `eval'
/Users/abarro/.rvm/gems/ruby-2.1.3@bizzu/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

Config/environmets/production.rb:

config.assets.compile = true
config.assets.precompile =  ['*.js', '*.css', '*.css.scss']

Installing Bitters

Hi,

I have been trying to install the bitters gem. In fact, I have installed it, as I can see the gem file. But when I run the command ‘bitters install’ in my sass folder, I get ‘command not found’. Same happens when I try ‘bitters -v’.

Any suggestions appreciated.

Jeff

Confusing install instructions in the readme

You state that when you "install bitters" it will create a BASE folder and then you show how to add bitters under bourbon by using base/base. This is just not true. when you install bitters it creates a bitters folder and use call bitters by bitters/bitters. Also the file to modify when using neat is also incorrect.

0.10.0 introduced a backwards-incompatible change to the import path

A minor quibble: I've got some code that relies on the old bitters/bitters install path and @import signature.

I don't quite understand why a minor point release would change something as basic as the install path, nor why it would change to something as generic as base/base. Easy enough to work around, but for my 2¢, @import 'bitters/bitters' is far more descriptive than @import 'base/base'. I'd like to see a return to the previous install path.

_grid_settings is never included?

looks like _grid_settings is never included

is it somehow automagically included at the neat level?

Focus states for buttons

Should we include focus states for buttons and anchors? When tabbing through the Bitters example page the focus states for text anchors are very subtle and the "button anchors" don't have focus indications.

We are currently setting outline to none here: https://github.com/thoughtbot/bitters/blob/master/app/assets/stylesheets/_typography.scss#L61

Should we consider not doing that?

Choosing Sass syntax during installation

I'd like to have the option of installing as .scss or .sass, with .scss being the sensible default. I prefer to work in the .sass syntax and since Bitters is meant to be generated then modified, it just seems logical to me to have that option.

If it's not in there yet, it would be a snap to utilize the sass-convert tool that comes with the Sass gem.

Thoughts?

Create Placeholders for Bourbon mixins

From: thoughtbot/bourbon#362

Specifically:

• clearfix
• hide-text
• ellipsis

cc/ @kaishin @hugogiraudel

use namespacing and use default variable directive.

Use the !default variable directive: http://thesassway.com/intermediate/a-standard-module-definition-for-sass#variable-definitions-should-always-be-defaulted

Also use variables with names prepended with '$bitters-' as a psuedo namespace.

This will allow easier overriding and less conflicts with other scss variables / packages.

File to import not found or unreadable: bitters.

Trying to install bitters with Rails 3.2.15, ruby 2.0.0p195.

So added gem ‘bitters’ to Gemfile and that installed 0.9.1. Also added @import "bitters”; in application.css.scss.

Same setup works just fine with bourbon and neat.

Any ideas what am I missing?

--path

I'm starting my first tiny project with the bourbon suite:tm: I noticed that there's one inconsistency in the install / update progress (when using them without Rails): Bitters is missing the --path option that the other ones have 😉 Could you maybe add that?

Small numbers with font-feature-settings

This mixin is making numbers very small (about half of the regular font size):
@include font-feature-settings("kern", "liga", "frac", "pnum");
After that I removed that line, they were looking fine again. What's the purpose of that mixin?

Bitters and neat-helpers path

This is probably a given for you experienced types, but I had issues getting rails to recognize neat-helpers path in the _bitters.scss partial. After about 20-30 minutes of messing around, I finally tried a couple things that were not documented in the install instructions:

1. Bundle install
2. Restarted my server

This seemed to have work. Hopefully for the newer rails developers like me, this will save you a little time.

Flashes Link Broken

The link to Flashes on http://bitters.bourbon.io/ is broken. Looks like it happened in when flashes.scss was moved in 2b70da8.

Not sure if this is the right spot to report an error on the bitters site, but I thought you should know :).