What's the suggested way to add bootstrap for Ember 2.0.1

Design
1

I have no Ember experience before, and just installed Ember 2.0.1.

Now I am looking for bootstrap for Ember. I tried https://github.com/ember-addons/bootstrap-for-ember and seems it is incompatible with Ember 2, throwing exceptions like “Config is constant”

I wonder what’s the best way to use bootstrap with Ember 2.

The purpose to use bootstrap is to define UI themes easier, as I hope the stylesheets designed could apply to most of the UI components.

Is there a guide to design UI theme for Ember?

Thanks for any help.

2

http://www.emberaddons.com/?query=ember-bootstrap

3

This is what I typically do…

ember new <project name>
cd <project name>
bower install bootstrap --save
bower install fontawesome --save
npm install ember-cli-less --save-dev

In ember-cli-build.js put:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var funnel = require('ember-cli/node_modules/broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  app.import('bower_components/bootstrap/dist/js/bootstrap.js');

  var fontawesome = new funnel('bower_components/fontawesome/fonts', {
    srcDir: '/',
    destDir: 'fonts'
  });

  var bootstrap = new funnel('bower_components/bootstrap/fonts', {
    srcDir: '/',
    destDir: 'fonts'
  });

    var merged = mergeTrees([app.toTree(), fontawesome, bootstrap], {
        overwrite: true
    });

    return app.toTree(merged);

};

Rename app/styles/app.css to app/styles/app.less and it that put:

@import "../../bower_components/bootstrap/less/bootstrap";
@import "../../bower_components/fontawesome/less/font-awesome";

I believe I’ve included all the steps I take. Keep in mind that Bootstrap is moving from Less to Sass for version 4.

2 Likes
4

Are the bootstrap addons no longer broken?

5

Thanks. Before reading your reply, I found MDL which is not broken for ember 2.

Did you try MDL, and compare it with bootstrap?

What’s your opinion?

7

Not sure which ones are broken. I know I’m going spend some time this weekend to get the bootstrap datepicker working again. If anyone can highlight the major ones, I can spend time helping to unblock.

8

You can always use http://www.bootstrapcdn.com/ to keep things simple, until you need to customize.

9

Hi, how do you ensure correct assets loading? I installed bootstrap-sass version. This is my app/styles/app.sass

@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "pod-styles";

ember-cli-build.js

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    sassOptions: {
      extension: 'sass'
    }
  });

  app.import('bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss');

  return app.toTree();
};

In the app/components/nav-bar/styles.sass component:

.navbar-default
  background-color: #0077b3

.navbar-link
  color: #ffffff

.navbar .active .navbar-link
  background-color: transparent
  font-weight: 700
  text-transform: uppercase

Unfortunately I have to use !important to override styles. Would like to avoid that, if possible.

10

I use the bootstrap-sass-official bower pkg. Works very well for me. Overriding the defaults can be a pain if one doesn’t use precisely the same selectors as in BS’s styles. Overriding the variables where possible will save much grief, and no more !important.

bower install --save bootstrap-sass-official

// ember-cli-build.js
// if you want the JS as well
app.import('bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js');


// app/styles/app.scss
@import "partials/variables";
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
//other @imports ...

// app/styles/partials/_variables.scss
$text-fill: #444;
$z-modal  : 10000;
// etc.

Note that i’m not importing the SCSS in build. The SASS compiler will do the right thing.

11

ember install ember-cli-bootstrap-css ember install ember-cli-bootstrap-fonts

12

I’ve been using GitHub - lifegadget/ember-cli-bootstrap-sassy: a fork of ember-cli-bootstrap-sass but without any dependencies on the now defunct bootstrap_for_ember with relative success. It makes specifying which js and scss imports you’d like pretty straight forward.

1 Like