How to Use the Stately WebFont in a Rails Application
A few weeks ago, Ben Markowitz, a UX designer at Intridea, released an open source web font called Stately. Stately allows designers to make simple, great-looking U.S. map visualizations using only HTML and CSS. For example:
Using Stately in a Rails application is pretty straightforward, but it does require a little configuration to get it to work with the Rails asset pipeline.
Install Stately in Your Rails Application
First, download Stately from Github. The package includes several files, but the ones to focus on for Rails installation are in two directories:
stately-master/assets/font
directory containing four web font filesstately-master/assets/sass
directory containing four SASS files that handle the basic Stately CSS configuration, and allow you to customize the styles (i.e. assigning different colors to specific states).
Copy the .scss files from the stately-master/assets/sass
directory into the vendor/assets/stylesheets
directory of your Rails application.
Next, create a new directory in the vendor/assets folder to store your fonts, such as vendor/assets/fonts
. Copy the four font files from stately-master/assets/font
into this new fonts direcetory.
Configure the Rails Asset Pipeline to Recognize Stately
In Rails 3.1+, the asset pipeline helps streamline the inclusion of stylesheets, javascript, images and other assets (like fonts!) for use in your application. Rails manages the inclusion of these assets using manifest files, like the one included in app/assets/stylesheets/application.css
. You need to edit this manifest to include Stately:
1 2 3 4 5 6 |
|
This will tell Rails to load the stately.scss
file in your vendor directory, which in turn loads Stately’s _setup.scss
and _customizations.scss
stylesheets, giving you access to the Stately CSS classes described in the documentation.
However, the default @font-face
settings in Stately’s _setup.scss
file don’t work with the Rails pipeline, because the paths it uses to load the fonts will no longer be correct. In fact, the asset pipeline makes the paths simpler. Edit Stately’s _setup.scss
stylesheet so that its @font-face
src:
commands refer directly to the font file names, removing the relative path information:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
And that’s it! Now you should be able to use Stately by using the markup as shown in the example documentation. For example, to diplay an image of the nation’s best state, you would write the following HTML:
1 2 3 |
|
What cool stuff have you built with Stately? Leave a link in the comments!
Charles Worthington (@cew821) is a freelance product designer living in Washington, DC. He would love to hear from you!