Hinzufügen von benutzerdefinierten Stilen zu Fundament

Question

Ich baue meine erste Website mit Fundament. Ich habe die Foundation über npm installiert. Ich glaube, es ist eine gute Übung, die Grundtypen in Ruhe zu lassen und dann zu überschreiben, was angepasst werden muss. Die Fundamentstile würden während des Sass-Kompilierjobs (unter Verwendung von Schluck oder was auch immer) als externes Include enthalten sein. Ist das der richtige Weg?

Die Standardfundament-Installation (für Websites) enthält viele Funktionen, die ich möglicherweise nicht benötige. Ich mache mir Sorgen wegen aufgeblähtem CSS. Wie würde ich sie rauswerfen?

Also die Kernfrage ist - ist es in Ordnung, mit den Fundament Quellen zu versauen?

Answer 1

Bitte ändern Sie nicht die Kerndateien, wenn Sie die Foundation auf eine neuere Version aktualisieren, verlieren Sie alle Änderungen.

Mit Sass Version von Foundation 6 können Sie wählen, was in Ihrem CSS ausgegeben werden soll. Wenn Sie zum Beispiel den Foundation-CLI verwenden, haben Sie eine app.scss-Datei, in der alle Funktionen enthalten sind. Sie können die Funktionen, die Sie in Ihrem Projekt nicht benötigen, einfach kommentieren.

Wenn Sie eine Funktion kommentieren, können Sie auch Styles mit scss-Mischungen hinzufügen.

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; 

Answer 2

bearbeiten Core-Dateien sind nicht eine gute Praxis so ist es besser, ein eigenes Stylesheet zu erstellen und unter dem Fundament CSS inklusive.