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 - Falls Element

Überschreibungsmöglichkeiten

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.

...

Neben der Möglichkeit in einem Styleguide neue Komponenten und Elemente erstellen zu können, dürfen auch bereits bestehende Komponenten überschrieben werden. Hierbei kann eine Überschreibung nur das Layout oder auch die Vorlagendefinition betreffen. Bei der Überschreibung einer Vorlagendefinition ist zu beachten, dass damit die Komponente oder das Element in allen installierten Styleguides, auch außerhalb der Abhängigkeitskette, verändert wird. Eine Überschreibung der Vorlagendefinition sollte daher vermieden werden. In diesem Tutorial wird im custom-styleguide die Komponente framework-button überschrieben, wobei custom-styleguide selbst auf admin-styleguide basiert.

Dateistruktur

Damit eine existierende Komponente überschrieben werden kann, muss die Ordner- und Dateistruktur aus dem definierenden Styleguide nachempfunden werden. In unserem Beispiel befindet sich die Komponente framework-button im Styleguide framework-styleguide innerhalb des component-Ordners, dadurch ergibt sich in unserem Styleguide custom-styleguide die folgende Ordnerstruktur:

• custom-styleguide

  • component

    • framework-button

Die nachfolgenden Punkte beschreiben verschiedene Wege für die Überschreibung einer Komponente, welche jeweils unterschiedliche Dateien im soeben erstellten Ordner benötigen.

Variablenüberschreibung

In vielen Fällen reicht die Überschreibung der SCSS-Variablen einer bestehenden Komponente aus. Hierfür muss im zuvor erstellten Ordner die Datei _override.scss erstellt werden. Die Komponente framework-button besitzt im admin-styleguide die SCSS-Variable $admin-framework-button-height mit dem Standardwert von 35px. Wir werden diesen Standardwert nun in 64px ändern. Das Kennzeichen !default wird auch bei einer Überschreibung beibehalten, da diese Variablen ebenfalls überschrieben werden können.

/* _override.scss */
$admin-framework-button-height: 64px !default;

Layoutüberschreibung

Neben der Überschreibung von SCSS-Variablen kann auch das Layout einer Komponente überschrieben werden. Hierbei kann das Layout komplett ersetzt oder erweitert werden. Es beiden Fällen muss die Datei _layout.scss im zuvor erstellen Ordner angelegt werden.

/* _layout.scss */

/**
 * Wird das Layout nur erweitert und nicht komplett überschrieben, muss das originale Layout eingebunden werden.
 */
@import "../../../frameworkadmin-styleguide/elementcomponent/framework-paragraphbutton/layout";

// Erweitern der Standardvariante**
 * In beiden Fällen dürfen CSS-Selektoren mit Layouts geschrieben werden.
 */
.framework-pargraphbutton--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;
border-radius: 32px;

}

Vorlagenüberschreibung

Neben dem Layout kann auch die Vorlagendefinition überschrieben werden. Hierbei muss die Datei für den Handlebars-Code erstellt werden. In unserem Beispiel ist das framework-button.hbs im zuvor erstellten Ordner.

<!-- framework-button.hbs -->
{{#> framework-element this }}
    <!-- Der neue Code für "framework-button" -->
{{/framework-element}}