Adding Bourbon Bitters

I recently added a portfolio page to my personal site and used the opportunity to try out Bitters, built to be used with the fantastic Bourbon library for Sass mixins.

Your New Base

If you’re already using partials when writing stylesheets, Bitters just takes your style modularization one step further. _base.scss is broken down into a set of imports for your typography, forms, lists, etc. and all variables are set in _variables.scss, providing a single stop for any tweaks or changes you want to make to any global styles. Here’s your base file:

// Variables
@import "variables";
    
// Extends
@import "extends/button";
@import "extends/clearfix";
@import "extends/errors";
@import "extends/flashes";
@import "extends/hide-text";
    
// Typography and Elements
@import "typography";
@import "forms";
@import "tables";
@import "lists";
@import "buttons";

Working With Global Variables

Here are some variables from my project:

// Typography
$sans-serif: $helvetica;
$serif: $georgia;
$base-font-family: 'Source Sans', $sans-serif;
$header-font-family: 'Gentium Book Basic', $base-font-family;
        
// Font Sizes
$base-font-size: 18px;
$h1-font-size-large: $base-font-size * 3;
$h1-font-size: $base-font-size * 2.5;
$h2-font-size: $base-font-size * 2;
$h3-font-size: $base-font-size * 1.75;
$h4-font-size: $base-font-size * 1.5;
$h5-font-size: $base-font-size * 1.25;
$h6-font-size: $base-font-size;
$time-font-size: 18px;
        
// Font Weights
$header-font-weight: 400;
$time-font-weight: 600;

These are mostly stock variables, though I did go with pixels for the $base-font-size instead of em because I didn’t want the styles to be dependent on browser defaults. I also added font weight variables. And this is one of the awesome things about Bitters: it’s really just a starting point for structuring your projects. You are actually encouraged to modify Bitters to your heart’s content.

Then all those variables plug into your partials imported by _base.scss. For example, the beginning of _typography.scss looks like this:

body {
  -webkit-font-smoothing: antialiased;
  background-color: $base-background-color;
  color: $base-font-color;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: $base-line-height;
}
h1,h2,h3,h4,h5,h6 {
  font-family: $header-font-family;
  font-weight: $header-font-weight;
  line-height: $header-line-height;
  margin: 0;
  text-rendering: optimizeLegibility;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
  @include transition(color 0.1s linear);
  color: $header-link-color;
  text-decoration: none;
  &:hover {
    color: $header-hover-link-color;
  }
  &:active, &:focus {
    color: $header-hover-link-color;
    outline: none;
  } 
}

Again, this is mostly stock, but I did add in header properties to receive $header-font-weight from the variable sheet.

Finally

Bitters provides simple scaffolding to set up new projects quickly, but I also found it simple to bring into an existing project. If you do happen to implement it for an already-started project, it takes little time to consolidate all your scattered styles and place them in _variables.scss. I pretty much can’t wait to make changes to my typography. It’s going to be so breezy.



comments powered by Disqus