/ Ember.JS

Using Ember.js Lesson 3

Welcome to the third lesson on using EmberJS. This series builds upon the previous lesson.

In this lesson we will be adding some styling to make our site look more presentable by using Bootstrap, SASS and Font Awesome.


To get bootstrap on our site we can either user an add-on like [ember-bootstrap](https://github.com/kaliber5/ember-bootstrap) or install using bower.

For our site we will be installing with bower.

$ bower install bootstrap --save

Open ember-cli-build.js and make the following changes by adding app.import for both bootstrap.css and bootstrap.js.

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here

  app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
  app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');

  return app.toTree();


For sass we will be using an ember add-on called [ember-cli-sass](https://github.com/aexmachina/ember-cli-sass).

Let's install the add-on.

$ ember install ember-cli-sass

Last step we need to do is rename app/styles/app.css to app/styles/app.scss.

Font Awesome

We can install Font Awesome with either using bower or an ember add-on [ember-font-awesome](https://github.com/martndemus/ember-font-awesome).

We will be installing using the add-on.

$ ember install ember-font-awesome

This add-on will allow us to use a helper to declare the icon.

{{fa-icon "calendar"}}


For the layout we will be using the boostrap [Dashboard](http://getbootstrap.com/examples/dashboard/) theme.

Make the following changes to app/templates/application.hbs

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="/">Client Manager</a>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Help</a></li>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
          {{#link-to "clients"}}
            {{fa-icon "user"}} Clients
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

It does make sense to add some of these changes as a component but I will leave that up for you to do.

You might be thinking we won't be seeing anything since we are not currently connected to an API. That is where mirage
comes in handy since we can also use this in development as well.

To do this we will add a server.createList to mirage/scenarios/default.js.

export default function(server) {
  server.createList('client', 10);

This will create 10 clients to show in our client list.

Lets also make some changes to app/templates/components/clients/client-list.hbs to format our client list.

<h2 class="sub-header">Client List</h2>
<div class="table-responsive">
  <table class="table table-striped">
        <th>First Name</th>
	<th>Last Name</th>              
      {{#each model as |client|}}
        <tr class="client">

Now are front end should be looking a lot better.

Lets also run our tests to make sure they still all pass which they should.

$ ember test --server

You can view the source to the current project on GitHub.