🎨 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

ja.do Color Theme
Maare Color Theme
Bloody Color Theme

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