Seitenvergleich

...

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

Ordnerstruktur

• framework-styleguide
  • elementcomponent
    • framework-pargraph
      • _default.scss
      • _layout.scss
      • framework-paragraph.hbs
      • FrameworkParagraph.php
      • framework-pargraph.config.js
• shopcms-styleguide
  • elementcomponent
    • 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

...

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-)

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

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

shop-styleguide/.../_layout.scss

...

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

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

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