How to customize Foundation scss styles within ember-cli project

#1

I have an ember-cli project in which I have included the Foundation css framework. I should mention that I am completely new to using SCSS so please bear with me!

My app/styles/app.scss file looks like:

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

Now I want to override some of the styles; my question is where and how do I do this? It does not make sense to alter the code in bower_components/foundation but I am not clear on how else to do it.

What is the correct way to do this?

Many thanks,

Michael

#2

Hi Michael,

you can take a look at our code, how we are importing Foundation: https://github.com/artificialio/sane/blob/master/client/app/styles/app.scss

Basically, the minimum you should copy over into the styles folder is the settings.scss becauae there you can overwrite default values from foundation such as primary colour, font-family etc.

I also choose to include the foundation.scss itself in our styles folder so we can pick and choose which module we want to include and which not (e.g. I might not need progress bars etc)
All the rest should stay in the bower_components folder and you can just do @import 'bower_components/...'

To override further stuff, foundation provides some mixins you could use, or you can simply override the classes directly in one of your own scss files.

#3

Awesome! Thanks for this!

#4

On the subject of Foundation, has anyone had any trouble with some of their Javascript UI elements? I played with the framework awhile back and had to do this:

  didInsertElement: function() {
    this.$().foundation('topbar');
    this.$().foundation('clearing');
    this.$().foundation('reveal');
    this.$().foundation('reveal-modal');
    this.$().foundation('reveal-id');
  },
  willDestroyElement: function() {
    this.$().foundation('topbar', 'off');
    this.$().foundation('clearing', 'off');
    this.$().foundation('reveal', 'off');
    this.$().foundation('reveal-modal', 'off');
    this.$().foundation('reveal-id', 'off');
  },
});

I didnt really like having to do that so now-a-days I just play with bootstrap. Then again, this was right after Foundation 5 was releases so maybe they’ve compensated for this.

#5

I’m just started on my first Ember + Foundation app the other week, and I found a post on SO I think which said to just make an ApplicationView as the entry point to hook it up.

app/views/application.coffee:

ApplicationView = Ember.View.extend
  initFoundation: (->
    @$(document).foundation()
  ).on('didInsertElement')

Do you really have the need to continually set it up and tear it down on various elements or is registering it in one place sufficient for you? The above has been fine for me so far, but I haven’t gotten too deep into utilizing the JS parts of foundation yet.