Which responsive framework works well with ember.js

1

Hi,

I’m thinking of using ember.js with something like Zurb Foundation or Twitter Bootstrap. Are there any such frameworks which ember is known to work well with?

2

I use https://github.com/linstula/ember-cli-bootstrap 0.0.5 because higher versions don’t work on Windows. So I don’t know if I must recommend it, but it works well for me.

3

I moved from Bootstrap to Foundation and have made really good experiences. Based on that I wrote GitHub - nadavshatz/ember-cli-foundation-sass: Automatically sets up Foundation 5 SASS in your Ember CLI app.

On my next project I am playing with GitHub - zurb/foundation-apps: The first front-end framework created for developing fully responsive web apps. (just using the pure css/sass since ember is providing almost everything else anyway)

4

Are there any updates on this question? Two of the links are to deprecated projects - and the other is to a project based on Angular.

I can install Ember - happy enough with deployment etc - but not being able to use Bootstrap is a bit of a show-stopper. I can install ember-bootstrap - and a bootstrap page looks nice - but dropdown menus do not work.

5

I am planning to switch to GitHub - ef4/ember-sass-bootstrap: Use the parts of bootstrap-sass that you want, and none that you don't. . I have not tested it yet.

6

The problem is not whether the framework works with Ember, but how you hook it up. Traditionally, Bootstrap (or Foundation, or whatever framework you’re using) works on static HTML, which means that by the time the JS for the framework is loaded and executed, it has a DOM to work with. It parses that DOM (looking for something to be turned into a dropdown, for example), and then does its magic.

In Ember, you don’t have a DOM yet when they’re loaded so Bootstrap or Foundation don’t get to see any actual work for them to be done. And to solve that you need to trigger the framework to update its state when you’ve changed the DOM. A sledge-hammer approach to that would be like this (for Foundation) in app/app.js:

function _initFoundation() {
  //console.debug( "reinitialising Foundation in reopened route" );
  Ember.$(document).foundation();
}

Ember.Route.reopen({
  setupController: function( controller, model ) {
    this._super( controller, model );
    Ember.run.scheduleOnce( 'afterRender', App, _initFoundation );
  },
});

It might be possible to do it more fine-grained, but I’ve never investigated that.

7

Thanks for the reply. It helps to explain the issue more clearly.

8

Maybe I’m missing something but isn’t enough to install bootstrap through bower and import its bootstrap.min.css and bootstrap.min.js in ember-cli-build.js?

9

I’ve been working on a layout framework for Ember, very close to it landing (most the major pieces are in place): You can track the progress here: https://github.com/runspired/flexi/pull/1

1 Like