Skip to content
This repository has been archived by the owner on Sep 16, 2024. It is now read-only.
/ bourbon.io Public archive

This is the source code for the Bourbon website

License

Notifications You must be signed in to change notification settings

thoughtbot/bourbon.io

Repository files navigation

The Bourbon website code is deprecated as of September 16, 2024

This project and the Bourbon Sass library source code here are no longer maintained. We encourage people to leverage the modern native CSS features in lieu of this library. You can refer to our blog post on how to go about replacing or rethinking each helper.

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

Releases

No releases published

Sponsor this project

 

Packages

No packages published