ember-cli-bootstrap-sass

ember-cli-bootstrap-sass requires ember-cli version '0.0.41' or later

This is an ember-cli addon that includes styles from official Sass port of Twitter Bootstrap into your ember-cli project.

This addon utilizes the bootstrap_for_ember library, which provides a collection of Ember components based on Twitter Bootstrap V3. You can find documentation for usage here.

Installation

In the root of your ember-cli project directory, run:

npm install --save-dev ember-cli-bootstrap-sass

You should now have access to bootstrap styles and the components provided by bootstrap_for_ember. Enjoy!

Usage

Import Bootstrap styles in app/styles/app.scss

@import "bootstrap";

By default all of Bootstrap is imported.

You can also include optional bootstrap theme:

  @import "bootstrap/theme";

The full list of bootstrap variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
 
@import "bootstrap";

You can also import components explicitly. To start with a full list of modules copy bootstrap.scss file into your app/styles folder as _bootstrap-custom.scss. Then comment out components you do not want from bootstrap-custom. In the application Sass file, replace @import 'bootstrap' with:

@import 'bootstrap-custom';

Importing bootstrap_for_ember components

By default, all of the bootstrap_for_ember components will be imported into the project. You can optionally specify exactly which components should be imported into the project via the components option, which accepts an array of component names:

//your-bootstrap-app/Brocfile.js
 
/* global require, module */
 
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
var app = new EmberApp({
  'ember-cli-bootstrap-sass': {
    'components': ['bs-alert', 'bs-notifications', 'bs-nav']
  }
});
 
module.exports = app.toTree();

If you set components option to true, all of the bootstrap_for_ember components will be imported into the project (this is default settings).

You can fully exclude bootstrap_for_ember from the project by setting components option to false or []:

//your-bootstrap-app/Brocfile.js
 
/* global require, module */
 
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
var app = new EmberApp({
  'ember-cli-bootstrap-sass': {
    'components': false
  }
});
 
module.exports = app.toTree();

Importing javascript from Twitter Bootstrap

The goal of this addon is to utilize the bootstrap_for_ember library to be able to implement Twitter Bootstrap's styles and components in a more 'Embery' way. As such, the addon does not include the javascript from Twitter Bootstrap by default.

In situations where you need functionality that is not provided by bootstrap_for_ember, you can optionally import the Twitter Bootstrap javascript into your ember-cli project by setting the importBootstrapJS option to true in your Brocfile.js:

//your-bootstrap-app/Brocfile.js
 
/* global require, module */
 
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
var app = new EmberApp({
  'ember-cli-bootstrap-sass': {
    'importBootstrapJS': true
  }
});
 
module.exports = app.toTree();

This will import bootstrap.js that contains all of Bootstrap JavaScript plugins into the project, concatenated in the correct order.

You can optionally specify exactly which individual Bootstrap JavaScript plugins should be imported into the project via the importBootstrapJS option, which accepts an array of plugin names:

//your-bootstrap-app/Brocfile.js
 
/* global require, module */
 
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
var app = new EmberApp({
  'ember-cli-bootstrap-sass': {
    'importBootstrapJS': ['affix','collapse']
  }
});
 
module.exports = app.toTree();

You can check dependencies in the Bootstrap JS documentation.