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.
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.
Finally, in your
Brocfile.js, you’ll want to tell Ember CLI to include
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.
And then, in your
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:
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-static-compiler. Let’s install both of those:
Now we can reference these in our
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.
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:
Restart your server, and if all has gone well, you should now find the fonts and
modernizr.js in your
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.