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 beispielhaft von dem cms-styleguide angepasst werden.

Ordnerstruktur

• framework-styleguide
  • component
    • framework-pargraph
      • _default.scss
      • _layout.scss
      • framework-paragraph.hbs
      • FrameworkParagraph.php
      • framework-pargraph.config.js
• cms-styleguide
  • component
    • framework-paragraph
      • _default.scss - 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 - Um bestehende Variablen zu überschreiben

Ü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 !default;
$framework-paragraph-variant-standard-font-size: 2em !default;

shop-styleguide/.../_default.scss

Mit dieser Datei ist es möglich neue Variablen zu definieren. Diese können dann in der zugehörigen _layout.scss verwendet werden. Die neuen Variablen sollten dann mit dem neuen Kontakt versehen werden (cms-)

$cms-framework-paragraph-variant-standard-color-special: pink !default;

$cms-framework-paragraph-variant-error-color: white !default;
$cms-framework-paragraph-variant-error-background: red !default;

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/component/framework-paragraph/layout";

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

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