I'm building my first site with foundation. I installed foundation via npm. I believe it's good practice to leave the foundation styles alone and then overwrite what needs adjusting. The foundation styles would be included during the sass compile job (using gulp or whatever) as an external include. Is that the correct way?
The standard foundation installation (for sites) comes with lots of features I might not need. I'm worried about bloated css. How would I throw them out?
So the core question is - is it ok to mess with the foundation sources?
Please don't change the core files, when you update foundation to a newer version you will lose al changes.
With sass version of foundation 6 you can choose what to output in your css. For example when using the foundation cli you have a app.scss file where they include all features. You can simply comment the features out you don't need in your project.
When you comment a feature out, you can still include styles with scss mixings.
App.scss
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-meter-element;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-flex-classes;
@include motion-ui-transitions;
@include motion-ui-animations;