Menu icon Foundation
Configuring components with Foundation 5 and Compass

In Foundation 4, it was simple to choose only the components I wanted to include in my project. With Foundation 5, it's a bit confusing. For example, the type (_type.scss) component seems automatically included when deciding to include the offcanvas component. But, let's say I have my own method for controlling font size and I don't want to include Foundation's because that would be inefficient. So, how do I not include Foundation's type component at all?

Is best practice (or only option) to modify the `offcanvas` component (within the bower_components directory) and comment out `@import "type";` if I don't want Foundation's type rules?

I realize if I update Foundation, it will overwrite any files within the bower_components directory.

In my scss folder, in the app.scss file I have commented out the originally set `@import "foundation";` and then I import only the components I want to include. Is this still the correct implementation?
@import
"foundation/components/accordion",
"foundation/components/alert-boxes",
"foundation/components/block-grid",
"foundation/components/breadcrumbs",
"foundation/components/offcanvas",
"foundation/components/button-groups";
// ect.

compasscomponents@importfoundation5

In Foundation 4, it was simple to choose only the components I wanted to include in my project. With Foundation 5, it's a bit confusing. For example, the type (_type.scss) component seems automatically included when deciding to include the offcanvas component. But, let's say I have my own method for controlling font size and I don't want to include Foundation's because that would be inefficient. So, how do I not include Foundation's type component at all?

Is best practice (or only option) to modify the `offcanvas` component (within the bower_components directory) and comment out `@import "type";` if I don't want Foundation's type rules?

I realize if I update Foundation, it will overwrite any files within the bower_components directory.

In my scss folder, in the app.scss file I have commented out the originally set `@import "foundation";` and then I import only the components I want to include. Is this still the correct implementation?
@import
"foundation/components/accordion",
"foundation/components/alert-boxes",
"foundation/components/block-grid",
"foundation/components/breadcrumbs",
"foundation/components/offcanvas",
"foundation/components/button-groups";
// ect.

matteo cavucci almost 6 years ago

For include / comment out Foundation5 components, try to edit:
/bower_components/foundation/scss/foundation.scss

There you can find all F5 components, and exclude what you want.