Including bootstrap styling to Ember App Kit

Question

I have worked on Ember apps before, but never with the Ember App Kit, and in fact this world of gruntfiles and bower dependencies and stuff is pretty new to me. I've created a fresh, just-unpacked ember app kit project at this repo, and been attempting to just get the styling you see in app/templates/application.hbs to work.

I thought this thread on the Ember Discourse would be super helpful, but I must be missing something fundamental because I tried for a few hours this morning to follow all that advice, and I haven't gotten it working.

A summary of the progress I made that seemed (to me) to be on the right path:

1. I enabled less by npm install --save-dev grunt-contrib-less based on the info here.
2. I installed all the bootstrap crap under vendor/bootstrap by doing bower install --save bootstrap
3. I sort of expected it to work at this point, but when I run grunt dist the bootstrap stuff is not in dist/assets/whatevercode.min.css
4. I'm going to stop listing because at this point I tried like a million things and ended up reverting most of them. They were all culled from this the thread I mentioned above, but those tactics are either out of date, or left something unsaid that I've failed to do.

This really shouldn't be that challenging, except I am missing some basic knowledge I think. This isn't an edge case certainly, I just want vanilla bootstrap in my vanilla EAK. :)

Answer 1

Here is my way to do this:

1. bower install bootstrap --save
2. npm install --save-dev grunt-contrib-less
3. Rename app/styles/app.css to app.less
4. Add @import "vendor/bootstrap/less/bootstrap.less"; to app.less
5. Add <script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script> to index.html

Now to include fonts:

1. Copy fonts from vendor/bootstrap/dist/fonts to public/assets
2. Add @icon-font-path: "assets/fronts/"; to app.less

The other way is to setup fonts, is to add a new grunt-copy task, that copies the fonts automatically into public/assets.

This is not necessary because they do not change often, but anyway:

Add this to tasks/options/copy.js:

fonts: {
  files: [{
    expand: true,
    cwd: 'vendor/bootstrap/dist/fonts',
    src: ['*'],
    dest: 'tmp/result/assets/fonts'
  }]
},

Add this new taks to buildStyles in Gruntfile.js:

grunt.registerTask('buildStyles', filterAvailable([
                 'compass:compile',
                 'sass:compile',
                 'less:compile',
                 'stylus:compile',
                 'copy:cssToResult',
                 'copy:fonts' //<- HERE
                 ]));