So ziemlich jedes Projekt von mir verwendet Bourbon, Neat und Normalize.css, das ist auch bei Ember CLI Projekten so.

ember new frontend-demo

Damit das ganze funktioniert brauchen wir Sass.

ember install:npm broccoli-sass

Jetzt können wir Normalize.css, Bourbon und Neat installieren. Beim installieren von Neat kann es passieren, dass man zwischen zwei Bourbon Versionen wählen muss. Wenn das passiert bourbon 3.2.1 auswählen¹.

ember install:bower normalize.css
ember install:addon ember-cli-bourbon
ember install:bower neat

Nach der Installation wird app.scss Stylesheet modifiziert und die entsprechenden Dateien importiert. Im Brocfile.js importieren wir Normalize.css damit Ember CLI es zum Vendor Stylesheet hinzufügt. Eine zusätzlich erstellte _variables.scss Datei dient zur Konfiguration von Neat.

app.import('bower_components/normalize.css/normalize.css');

@import "variables";
@import "bourbon";
@import "bower_components/neat/app/assets/stylesheets/neat";

div.container {
  @include outer-container;
}

$column: 75px;
$gutter: 30px;
$grid-columns: 12;
$max-width: 1240px;
$visual-grid: true !default;
$border-box-sizing: true !default;

Eine modifizierte application.hbs zeigt das alles funktioniert.

<div class="container">
  <h1>Hello there!</h1>
</div>