Bourbon Website

This is the source code for the Bourbon website. It’s built with Middleman.

You can find the Bourbon Sass library source code here.

Setup

1. Get the code:

   git clone https://github.com/thoughtbot/bourbon.io.git
   

2. Set up your machine:

   bin/setup
   

3. Run the app:

   bundle exec middleman
   

   open http://localhost:4567
   

Generate Documentation

Bourbon uses SassDoc to document its source code. For this website, we use a Rake task to run SassDoc’s CLI, which parses documentation-specific comments from Bourbon’s source and outputs them as versioned JSON files (e.g. 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 a published version of Bourbon, use the generate_docs_for task:

rake generate_docs_for 5.0.0

Hosting & Deployment

The website is hosted on Netlify, and is automatically built and deployed when changes are pushed to the main branch.

Front-end Architecture

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. a {}, input {})
  • patterns/: Abstractions, highly reusable pieces of style that are used in any number of unrelated contexts (e.g. .p-media {})
  • components/: Discrete, implementation-specific piece of UI (e.g. .c-site-nav {})
  • utilities/: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-flex {}).
• Autoprefixer
• A variety of CSS units:
  • em for typographical-related elements
  • rem for lengths related to components
  • px for borders, text shadows, etc.
  • vw/vh for lengths that should be relational to the viewport
• modular-scale() (which outputs em values) for font sizes