Menu icon Foundation
Trouble Modularizing Foundation

I am looking to add the SCSS for foundation components a la carte as opposed to importing the entire framework.

I already have a setup that accomplishes much of what I need, but I want to add 5-10 Foundation components into the mix.

The problem is that the SCSS setup seems like interconnected roots / garden-hose that's quite a significant task to have the pieces necessary isolated.

What's the best way to have the HTML/Sass-scss for certain components (accordion/sticky-nav/off-canvas) isolated to add piece by piece without spending 3 days reverse engineering mixins/import files/globals/resets?

components

I am looking to add the SCSS for foundation components a la carte as opposed to importing the entire framework.

I already have a setup that accomplishes much of what I need, but I want to add 5-10 Foundation components into the mix.

The problem is that the SCSS setup seems like interconnected roots / garden-hose that's quite a significant task to have the pieces necessary isolated.

What's the best way to have the HTML/Sass-scss for certain components (accordion/sticky-nav/off-canvas) isolated to add piece by piece without spending 3 days reverse engineering mixins/import files/globals/resets?

Jason Demitri almost 5 years ago

Its actually simple for sites . . hopefully you use bower . . of so

bower install --save foundation

This will add foundation and its deps . .

Hopefully you also use grunt or similar if not do it manully

Copy all of the Js files from bower_componetnts to your js location for foundation
accordion and top-bar rely on them

Next setup however you compile you sass and add the load paths i think something like bower_components/foundation/sass/

Then to your app.scss add

@import "foundation";

and compile . . happy days . . :)

"Only want a few components ?"

. . locate foundation.scss and just comment out the ones you dont want

DONT FORGET TO ADD THE LINKS TO JQUERY FOUNDATION.MIN.JS AND MODERNIZER before the closing tag