🎨 Webdesign SCSS

Design, oh‘ wait, aber warum ist diese Seite dann soooo häßlich?

Diese Seite ist lediglich eine Basis-Seite und soll eher die Möglichkeit im Programmcode aufzeigen wie schlank und schnell man dieses WordPress Theme nutzen kann. Deshalb verwenden wir hier ein paar schnell zusammengerührte Farben und nur einen zusätzlichen Font.

Wir bauen die Seite mit drei Haupt-SCSS-Dateien auf. „Mobile First“ – das heisst, als erstes wird ein Basis-Design geladen und alle weiteren Designs (Tablet und Desktop) als „add on“ per Media-Query ab einer bestimmten Viewport-Breite.

So kann man angenehm die diversen Viewports voneinander trennen und einzeln bearbeiten, und werden dann zusammen gerendert in eine style.css – zusammen mit der gutenberg-style.css

Wer mehr über SASS/SCSS erfahren mag kann dies hier tun

Die Struktur der SCSS Dateien für das Starter-Theme haben wir wie folgt aufgebaut:

style.scss

- gutenberg.CSS (wird in style.scss geladen, damit nur ein Style geladen werden muss)

- Assets
-- variables.scss
-- typography.scss
-- wooCommerce.scss (standardmäßig ausgeschaltet)
-- print.scss (standardmäßig ausgeschaltet)

- Viewports
-- mobile.scss
-- tabletUp.scss
-- desktopUp.scss

Assets kurz erläutert:

• Variablen – beinhalten ein paar mixins und vor allem die Farben (variables.scss)
• Typography – beinhaltete die Fonts und deren Variablen sowie das Trennungs-Verhalten (typography.scss)
• Print – das kann in der style.scss aktiviert und dann bearbeitet werden (print.scss)

Viewports kurz erläutert:

• einer für Mobile Endgeräte (mobile.scss)
• einer für Tablets und größer (tabletUp.scss)
• einer für Desktop und größer (desktopUp.scss) – wenn dieser aktiviert wird – deckelt dieser das fluide responsive Design!

3 verschiedene Farbschemata angelegt

Die verschiedenen Grundfarb-Layouts können in der _variables.scss leicht ein und ausgeschaltet werden als Basis durch Auskommentieren des aktiven Color Theme und einkommentierten des gewünschten Color Theme