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/fontdirectory containing four web font files
stately-master/assets/sassdirectory 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
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
_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
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!