84.155.186.35 am 15. November 2020 um 13:48 Uhr

2020-11-15T13:48:45Z

84.155.186.35: Die Seite wurde neu angelegt: „Theme Datei erstellen z.B. site.scss // 1. Your custom variables and variable overwrites. $global-link-color: #DA7D02; // 2. Im…“

2020-11-15T12:51:55Z

Die Seite wurde neu angelegt: „Theme Datei erstellen z.B. site.scss <syntaxhighlight lang="sass"> // 1. Your custom variables and variable overwrites. $global-link-color: #DA7D02; // 2. Im…“

Neue Seite

Theme Datei erstellen z.B. site.scss

<syntaxhighlight lang="sass">
// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";
</syntaxhighlight>

← Nächstältere Version		Version vom 15. November 2020, 13:48 Uhr
Zeile 15:		Zeile 15:
	@import "uikit/src/scss/uikit-theme.scss";		@import "uikit/src/scss/uikit-theme.scss";
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	https://getuikit.com/docs/sass
		+
		+	Todo
		+
		+	The compiled CSS will then have your custom value. But not only has the global link color changed. Many components make use of the @global-* variables to infer their own colors, and just adapt them slightly. That way you can rapidly create a theme by just changing some global variables.
		+
		+	== Inverse Komponenten abschalten ==
		+	Disable inverse component
		+	The Inverse component includes additional styles to implement the flexible inverse behaviour. If your project does not make use of these styles, you can leave them out when compiling Sass. This allows smaller file sizes of the compiled CSS. To do so, search for Sass variables containing color-mode (e.g. $inverse-global-color-mode), and set them to none.
		+
		+	To disable the inverse styles completely, set:
		+
		+	<syntaxhighlight lang="sass">
		+	$inverse-global-color-mode: none;
		+	You can also disable the inverse mode for specific components:
		+
		+	// Card
		+	$card-primary-color-mode: none;
		+	$card-secondary-color-mode: none;
		+
		+	// Navbar
		+	$navbar-color-mode: none;
		+
		+	// Off-canvas
		+	$offcanvas-bar-color-mode: none;
		+
		+	// Overlay
		+	$overlay-primary-color-mode: none;
		+
		+	// Section
		+	$section-primary-color-mode: none;
		+	$section-secondary-color-mode: none;
		+
		+	// Tile
		+	$tile-primary-color-mode: none;
		+	$tile-secondary-color-mode: none;
		+	</syntaxhighlight>
		+
		+	== Komplexere Konfiguration ==
		+
		+	<syntaxhighlight lang="sass">
		+	The entry point for the Sass compiler is site.scss. Here you compile all source files in the following order:
		+
		+	// site.scss
		+
		+	// 1. Your custom variables and variable overwrites.
		+	@import "theme/accordion.scss";
		+	@import "theme/alert.scss";
		+	@import "theme/align.scss";
		+	// ... import all
		+
		+	// 2. Import default variables and available mixins.
		+	@import "uikit/src/scss/variables.scss";
		+	@import "uikit/src/scss/mixins.scss";
		+
		+	// 3. Your custom mixin overwrites.
		+	@import "theme/accordion-mixins.scss";
		+	@import "theme/alert-mixins.scss";
		+	@import "theme/align-mixins.scss";
		+	// ... import all
		+
		+	// 4. Import UIkit
		+	@import "uikit/src/scss/uikit.scss";
		+
		+	</syntaxhighlight>
		+	Now you can compile site.scss and the resulting CSS will include all your customizations.
		+
		+	NOTE You can further extend this setup by replacing part "4." with single import statements from the UIkit source. You can then omit some components you do not use to produce smaller CSS. Just copy from src/scss/components/_import.scss and make sure to preserve the correct import order.

UIkit Theme mit Sass erstellen - Versionsgeschichte

84.155.186.35 am 15. November 2020 um 13:48 Uhr

84.155.186.35: Die Seite wurde neu angelegt: „Theme Datei erstellen z.B. site.scss // 1. Your custom variables and variable overwrites. $global-link-color: #DA7D02; // 2. Im…“