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:

I enabled less by npm install --save-dev grunt-contrib-less based on the info here.
I installed all the bootstrap crap under vendor/bootstrap by doing bower install --save bootstrap
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
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. :)

Did you link to the bootstrap.css in vendor directory in your html? — elrick
If I absolutely, positively had to have this working right now I could of course just copy paste the code out of vendor and into app.css...But I'm trying to do everything the way it was 'meant' to be done by EAK, using grunt and having everything located in its expected directory. Thanks for the thought anyways! — Savanaly
I think what @elrick means is that the stylesheet links in index.html within the <!-- build:css tags are combined.. So you need a stylesheet link to the bootstrap css alongside the link to app.css.... You will need to do the same with the bootstrap js file... including it into index.html.... These will be combined when the app is built — ianpetzer

medokin medokin · Accepted Answer · 2014-04-16T08:55:55

Here is my way to do this:

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

Now to include fonts:

Copy fonts from vendor/bootstrap/dist/fonts to public/assets
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
                 ]));

Including bootstrap styling to Ember App Kit

1 Answers