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.

Bootstrap

To get bootstrap on our site we can either user an add-on like 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.

//ember-cli-build.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();
};

SASS

For sass we will be using an ember add-on called 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.

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"}}

Layout

For the layout we will be using the boostrap Dashboard theme.

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

/*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>
      </button>
      <a class="navbar-brand" href="/">Client Manager</a>
    </div>
    <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>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

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

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.

//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.

/*app/templates/components/clients/client-list.hbs*/
<h2 class="sub-header">Client List</h2>  
<div class="table-responsive">  
  <table class="table table-striped">
    <thead>
      <tr>
        <th>First Name</th>
    <th>Last Name</th>              
      </tr>
    </thead>
    <tbody>
      {{#each model as |client|}}
        <tr class="client">
          <td>{{client.firstName}}</td>
          <td>{{client.lastName}}</td>
        </tr>
      {{/each}}
    </tbody>
  </table>
</div>  

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.

Michael Sparmo

Read more posts by this author.

Lancaster, NY

Subscribe to A developers adventures in WNY

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!