ember-cli-bootswatch

ember-cli-bootswatch

An ember-cli addon to import a Bootswatch theme or the Bootstrap theme, including the JavaScript plugins if desired. This addon is only meant to import the appropriate assets and does NOT contain Ember Components to use within your templates. Other addons provide those features, such as ember-bootstrap or visit emberobserver.com for others.

Note, this addon scores low on Ember Observer because; it's very basic and isn't easily testable (-2 points), and it could use more contributers (-1 point). It is still maintained and works with the latest versions of ember-cli!

Compatibility

This addon has a version break for the Bootstrap version and ember-cli requirements.

Addon Version	Bootstrap Version	ember-cli Version	Node Version	Dependencies
1.x	3.x	1.13+	4.0+	Uses bower deps
2.x	4.x	2.15+ (& 3.x)	6.0+	Uses npm deps

Installation

From within your ember-cli project, run the following to install this addon:

ember install ember-cli-bootswatch

Configuration

Options for this addon are configured in the projects ember-cli-build.js file as an 'ember-cli-bootswatch' object property. Available options include:

Option	Type	Default	Description
theme	string	required	Name of the Bootswatch theme to be imported, or 'default' for the standard Bootstap theme
importCSS	boolean	true**	Import the theme's bootstrap.css file into your vendor.css file. **Automatically disabled if ember-cli-sass is detected in the app.
importSass	boolean	false**	Import the theme's *.scss files into the styles tree. **Automatically enabled if ember-cli-sass is detected in the app.
importJS	boolean or array	false	Import the bootstrap.js file (true) or specific Bootstrap plugins (array) into your vendor.js file
importPopperJS	boolean	false**	Import the Popper.js dependency into your vendor.js file. **Automatically enabled if importJS = true or importJS = [] with a plugin that needs Popper.js.

The only required option is the theme. If you do not need to adjust any other options, you can just define a string of the theme name as the ember-cli-bootswatch option:

// ember-cli-build.js
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootswatch': 'cerulean'
  });

  // ... (documentation snipped)

  return app.toTree();
};

If multiple options need to be adjusted then you'll need to specify each option as an object property:

// ember-cli-build.js
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootswatch': {
      theme: 'cerulean',
      importJS: ['button','tooltip']
    }
  });

  // ... (documentation snipped)

  return app.toTree();
};

Usage with ember-cli-sass

Sass support has been added so that you can @import the Bootstrap/Bootswatch theme in your app.scss file with the ability to override variable defaults. Just be sure to add your variable overrides before the @import statement.

// app/styles/app.scss

$body-bg: #e9ecef;
$border-radius: .10rem;

@import "ember-cli-bootswatch/bootswatch";

When ember-cli-sass is detected, the importScss option will automatically be enabled and importCSS disabled (when not defined in your config). Additionally, if app/styles/app.scss is found, an import statement is inserted for @import "ember-cli-bootswatch/bootswatch";. If you start using Sass after installing this addon, you will need to add the import statement to your app.scss file manually.

If you plan on using the 'default' Bootstrap theme, replace the import statement from @import "ember-cli-bootswatch/bootswatch"; to @import "ember-cli-bootswatch/bootstrap";. When using the Bootstrap theme, the nested imported files are different.

// app/styles/app.scss
@import "ember-cli-bootswatch/bootswatch"; // for any bootswatch theme
@import "ember-cli-bootswatch/bootstrap"; // for the "default" bootstrap theme

Alternately, you can import Sass files directly from Bootstrap/Bootswatch yourself. An example would be to use an existing variable to override another variable (ex: below). All Bootstrap *.scss files are available from ember-cli-bootswatch/bootstrap/* and the selected Bootswatch theme is available from ember-cli-bootswatch/bootswatch/*. Note, all other Bootswatch themes are not imported into the styles tree, just the selected theme.

// app/styles/app.scss
@import "ember-cli-bootswatch/bootswatch/variables";

$body-bg: $gray-200; // where $gray-200 is from above variables import
$border-radius: .10rem;

@import "ember-cli-bootswatch/bootstrap/bootstrap";
@import "ember-cli-bootswatch/bootswatch/bootswatch";

To strictly disable Sass support (even if you have ember-cli-sass installed), define the importCSS and importScss options in your ember-cli-build.js file. Ex:

// ember-cli-build.js
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootswatch': {
      theme: 'cerulean',
      importCSS: true,
      importScss: false
    },
    sassOptions: {
      // But you still use Sass for other things...
    }
  });

  // ... (documentation snipped)

  return app.toTree();
};

Usage with other Bootstrap addons

You can certainly use this addon to just bring in a Bootswatch theme but still use components and such from other addons. However, other Bootstrap addon's that also import a theme should be configured NOT to do so. This way files imported by ember-cli-bootswatch do not conflict with other files and versions.

For example, using this addon with ember-bootstrap:

// ember-cli-build.js
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-bootswatch': {
      theme: 'cerulean'
    },
    'ember-bootstrap': {
      importBootstrapCSS: false
    }
  });

  // ... (documentation snipped)

  return app.toTree();
};

Additionally, make sure the ember-bootstrap import statement is removed from your app.scss file:

// Remove the following line
@import "ember-bootstrap/bootstrap";