Styleguide Element überschreiben

Ein Styleguide hat die Möglichkeit Elemente anderen Styleguides zu überschreiben. Wichtig ist, dass der überschreibende Styleguide die zu überschreibenden Styleguides required.

Beispiel - framework-paragraph

Der framework-paragraph soll beisielhaft von dem cms-styleguide angepasst werden.

Ordnerstruktur

• framework-styleguide
  • element
    • framework-pargraph
      • _default.scss
      • _layout.scss
      • framework-paragraph.hbs
      • FrameworkParagraph.php
      • framework-pargraph.config.js
• shop-styleguide
  • element
    • framework-paragraph
      • _default.scss - (ersetzend) Falls eigene Variablen definiert werden sollen

      • _layout.scss - (ersetzend) Falls ein eigenes Layout für das Element definiert werden soll
      • framework-paragraph.hbs (ersetzend) Falls eigenes HTML für das Element definiert werden soll. Hinweis: Damit bekommt man Updates des Quellelements möglicherweise nicht mehr mit.
      • _overwrite.scss

Überschreibungsmöglichkeiten

shop-styleguide/.../_overwrite.scss

Mit dieser Datei ist es möglich, die Variablen aus der _default.scss des zu überschreibenden Elementes zu überschreiben. Das ist der einfachste Weg ein Element anzupassen.

$framework-paragraph-variant-standard-color: pink;
$framework-paragraph-variant-standard-font-size: 2em;

shop-styleguide/.../_default.scss

Wenn diese Datei angelegt ist, wird der Inhalt der _default.scss aus dem zu überschreibenden Element ersetzt.

Allerdings gibt es die Möglichkeit den Inhalt des zu überschreibenden Elements zu importieren und dann weiter anzupassen.

@import "../../../framework-styleguide/element/framework-paragraph/default";

$framework-paragraph-variant-standard-color-special: pink;
$framework-paragraph-variant-standard-background-error: red;

shop-styleguide/.../_layout.scss

Wenn diese Datei angelegt ist, wird die der Inhalt der _layout.scss aus dem zu überschreibenden Element ersetzt.

Allerdings gibt es die Möglichkeit den Inhalt des zu überschreibenden Elements zu importieren und dann weiter anzupassen.

@import "../../../framework-styleguide/element/framework-paragraph/layout";

// Erweitern der Standardvariante
.framework-pargraph--standard {
	color: $framework-paragraph-variant-standard-color-special;
}

// Erstellen einer eigenen Variante
.framework-paragraph--error {
	color: $framework-paragraph-variant-standard-color-error;
	background: $framework-paragraph-variant-standard-background-error;
}