Hey there. I’m learning about Ember and I just found this awesome theme that I would like to use on my application. The problem is that I’m struggling to integrate it to my app. So far I have managed to get some things working with these steps:
Installed ember-cli-sass and ember-cli-bootstrap-sassy;
Added the whole theme folder to the vendor folder (to be able to reference the css and js files);
Imported css and js files on ember-cli-build.js file:
app.import(‘vendor/gentelella/build/css/custom.min.css’);
app.import(‘vendor/gentelella/build/js/custom.min.js’);
Now I’m able to use the tags defined on the Gentellela theme and that’s great. But the glyphicons, fonts, images and other scripts are not working. They are at gentellela/vendors folder and are not included by the imports that I put on ember-cli-build.js.
So I would like to know:
Is that the best approach to include a third part theme on my Ember app? If not, where I can find some guidance to include themes easier?
How to include a whole folder using the app.import on ember-cli-build.js? If I try to reference the whole folder I get the error message: “You must pass a file to app.import. For directories specify them to the constructor under the trees option.” Is that the best approach to include third part scripts on my Ember app?
The quickest way would be to use an Ember theme directly like the ones offered in emberjsthemes.com. AFAIK, If you want to use that specific theme, you will have to adapt it to Ember.
If you decide to adapt it, I would recommend you 1) find the equivalent Ember addon for each script because that will make it easier for you to use it in an Ember environment and, if you can’t find any good addon for that, 2) install that script with bower and import its js and css files in ember-cli-build instead of importing them from vendor. This should let you change versions or update scripts easily.
I have been using Gentelella for a pet project for some time and it is not as easy as install and forget but also not so complicated to use it.
If you want to use the plugins they use just install them or the ember version of them, there is no reason to import the whole 20+ plugins they integrate (4 chart libs?) just install and use what you need.
For example, I am using:
ember-cli-sass
ember-cli-chartjs
ember-cli-icheck
ember-font-awesome
ember-select-2
ember-power-select
And bootstrap-sass in bower.
The basic will configuring your sass imports:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
sassOptions: {
includePaths: [
'bower_components/bootstrap-sass/assets/stylesheets',
'bower_components/font-awesome/scss',
'bower_components/gentelella/src/scss'
]
},
Adding @import "custom"; to your app.scss under app/styles.
Then you can import the js functions you need from custom.js where you need it, importing the whole custom.js does not work out of the box as it tries to do things on load and we don’t have anything at that time.
I have made a custom component for the menu called left menu:
https://gist.github.com/frisco82/abfe59ed00c61a828d151fe39dda9d54
The template uses emblem but it is almost the same as you can see in the html.
Thank you for answering my questions. It helped a lot, I just got the theme working on my project!
For further references:
I’ve added the custom css files under the app/styles folder and then I’ve imported these files on the app.scss. For fonts I’ve installed the corresponding Ember package and I’m adding the JS files on ember-cli-build.js when I need them.
What did your final ember-cli-build file look like.
This is mine
app.import(‘bower_components/bootstrap/dist/css/bootstrap.min.css’);
app.import(‘bower_components/gentelella/build/css/custom.min.css’);
app.import(‘bower_components/jquery/dist/jquery.min.js’);
app.import(‘bower_components/bootstrap/dist/js/bootstrap.min.js’);
app.import(‘bower_components/gentelella/build/js/custom.min.js’);
But the left and top nav bar is not working (nothing happens when I click)
