Setting Up Foundation and FontAwesome with Ember-CLI

October 2, 2014 • Damien White

If you followed along with my previous posts on Ember CLI, you were able to setup Emblem and CoffeeScript as well as Sass and Compass with Ember CLI. In this post we’ll start using some styling libraries, like Zurb Foundation and Font-Awesome.

Laying the Foundation

We already have Bower and a bower.json file from Ember CLI, so adding a Bower dependency is easy.

bower install --save foundation

If you try to @import "foundation" now within your .scss file, you’d find you’d get an error. This is because Compass doesn’t know where to look for Foundation. We can remedy this with one line in our config.rb file that we set up in my Sass and Compass post.

add_import_path "vendor/foundation/scss"

Finally, in your Brocfile.js, you’ll want to tell Ember CLI to include foundation and fastclick as part of the JavaScript build.

app.import('vendor/fastclick/lib/fastclick.js')
app.import('vendor/foundation/js/foundation.js');

Restart the server, and you should now be able to use Foundation in your project. You’ll also notice FastClick and Foundation are added to your vendor.js file in the dist directory. Foundation also uses Modernizr, but that’s a special case as it needs to be in your <head>. The best way I found to pull this is the same way we will pull in Font-Awesome’s fonts, so read on.

Everything is FontAwesome!

The initial steps for getting FontAwesome working in your Compass project are the same as Foundation. Bower install and add an import path. So let’s go ahead and do that.

bower install --save fontawesome

And then, in your config.rb file…

add_import_path "vendor/fontawesome/scss"

Now over in your .scss file, you can import FontAwesome, but there’s one caveat. We need to tell FontAwesome where to find the fonts. We’re going to put them in assets/fonts. Your import should look like this:

$fa-font-path: "/assets/fonts" !default;
@import "font-awesome";

Now we need to move the fonts there on build, just like we need to move Modernizr for Foundation.

Movin’ on Up

In order to move the files, we’ll rely on two Broccoli packages, broccoli-merge-trees and broccoli-static-compiler. Let’s install both of those:

npm install --save-dev broccoli-merge-trees
npm install --save-dev broccoli-static-compiler

Now we can reference these in our Brocfile.js

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');

With these in place, let’s copy all the fonts to assets/fonts and we’ll also copy modernizr.js to the /assets directory, which is needed for Foundation.

var fontTree = pickFiles('vendor/fontawesome/fonts', {
  srcDir: '/',
  files: ['fontawesome-webfont.eot','fontawesome-webfont.ttf','fontawesome-webfont.svg','fontawesome-webfont.woff'],
  destDir: '/assets/fonts'
});

var modernizrTree = pickFiles('vendor/modernizr/', {
  srcDir: '/',
  files: ['modernizr.js'],
  destDir: '/assets'
});

The last part needed in the Brocfile.js is to tell Broccoli about our new file trees. The last line in your file should look like module.exports = app.toTree();, we’ll change this to the following:

module.exports = mergeTrees([app.toTree(), fontTree, modernizrTree]);

Restart your server, and if all has gone well, you should now find the fonts and modernizr.js in your dist/assets directory.

Styling Goodness

We now have a good base project to start our work. While you might not need a framework like Foundation, having one makes things quite a bit easier without having to create everything yourself. I chose Foundation because it lends itself nicely to custom styling, not to mention its awesome Sass support. Even if you don’t use Foundation, you probably will want to use Font-Awesome. They have so many great icons, including my favorite.

Posted in ember, javascript and tagged with ember-cli, fontawesome, foundation, javascript

Damien White

I am a software architect with over 16 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I know in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails, Ember.js, and ASP.NET MVC.

comments powered by Disqus