This is the source code for the Bourbon website. It’s built with Middleman.
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:
bin/setup
-
Run the app:
bundle exec middleman
open http://localhost:4567
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
The website is hosted on Netlify, and is automatically built and deployed when
changes are pushed to the main
branch.
This project uses:
- Sass, with Bourbon
- BEM-style CSS class names, with namespaces
library/
: Global variables, mixins and functions; all non-rendering Sassbase/
: 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 elementsrem
for lengths related to componentspx
for borders, text shadows, etc.vw
/vh
for lengths that should be relational to the viewport
modular-scale()
(which outputsem
values) for font sizes