Добавяне на персонализирани стилове към фондацията - css, npm, zurb-foundation-6

Аз изграждам първия си сайт с основа. Аз инсталирах фондацията през npm. Вярвам, че е добра практика да оставяте стила на фондацията сам и след това да презапишете това, което трябва да се коригира.Фотовете на фондацията ще бъдат включени по време на съставянето на задачата (използвайки глътка или каквото и да било) като външно включване.

Стандартната инсталация на фондацията (за сайтове) е с много функции, които може да не ми трябват. Аз се тревожа за подут css. Как да ги изхвърля?

Така че основният въпрос е - дали е добре да се объркате с източниците на фондацията?

Отговори:

Моля, не променяйте основните файлове, когато актуализирате фондацията на по-нова версия, ще загубите промените.

Със Sass версия на фондация 6 можете да изберетекакво да изведете в CSS. Например, когато използвате ключа за фон, имате файл 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;

Редактиране Основни файлове е не а добра практика така че е по-добре да създадете персонализиран стилов лист и да го включите под основата CSS.