Awesome
<img src="https://images.thoughtbot.com/bourbon/bitters-logo-v2.svg" width="200" alt="Bitters">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
Table of Contents
Requirements
Installation
-
Install the Bitters gem using the RubyGems package manager:
gem install bitters
-
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. -
Import Bitters in your
application.css.scss
or main manifest file. All additional stylesheets should be imported below Bitters.@import "base/base";
-
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.