Ember.js, FontAwesome & Sass - ember.js

I have an Ember.js project where I use Fontawesome5 and Sass. Creating an icon is easy with <FaIcon #icon="..."/>. But now I want to use an icon from Fontawesome with Sass (more specifically with list-style). I guess I could use the way it is described in the fontawesome-sass-documentation, but this feels wrong in more than one way.
I tried to create a route get-icon, that I could use with list-style: url(...), but as far as I see that can't work with ember.js.
So is there a preferred way to get a fontawesome icon for list-style in an ember project?

I assume that you are using the official font awesome library for Ember.js: #fortawesome/ember-fontawesome It provides the <FaIcon> component you mentioned.
#fortawesome/ember-fontawesome does not provide integration to use the SASS styles. There is an open feature request as an issue on its GitHub repository but it hasn't received any response yet.
I assume that you are using ember-cli-sass to integrate SASS in your build process. It's the de facto standard in Ember community as fa as I'm aware.
ember-cli-sass has an includePaths option, which allows to import SASS files from other folders than app/styles. You can use this option to inlcude the required SASS files in your build and import the required SASS files in your app/styles/app.scss.
ember-cli-sass documentation includes an example how to do so for foundation CSS framework. You can use that one as a starting point.

Related

How to integrate further JS dependencies in ZURB FOUNDATION project?

I'm using the ZURB Template (ZURB foundation 6.4).
I want to use dropdown menus and the like, which require the integration of further JS dependencies.
Here is the official Documentation:
https://foundation.zurb.com/sites/docs/dropdown-menu.html
The following is important for me:
The following files must be included in your JavaScript to use this plugin:
foundation.core.js
foundation.dropdownMenu.js
With utility library foundation.util.keyboard.js
With utility library foundation.util.box.js
With utility library foundation.util.nest.js
With utility library foundation.util.touch.js
Now I dont really know where I have to do these inclusions, and how.
I already integrated a third party plugin into my project, chart.js, but this is obviously a "native" plugin by foundation and I dont know how to do this.
In which file do I have to make these additions, and with what syntax?
In the app.js, they already use a mixture of ES6 and CommonJS for getting Jquery to run, because the hoisting behavior of ES6 would cause problems.
However, this doesn't really make things easier for me and it makes me wonder even more what I have to do to set this up ^^
See https://github.com/foundation/foundation-zurb-template/blob/master/src/assets/js/app.js and the explicit-pieces file for an example.

Automatically reference bower package in ember-cli-build.js

When you add a library using bower, that is not an ember addon, you have to manually add it to the ember-cli-build.js using app.import. For eg. if I add a typical js library I have to add both the css and js files like:
app.import('../path_to/library.min.js');
app.import('../path_to/library.min.css');
Question: Is there any way to automate this process? With all these nice utilities we have for front-end development, there must surely be?
I don't know any way of automating these processes.

Writing an ember-cli addon in Coffeescript

I'm trying to author an ember-cli addon, and I prefer to develop in Coffeescript. But it seems like the CLI build is hardcoded to look for just .js files. Is there any way to author an addon in Coffeescript and have the build take place with the consuming application's build (i.e. without me having to build the addon each time using a custom build process).
Yes, you can author in Coffeescript, but there was a bug in 0.0.46 where we would only preprocess *.js files in the addon tree. This is fixed on master, and should be included in 0.0.47 soonish...
So turns out this is a bug in the CLI, but it wasn't fixed in 0.0.47. See https://github.com/stefanpenner/ember-cli/issues/2354 for more context, it's currently an open issue & PR.

How to integrate Foundation 5 in django

I'd like to starting use Foundation 5 in a django project.
My doubts are about how to setup folders of Foundation project.
Foundation now uses bower for js dipendencies.
I think it's not correct make a foundation 5 set up into the static folder of django.
Has anyone done a setup of foundation in a django project?
To compile scss files I'll use django-compressor.
My solution is use django-bower... that's all!
Check here. It should have all the instructions.
https://pypi.python.org/pypi/django-zurb-foundation
I've been playing with foundation on my django project using the django development server. All I did was download the Foundation 5 static files (JS,CSS) and add them to my django static files. Then I added in the necessary scripts to my base template as shown here: http://foundation.zurb.com/docs/css.html. I haven't put it into production yet but I don't see any reason why that wouldn't work or why using static files isn't correct (as you thought in your question).
There are benefits to compiling the CSS yourself with SASS if you're really hardcore and I imagine that using template tags with django-zurb-foundation is a little cleaner or maybe easier to implement if you have tons of templates that you would need to modify but if you're like me and you just want to try Foundation out on a small project then downloading the extra applications (django-bower, django-zurb-foundation) isn't necessary.

How to add Ember-Bootstrap to an EmberJS project created via Yeoman

I've started working on an EmberJS application and used Yeoman to generate the skeleton structure. Now, I'd like to add Ember-Bootstrap to my project but am having trouble doing so. I downloaded the latest version from GitHub and unzipped it but I'm not sure what to include.
I see several .js files in the packages/ember-bootstrap/lib folder. Do I need to include all of these? If so, then in which order should I include them?
Someone mentioned in another answer that you needed to add it to the "assets" folder but I don't have one of these.
Does installing Ember-Bootstrap require having a Rails project? I'm not familiar with Rails so please forgive for the newbie questions.
Thanks.
I found a great project that supports Bootstrap 3.0 with many components,
you can find it here:
https://github.com/ember-addons/bootstrap-for-ember
you can see all components alive:
http://ember-addons.github.io/bootstrap-for-ember
GoodLuck.