BOURBON, NEAT, BITTERS CHEAT SHEET

presented by TOWER › Version control with Git - made easy

GRID AND HELPFUL MIXINS BITTERS

LAYOUT BASICS AND FUNCTIONS STRUCTURE
GRID CONFIGURATION BACKGROUNDS & GRADIENTS _VARIABLES.SCSS

Configure your grid in base/_grid-settings.scss @include background(linear-

font settings
sizes, weights, line heights
$column: 40px; gradient(red, green) left
$gutter: 44px; repeat, radial-gradient(red, borders
$grid-columns: 12; orange) left repeat); margins and other spacings
$max-width: em(960);
@include background-image(url("/
images/a.png"),linear-gradient _GRID-SETTINGS.SCSS
STYLE YOUR OUTER CONTAINER(S) (white 0, yellow 50%,
transparent 50%)); grid configuration
outer-container marks the items that column & gutter sizes, max-width...
contain our columns. These items shall be
@include linear-gradient(to top, breakpoints
constrained to the grid’s max-width (amongst
#8fdce5, #3dc3d1); for media queries
other things that outer-container provides).

.element {
@include outer-container();
MEDIA QUERIES _TYPOGRAPHY.SCSS
}

@include media($breakpoint) {…} h1 - h6 a p img blockquote

MARK ROWS IN YOUR GRID

row makes sure that floats are cleared ANIMATIONS & TRANSITIONS _LISTS.SCSS
and a clean “block” display is applied.
@include animation(scale 1.0s ul ol dl li
.element { @include row(); }
ease-in, slide 2.0s ease);

@include transition(opacity 1.0s _BUTTONS.SCSS

ITEM WIDTH AND POSITION
ease-in 0s, width 2.0s ease-in 2s);
button input
.element {
@include span-columns(8);
@include shift(2);
RETINA IMAGES
_FORMS.SCSS
}
@include retina-image("../img
input label select textarea fieldset
Nested items: logo", 100px 200px);

@include shift-in-context(1 of 12);

@include span-columns(10 of 12);
CLEAR FLOATS

@include clearfix;

30-day free trial available at

Version control with Git - made easy www.git-tower.com
BOURBON, NEAT, BITTERS CHEAT SHEET
presented by TOWER › Version control with Git - made easy
PROJECT
SETUP
INSTALLING THE RUBY GEMS
Ruby is required to install the
components. Execute this in your
Command Line application:
$ sudo gem install bourbon
neat bitters
PROJECT SETUP
e In your Command Line app, change
into your project’s “scss” folder:
$ cd my-project/scss
r Add Bitters to the project:
$ bitters install
t Create a “lib” folder inside of “scss”
and change into it:
$ mkdir lib $ cd lib
u Install both Bourbon and Neat:
$ bourbon install $ neat install
IMPORTING HELP AND
COMPONENTS DOCUMENTATION
e Create your main stylesheet (e.g. OFFICIAL PROJECT WEBSITES
“styles.scss”) in the “scss” folder and
import the components there: bourbon.io
@import “lib/bourbon/bourbon”; neat.bourbon.io
@import “base/grid-settings”; bitters.bourbon.io
@import “lib/neat/neat”;
@import “base/base”;
GETTING STARTED TUTORIAL:
r In “base/_grid-settings.scss”, make
sure to have a correct import path:
git-tower.com/learn/bourbon-neat-bitters
@import “../lib/neat/neat-helpers”;
t If you want to use “normalize.css”,
add this as your first line in “styles.
scss”:
@import “lib/normalize-css/
normalize”;
u Don’t forget to start your
SASS
We make Tower
the best Git client for Mac and Windows
We help over 80,000 users in companies like Apple, Google, Amazon,
Twitter, and Facebook to easily & productively work with the Git
version control system.
Try it 30 days for free!