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.
We recomend using bower for frontend package management. First, create a bower.json
in your project root directory if you dont have one yet:
{
"name": "your-project-name",
"private": true
}
Optionally specify a .bowerrc
config file to control the directory where the assets get pulled into:
{
"directory": "vendor/assets/bower_components"
}
Then, to install the latest version of Fabric, run:
$ bower install --save git@github.com:wealthsimple/fabric.git
To update the package once installed:
$ bower update wealthsimple-fabric
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
@import "wealthsimple-fabric/scss/fabric";
// Example: Individual files
@import "wealthsimple-fabric/scss/variables";
@import "wealthsimple-fabric/scss/mixins";
@import "wealthsimple-fabric/scss/base";
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 url
with font-url
.
@font-face {
font-family: 'FuturaBT-Light';
src: url('/fonts/FuturaBT-Light.eot');
src: url('/fonts/FuturaBT-Light.eot?#iefix') format('embedded-opentype'),
url('/fonts/FuturaBT-Light.woff2') format('woff2'),
url('/fonts/FuturaBT-Light.woff') format('woff'),
url('/fonts/FuturaBT-Light.ttf') format('truetype');
}
@font-face {
font-family: 'FuturaBT-Book';
src: url('/fonts/FuturaBT-Book.eot');
src: url('/fonts/FuturaBT-Book.eot?#iefix') format('embedded-opentype'),
url('/fonts/FuturaBT-Book.woff2') format('woff2'),
url('/fonts/FuturaBT-Book.woff') format('woff'),
url('/fonts/FuturaBT-Book.ttf') format('truetype');
}
@font-face {
font-family: 'FuturaBT-Heavy';
src: url('/fonts/FuturaBT-Heavy.eot');
src: url('/fonts/FuturaBT-Heavy.eot?#iefix') format('embedded-opentype'),
url('/fonts/FuturaBT-Heavy.woff2') format('woff2'),
url('/fonts/FuturaBT-Heavy.woff') format('woff'),
url('/fonts/FuturaBT-Heavy.ttf') format('truetype');
}
@font-face {
font-family: 'CaslonGraD';
src: url('/fonts/CaslonGraD.eot');
src: url('/fonts/CaslonGraD.eot?#iefix') format('embedded-opentype'),
url('/fonts/CaslonGraD.woff2') format('woff2'),
url('/fonts/CaslonGraD.woff') format('woff'),
url('/fonts/CaslonGraD.ttf') format('truetype');
}
@font-face {
font-family: "SSSocialCircle";
src: url('/fonts/SSSocialCircle.eot');
src: url('/fonts/SSSocialCircle.eot?#iefix') format('embedded-opentype'),
url('/fonts/SSSocialCircle.woff') format('woff'),
url('/fonts/SSSocialCircle.ttf') format('truetype');
}
- 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 install
npm install
sudo npm 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 grunt
and jekyll
binaries.
- Make sure dependencies are installed as described in "First-time setup"
- Run
grunt watch
to have the CSS recompiled when any file inscss
is changed - 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:
$ grunt
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.