SM - Styleguide

Überschriftenstile

Dies ist eine h1

Dies ist eine h2

Dies ist eine h3

Dies ist eine h4

Dies ist eine h5

Dies ist eine h6

Absatzstile

text/regular/medium Wir stellen Dinge her, die besser funktionieren und länger halten. Unsere Produkte lösen echte Probleme mit einem klaren Design und ehrlichen Materialien.

text/small/normal Wir stellen Dinge her, die besser funktionieren und länger halten. Unsere Produkte lösen echte Probleme mit einem klaren Design und ehrlichen Materialien.

Breakpoint-Regeln

Wir arbeiten Mobile First! Das Shopify Horizon Theme ist größtenteils Mobile First aufgebaut. Das bedeutet, dass du standardmäßig auf dem Mobilgerät mit dem Bauen deiner Komponenten/Sektionen beginnst. Anschließend passt du mit der Verwendung von @media(min-width....) bei Bedarf dein Styling für die größeren Bildschirme an.

Achtung! @media(max-width: 749px) verwenden wir nur für Ausnahmen: Dinge, die nur auf dem Mobilgerät anders sein müssen.
Tablet-Breakpoint: @media(min-width: 750px)
Desktop-Breakpoint: @media(min-width: 1024px)

Containerregeln

In Horizon sind die Container bereits in den Sections organisiert. Hierfür kannst du zwischen „Page“ und „Full“ wählen. Bei „Page“ wird also die richtige Breite verwendet und somit ein Container angewendet, während bei „Full“ die volle Breite genutzt wird. Sieh dir zum Beispiel die Theme-Einstellungen dieser Custom Section an ;)

Border-Radius und Abstände

Wir haben 2 Variablen, um einen border-radius oder einen spacing zu bestimmen. Dies sind:
--sm-border-radius
--spacing

Beide entsprechen 16px. Um dies richtig zu verwenden, werden wir rems in css anwenden. (Siehe Dokumentation). Es kommt darauf an, dass, wenn du einen spacing von 24px benötigst, wir von 16px aus rechnen. Also in diesem Fall ist 24px gleich 1.5rem. Das Gleiche gilt für den border-radius.

Farbvariablen

Die unten aufgeführten Farbvariablen können in der CSS verwendet werden. (Prüfen Sie vorzugsweise zuerst die Farbschemata).
Algemene kleuren
  • Background: --color-background
  • Text: --color-foreground
  • Headings: --color-foreground-heading
  • Links: --color-primary
  • Hover links: --color-primary-hover
  • Borders: --color-border
  • Shadow: --color-shadow
Primary button
  • Background: --color-primary-button-background
  • Text: --color-primary-button-text
  • Border: --color-primary-button-border
  • Hover background: --color-primary-button-hover-background
  • Hover text: --color-primary-button-hover-text
  • Hover border: --color-primary-button-hover-border
Secondary button
  • Background: --color-secondary-button-background
  • Text: --color-secondary-button-text
  • Border: --color-secondary-button-border
  • Hover background: --color-secondary-button-hover-background
  • Hover text: --color-secondary-button-hover-text
  • Hover border: --color-secondary-button-hover-border
Input velden
  • Background: --color-input-background
  • Text: --color-input-text
  • Border: --color-input-border
  • Hover background: --color-input-hover-background
Variant picker (default state)
  • Background: --color-variant-background
  • Text: --color-variant-text
  • Border: --color-variant-border
  • Hover background: --color-variant-hover-background
  • Hover text: --color-variant-hover-text
  • Hover border: --color-variant-hover-border
Variant picker (geselecteerde state)
  • Background: --color-selected-variant-background
  • Text: --color-selected-variant-text
  • Border: --color-selected-variant-border
  • Hover background: --color-selected-variant-hover-background
  • Hover text: --color-selected-variant-hover-text
  • Hover border: --color-selected-variant-hover-border

Farbschemata

Nachfolgend die am häufigsten verwendeten Farbschemata

Dies ist Schema 1

Wir machen Dinge, die besser funktionieren und länger halten. Unsere Produkte lösen echte Probleme mit einem klaren Design und ehrlichen Materialien.
Jetzt shoppen Jetzt shoppen Jetzt shoppen

Dies ist Schema 2

Wir machen Dinge, die besser funktionieren und länger halten. Unsere Produkte lösen echte Probleme mit einem klaren Design und ehrlichen Materialien.
Jetzt shoppen Jetzt shoppen Jetzt shoppen

Dateistruktur & Benennungskonventionen

Nachfolgend die wichtigsten Regeln bezüglich der Dateistruktur und der Namenskonventionen.

Der Name des Pull Requests / Branches wurde aus Linear kopiert; daran halten wir uns auch weiterhin.

Es gibt Namenskonventionen, an die wir uns für neue Snippets, Sections und Blocks halten! Sieh dir die Datei naming-conventions.md in deinem Code-Editor an.

Bist du dir unsicher, wann du eine Sektion, einen Snippet oder einen Block verwenden sollst? Sieh dir die Datei naming-conventies.md in deinem Code-Editor an :)