A simple Bower package to decentralise our styles. This will install the CSS and font files you need to get started making Pact apps/pages.

In your ember-cli project’s folder run: bower install pact-styles --save

In Brocfile.js add the following just above module.exports = app.toTree();:

app.import('bower_components/pact-styles/public/css/pact.css');

Start/restart the Ember server; e.g. ember-server

The CSS will be added to /dist/assets/vendor.css automatically

If you used ember-cli to set up the app, vendor.css is included automatically

Including fonts requires the broccoli-static-compiler: npm install --save broccoli-static-compiler

Add this import to the top of Brocfile.js, just below the EmberApp require:

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

Add the following to Brocfile.js, just above the module.exports = app.toTree() line:

var fontAssets = pickFiles('bower_components/pact-styles', {
  srcDir: '/public/fonts/',
  files: ['**/*.woff', '**/*.woff2', '**/*.eot', '**/*.ttf', '**/*.svg'],
  destDir: '/assets/fonts'
});

Change module.exports = app.toTree() to module.exports = app.toTree(fontAssets)

Start/restart the Ember server; e.g. ember-server.

The fonts will be added to /assets/fonts/ in the dist directory.

The stylesheet expects fonts to be in ./fonts, relative to the generated CSS file, so if you’re including the CSS in a different directory, make sure fontas are imported to fonts/ in the same directory as the CSS file.