🎨 Webdesign SCSS
Design, oh’ wait, but why is this site so ugly then?
This page is only a basic page and should rather show the possibility in the program code how slim and fast you can use this WordPress theme. That’s why we use a few quickly stirred colors and only one additional font.
We build the site with three main SCSS files. “Mobile First” – that is, first a basic design is loaded and all other designs (tablet and desktop) as “add on” via media query from a certain viewport width.
So you can comfortably separate the various viewports from each other and edit them individually, and are then rendered together into a style.css – together with the gutenberg-style.css
If you want to know more about SASS/SCSS you can do so here
We have structured the structure of the SCSS files for the starter theme as follows:
style.scss
-Gutenberg. CSS (loaded in style.scss so that only one style needs to be loaded)
-Assets
-- variables.scss
-- typography.scss
-- wooCommerce.scss (disabled by default)
-- print.scss (turned off by default)
-Viewport
-- mobile.scss
-- tabletUp.scss
-- desktopUp.scss
Assets briefly explained:
- Variables – include a few mixins and especially the colors (variables.scss)
- Typography – included the fonts and their variables as well as the separation behavior (typography.scss)
- Print – this can be enabled in style.scss and then edited (print.scss)
Viewports briefly explained:
- one for mobile devices (mobile.scss)
- one for tablets and larger (tabletUp.scss)
- one for desktop and larger (desktopUp.scss) – if enabled – this caps the fluid responsive design!
3 different color schemes created



The different basic color layouts can be easily switched on / off in the _variables.scss as a basis by commenting out the active color theme and commenting on the desired color theme