🎨 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