Fabric is the CSS toolkit that powers Wealthsimple's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility. It's built with SCSS and available via Bower, so it's easy to include all or part of it within your own project.
Read the Fabric documentation to learn more.
There are two options for installing Fabric on your own project.
Option 1. Install with Bower
We recomend using bower for frontend package management. First, create a
bower.json in your project root directory if you dont have one yet:
Optionally specify a
.bowerrc config file to control the directory where the assets get pulled into:
Then, to install the latest version of Fabric, run:
$ bower install --save https://github.com/wealthsimple/fabric.git
To update the package once installed:
$ bower update wealthsimple-fabric
Option 2. Install Minified CSS
The concatenated and minified CSS is available in https://github.com/wealthsimple/fabric/blob/master/css/fabric.css
Note: this is not recommended, as you won't have access to any of the SCSS variables or mixins.
Once installed with bower, simply
@import either the master SCSS file, or the individual files as you need them.
// Example: All of Fabric;// Example: Individual files;;;
Since font installation may vary based on the asset compilation framework you're using (e.g. Sprockets for Rails, Grunt for Ghost.org), Fabric does not include
@font-face definitions. You must include these yourself.
Example below. Note: for Sprockets-based compilation, you'll want to replace
Running locally and making changes
- Grunt is used for SCSS compliation, vendor prefixing, CSS reporting, and publishing the documentation to GitHub Pages.
- The docs are written in Markdown and compiled to HTML by Jekyll, a static site generator.
To get this setup working locally, you must first have Node.JS and Ruby installed.
Next, install dependencies with the following commands:
bundle installnpm installnpm install -g grunt-cli
Then, you may have to open a new Terminal window or run
source ~/.bash_profile to have access to the new
- Make sure dependencies are installed as described in "First-time setup"
grunt watchto have the CSS recompiled when any file in
- Boot up a Jekyll server with
bundle exec jekyll server
- Open http://localhost:4000 to view the documentation locally
The public documentation is hosted on GitHub pages. To push new changes, first compile the CSS:
Commit all changes, then push the changes to
gh-pages branch with:
$ grunt publish
Changes should be live in around 30 seconds.
Boilerplate for this repository was heavily reused from GitHub's CSS toolkit.