🎨 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
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 (enable WooCommerce support here!)
- Assets
-- variables.scss
-- typography.scss
-- wooCommerce.scss (disabled by default)
-- wooCommerceCustom.scss (your WooCommerce Styles in here!)
-- print.scss
- 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 – can be 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!