You can find the Bourbon Sass library source code here.
Get the code:
git clone https://github.com/thoughtbot/bourbon.io.git
Set up your machine:
Run the app:
bundle exec middleman
Bourbon uses SassDoc to document its source code. For this website, we use
Rake tasks to run SassDoc’s CLI, which parses documentation-specific comments
from Bourbon’s source and outputs them as versioned JSON files
bourbon_5_0_0.json). We then use a proxy in Middleman to generate
unique pages for each version.
SassDoc has only been in use since v5.0.0. The v4 release is documented via a static page, pulled from the previous website.
To generate documentation for the gem version specified in the
You can also generate documentation for the gem version from GitHub by using the
rake generate_for 5.0.0
Hosting & Deployment
The website is hosted on Netlify, and is automatically built and deployed when
changes are pushed to the
master branch. Credentials for Netlify can be found
This project uses:
- Sass, with Bourbon
- BEM-style CSS class names, with namespaces
library/: Global variables, mixins and functions; all non-rendering Sass
base/: Unclassed HTML elements (e.g.
patterns/: Abstractions, highly reusable pieces of style that are used in any number of unrelated contexts (e.g.
components/: Discrete, implementation-specific piece of UI (e.g.
utilities/: High-specificity, very explicit selectors. Overrides and helper classes (e.g.
- SCSS-Lint, with Hound (configuration)
- A variety of CSS units:
emfor typographical-related elements
remfor lengths related to components
pxfor borders, text shadows, etc.
vhfor lengths that should be relational to the viewport
emvalues) for font sizes