What is the preferred way to include twitter bootstrap in an ember app kit project?
SASS? LESS? Pure CSS?
Put the entire project source in a vendor folder?
Can I selectively import stuff, similar to rails asset pipeline?
It appears that the tool by default just concatenates, in sequential order, the files found in styles folder.
I’m using Bower and LESS. I install bootstrap with Bower, which sets it up in vendor directory. In your styles directory, import your bootstrap.less. You can see how I do it here https://github.com/taras/ember-crud-example/blob/master/app/styles/bootstrap.less
bada bing, bada boom
Btw guys if you like Ember & Bootstrap integration, then take a look at Bootstrap for Ember:
http://github.com/ember-addons/bootstrap-for-ember
Showcase: http://ember-addons.github.io/bootstrap-for-ember
Have fun
The explanation for integrating ember.addons/bootstrap-for-ember in starter kit at here is about createWithMixins. Where can I do this initial step in ember app kit?
We do it the same way as @tarasm in our EAK project.
OK dumb question. I see you have a main.less file in your styles folder that imports bootstrap.less. But how do you include main.less in the project? I am not seeing how that part works.
I am not seeing how this gets included and styles compiled by grunt.
Basically I am trying to understand how you compile everything into /assets/app.css
Maybe I am just missing something obvious.
Thanks.
@eccegordo I create a grunt task with https://github.com/sindresorhus/grunt-recess
recess: {
dist: {
options: {
compile: true
},
files: {
'dist/main.css': ['src/less/main.less']
}
}
}
awesome thanks @jasonmit
I’ve tried several ways, and I’ve finally come up with this, for what it’s worth :
Install Bootstrap with Bower
Link to bootstrap.css from the css block of your index.html :
<!-- build:css(tmp/result) assets/app.min.css -->
<link rel="stylesheet" href="/assets/app.css">
<link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -- >
Link to the js librairies in the js vendor block
<!-- @if dist=false -->
<script src="/vendor/handlebars/handlebars.js"></script>
<script src="/vendor/ember/ember.js"></script>
<script src="/vendor/bootstrap/dist/js/bootstrap.js"></script>
<!-- @endif --><!-- @if dist=true -->
<script src="/vendor/handlebars/handlebars.runtime.js"></script>
<script src="/vendor/ember/ember.prod.js"></script>
<script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- @endif -->
To use the Glyphicons, we need to copy the fonts :
// tasks/options/copy.js
javascriptToTmp: {
// snip
},
extrasToResult: {
expand: true,
cwd: 'vendor/bootstrap/dist',
src: 'fonts/*',
dest: 'tmp/result/'
},
// snip
Register it in Gruntfile.js
// Styles
grunt.registerTask('buildStyles', filterAvailable([
// snip
]));
// Extras
grunt.registerTask('buildExtras', [
'copy:extrasToResult'
]);
// snip
We can add other stuff here when needed.
Finally call the task, in the concurrent build process :
// Gruntfile.js
// Parallelize most of the build process
_.merge(config, {
concurrent: {
buildDist: [
"buildTemplates:dist",
"buildScripts",
"buildStyles",
"buildExtras",
"buildIndexHTML:dist"
],
buildDebug: [
"buildTemplates:debug",
"buildScripts",
"buildStyles",
"buildExtras",
"buildIndexHTML:debug"
]
}
});
Hope it helps.
With the new layout of Ember App Kit, I have no idea where I should put the <script> to include ember-addons.bootstrap-for-ember.
If I include in the usemin build block, it won’t work, as explained here https://github.com/ember-addons/bootstrap-for-ember/issues/38
Well it works in dev (grunt server) but not in prod (grunt server:dist)
If I include it outside the usemin build blocks, the server won’t serve the actual file (it outputs the content of index.html :-/)
Could someone point a recommended way ?
@codeofficer gave me the answer on https://github.com/ember-addons/bootstrap-for-ember/issues/38
<!-- @if dist=false -->
<script src="/vendor/handlebars/handlebars.js"></script>
<script src="/vendor/ember/ember.js"></script>
<script src="/vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-core.max.js"></script>
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-<component>.max.js"></script>
<!-- @endif --><!-- @if dist=true -->
<script src="/vendor/handlebars/handlebars.js"></script>
<script src="/vendor/ember/ember.prod.js"></script>
<script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-core.min.js"></script>
<script src="/vendor/ember-addons.bs_for_ember/dist/js/bs-<component>.min.js"></script>
<!-- @endif -->
Note that we call handlebars.js instead of handlebars.runtime.js as it is not compatible with Bootstrap For Ember.
As I understand it, LESS support should work out of the box if I install grunt-recess, which I think is supposed to convert all LESS files in the styles directory without any additional configuration. Why does this task need to be included if there is already one? (btw, it’s not working for me, so I don’t actually know what I’m talking about – I’m trying to get Bootstrap to compile with LESS so I can customize it + use the EAK build process + use Bootstrap for Ember)
I’m not sure what your question is since I need more to go on rather than saying it doesn’t work. Do you receive any exceptions?
When I last tried grunt-contrib-less (what ships with EAK) it was not compatible with Bootstrap’s 3 LESS (I forget the exact issue). I believe that has since changed and you can most likely use grunt-less now since BS3.1 documentation no longer references recess.
bootstrap 3.1 does indeed use contrib-less and not recess.
Sorry, you’re right. My question is the same as @eccegordo originally asked. I’m creating a bootstrap.less file in the styles folder (copied from the project that @tarasm posted) that is importing .less files from the vendor/bootstrap directory. But whether I try grunt-sass or grunt-contrib-sass, it’s not compiling these into dist/app.css. Per the docs, I thought this would work without me creating custom grunt tasks like you were suggesting with grunt-recess.
Also, if I do need to end up adding a custom tasks with one of these other grunt libraries, can you give more detailed instructions on how to set it up… like what directory (tasks/less.js or tasks/recess.js?) and where to reference the task in the project Gruntfile.
Just do be clear, you did run npm install --save-dev grunt-contrib-less?
The current default LESS task is something to the effect of:
module.exports = {
compile: {
files: [{
expand: true,
cwd: 'app/styles',
src: ['app.less', '!**/_*.less'],
dest: 'tmp/result/assets/',
ext: '.css'
}]
}
};
It takes app/styles/app.less and compiles it to tmp/result/assets/app.css. When you run grunt dist it will create tmp/results/assets/app.css minify then copy the result of that it to dist/assets/app.min.css.