Install Foundation 5 in Ember-Cli

Install Foundation 5 in ember-cli

If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:

npm install --save-dev broccoli-sass

and then rename your app/styles/app.css to app/styles/app.scss.

Then you can install Foundation using Bower with:

bower install --save-dev foundation

Now, inside your app/styles/app.scss, you can import the Foundation styles with:

@import 'bower_components/foundation/scss/normalize';
@import 'bower_components/foundation/scss/foundation';

Foundation in ember cli application using ember.js 2.0

Finally able to fix it.. Thanks to "Taras Mankovski"

Here is the solution https://github.com/embersherpa/ama/issues/8

application.hbs

{{#app-canvas}}
  <h2>Welcome to Ember.js</h2>
  {{outlet}}
{{/app-canvas}}

components/app-canvas.js

import Ember from "ember";
export default Ember.Component.extend({
  didInitAttrs() {
    Ember.run.schedule("afterRender", function() {
      Ember.$(document).foundation({
        offcanvas: { close_on_click: true }
      });
    });
  },
});

ember broccoli foundation-sites

app.import('bower_components/foundation-sites/dist/foundation.min.js', {
type: 'vendor'
});

type: 'vendor' is the secret of success

path can be different, depends on foundation-sites version

I leave package.json and bower.json without any changes

Start foundation js in Ember (using ember-cli)

Maybe try this:

Stop initializing Foundation for each view. Try extending views which contain accordion to a separate object and then extend it.

App.FoundationView = Ember.View.extend({
    didInsertElement: function () {
        $(document).foundation();
    }
});

App.ViewWhichNeedFoundation = App.FoundationView.extend({
    ...
})

emberjs embercli foundation 5 scrolltop undefined on mobile responsive

Now this took awhile, but I came across a few solid posts Ember-JS-After-Render-Event, and coderwall example that outlined how to extract segments of code to be executed after the template is rendered. Taking this one step further, by luck really, I found these two threads foundation issue 1840 and foundation issue 3206 which were complaining about the abide library not loading properly. Bingo! That was the issue. Here is how I solved it.

First create a central file app/external/view-reopen.js with the following code:

export default Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    // Implement this hook in your own subclasses and run your jQuery logic there.
    // Do not add code here as this fires after EVERY didInsertElement event
  }
});

than hook that view into the application loader process in the app.js file like so:

import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import View from './external/view-reopen';

Ember.MODEL_FACTORY_INJECTIONS = true;

var App = Ember.Application.extend({
  modulePrefix: 'frontend',
  Resolver: Resolver
});

loadInitializers(App, 'frontend');

export default App;

and now for the final part, which I feel is pretty dirty. As it turns out foundation must be reinit for each view just like a traditional client server application. In order to accomplish this, I had to modify ALL of my views to fire off $(document).foundation(); with the custom afterRenderEvent event.

export default Ember.View.extend({
    layoutName: 'layouts/home',
    templateName: 'views/home/index',
    tagName: 'main',
    classNames: 'view-home-wrapper',
    //------------------------------------------------------------
    afterRenderEvent : function(){
        //------------------------------------------------------------
        $(document).foundation();
        //------------------------------------------------------------
    }
    //------------------------------------------------------------
});

While this solved the problem, there must be a better approach to this. Maybe, Maybe not.

Ember installations becomes broken after ember-cli-foundation-sass installation

I see in previous console log

Can not download file from
https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/linux-x64-node-5.1/binding.node

I have downgraded nodejs to version 0.12.8 and it works now.

Instead this error i have seen

Installing packages for tooling via npm...linux-x64-node-0.12 exists;
testing

Problem has solved. Thank you all!

How to customize Foundation scss styles within Ember-cli project

If you want to simply override colours and the like, you can assign values to the variables (they are explained in Foundation's docs) before importing the Foundation SCSS. I do that in this way:

app.sass

@import "_variables.scss";
@import "bower_components/foundation/scss/normalize";
@import "bower_components/foundation/scss/foundation";

_variables.scss

$table-bg: transparent;
$table-even-row-bg: transparent;
$table-border-style: none;
$table-head-font-color: inherit;
$table-row-font-color: inherit;
$table-head-padding: rem-calc( 5 );
$table-row-padding: rem-calc( 5 );
// etc

If you need more customisation than that you can of course define your own classes to override Foundation once that is imported. You can import its existing css (and your own) into your own definitions with the SASS mixins and import statements:

.full-row {
   @include grid-row(); // brings in a mixin
   // more styles
}

.option-panel {
  @include someclass; // brings in the styles defined for class someclass
  // etc
}

How do I add foundation with grunt to a ember.js app kit project

This is how I added foundation to my ember-app-kit project.

bower.json

{
  "name": "ember-app-kit",
  "dependencies": {
    "ember": "http://builds.emberjs.com.s3.amazonaws.com",
    "handlebars": "1.0.0",
    "jquery": "~1.9.1",
    "qunit": "~1.12.0",
    "foundation": "~4.3.2",
    "momentjs": "~2.1",
  }
}

bower install

The sass task looks like this:

module.exports = {
  compile: {
    files: {
      'tmp/public/assets/app.css': 'app/styles/app.scss'
    }
  }
};

I'm only compiling one file.

The app.scss file:

@import "foundation_config";
@import "foundation_includes";
@import "mixins/index";
@import "fonts/index";
... truncated for brevity

The _foundation_config.scss file is the foundation variables

The _foundation_includes.scss file is where I include the modules that I'm using.

@import "../../vendor/foundation/scss/normalize";
@import "../../vendor/foundation/scss/foundation/components/global";
@import "../../vendor/foundation/scss/foundation/components/grid";
@import "../../vendor/foundation/scss/foundation/components/visibility";
@import "../../vendor/foundation/scss/foundation/components/block-grid";
@import "../../vendor/foundation/scss/foundation/components/type";
@import "../../vendor/foundation/scss/foundation/components/buttons";
@import "../../vendor/foundation/scss/foundation/components/forms";
@import "../../vendor/foundation/scss/foundation/components/custom-forms";
// @import "../../vendor/foundation/scss/foundation/components/button-groups";
// @import "../../vendor/foundation/scss/foundation/components/dropdown-buttons";
// @import "../../vendor/foundation/scss/foundation/components/split-buttons";
// @import "../../vendor/foundation/scss/foundation/components/flex-video";
@import "../../vendor/foundation/scss/foundation/components/section";
@import "../../vendor/foundation/scss/foundation/components/top-bar";
... truncated for brevity 

I hope this is helpful.

Cheers
Dave

---

Related Topics