Додавання спеціальних стилів до фундаменту - css, npm, zurb-foundation-6

Я будую свій перший сайт з фундаментом. Я встановив фундамент через npm. Я вважаю, що це хороша практика, щоб залишити стилі фундамента поодинці, а потім перезаписати, що потрібно налаштовувати. Стилі фундаменту будуть включені під час роботи компіляції (використовуючи gulp або інше) як зовнішнє включення. Це правильний шлях?

Стандартна установка фундаменту (для сайтів) поставляється з великою кількістю функцій, які мені не потрібні. Я хвилююся про роздутий CSS. Як я їх викинув?

Отже, основним питанням є - чи не так, щоб зіткнутися з джерелами фонду?

Відповіді:

Будь ласка, не змінюйте основні файли, коли ви оновлюєте фундамент до нової версії, яку ви втратите під час змін.

З сассовою версією фундаменту 6 ви можете вибратищо виводити у ваш CSS. Наприклад, при використанні cli foundation у вас є файл app.scss, де вони містять усі функції. Ви можете просто прокоментувати функції, які вам не потрібні у вашому проекті.

Коли ви коментуєте функцію, ти все ще можеш включати стилі з змішуванням у форматі.

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;

Редагування Основні файли є ні a гарна практика тому краще створити власну таблицю стилів і включити її нижче основу CSS.