Recommended way of customizing Foundation SCSS

[tuscland]

Hello,

This is a nice project generator, thank you!

I am trying to customize Foundation's base SCSS variable, but I am worried to edit the source files in bower_components. Shouldn't I be able to have my own customizations somewhere outside bower_components? What would be the recommended way to go?

Cam

[niallobrien]

Hi @tuscland - I haven't enforced a directory structure with regards to customising as there would be no way to keep everyone happy. Personally, I'd follow BEM/OOCSS principles and create a directory structure to suit your project following those principles.

Generally, you will want to do your custom over-rides after importing Foundation, see https://github.com/niallobrien/generator-gulp-foundation/blob/master/app/templates/main.scss

So in your main.scss file, you could import custom/_variables.scss which contains the Foundation variables you wish to over-ride. A nice way of starting is to copy the contents of the Foundation variables file into your own custom file, import that after Foundation and comment out / delete the stuff you don't need within the file. I hope this makes sense?

[videoMonkey]

👍 I agree with your rational for not making it part of the generator and your instructions make sense, I wanted to be able to import only the modules I needed and configure variables to my liking and this is what my main.scss looks like:

// bower:scss

@import
  "settings",
  "../bower_components/foundation/scss/foundation/components/grid",
  // "../bower_components/foundation/scss/foundation/components/accordion",
  // "../bower_components/foundation/scss/foundation/components/alert-boxes",
  "../bower_components/foundation/scss/foundation/components/block-grid",
  // "../bower_components/foundation/scss/foundation/components/breadcrumbs",
  // "../bower_components/foundation/scss/foundation/components/button-groups",
  "../bower_components/foundation/scss/foundation/components/buttons",
  "../bower_components/foundation/scss/foundation/components/clearing",
  // "../bower_components/foundation/scss/foundation/components/dropdown",
  "../bower_components/foundation/scss/foundation/components/dropdown-buttons",
  "../bower_components/foundation/scss/foundation/components/flex-video",
  "../bower_components/foundation/scss/foundation/components/forms",
  // "../bower_components/foundation/scss/foundation/components/inline-lists",
  // "../bower_components/foundation/scss/foundation/components/joyride",
  // "../bower_components/foundation/scss/foundation/components/keystrokes",
  // "../bower_components/foundation/scss/foundation/components/labels",
  // "../bower_components/foundation/scss/foundation/components/magellan",
  // "../bower_components/foundation/scss/foundation/components/orbit",
  // "../bower_components/foundation/scss/foundation/components/pagination",
  "../bower_components/foundation/scss/foundation/components/panels",
  // "../bower_components/foundation/scss/foundation/components/pricing-tables",
  // "../bower_components/foundation/scss/foundation/components/progress-bars",
  // "../bower_components/foundation/scss/foundation/components/range-slider",
  // "../bower_components/foundation/scss/foundation/components/reveal",
  // "../bower_components/foundation/scss/foundation/components/side-nav",
  // "../bower_components/foundation/scss/foundation/components/split-buttons",
  // "../bower_components/foundation/scss/foundation/components/sub-nav",
  "../bower_components/foundation/scss/foundation/components/switch",
  "../bower_components/foundation/scss/foundation/components/tables",
  // "../bower_components/foundation/scss/foundation/components/tabs",
  "../bower_components/foundation/scss/foundation/components/thumbs",
  // "../bower_components/foundation/scss/foundation/components/tooltips",
  "../bower_components/foundation/scss/foundation/components/top-bar",
  "../bower_components/foundation/scss/foundation/components/type",
  // "../bower_components/foundation/scss/foundation/components/offcanvas",
  "../bower_components/foundation/scss/foundation/components/visibility";
// endbower

// site styles

[videoMonkey]

one should also then remove foundation.css from the <!-- build:css styles/vendor.css --> block, you don't need it twice.