Before We Begin
Tweaking CSS/JS on the fly
Not for long term use, but when you need a quick CSS or JS fix, one option is the Extra CSS JS module.
Best to fold CSS into a proper theme when possible. This can be a quick way to make a few basic changes, for example, to set a color in the Olivero theme.
See: /admin/config/content/extra-css-js
https://www.drupal.org/project/extra_css_js
Menu System
We use SuperFish for our site menus, with a mobile breakpoint of 768px.
https://www.drupal.org/project/superfish
It's helpful to know that some Menu CSS may live outside of the Theme CSS.
Keep an eye out for CSS that is found within the Module.
Stop Choice Overload
Limit your main navigation menu to no more than six options.
Schema Really Matters
Experience tells us that enforcing a planned schema pays big dividends.
https://schema.org/ Enforcing a common schema reduces redundancy and confusion, while increasing flexibility with other systems.
"Your site schema is your site foundation, plan it well. "
Radix Sub Theme
We use the Radix theme as the base for our custom sub-theme, "Radix House".
Site theme CSS is compiled using using Node.> npm run watch
For review and ease with design prototyping, our Theme is including debugging comments into our page HTML. BEGIN OUTPUT 'themes/custom/radix_house_theme/templates/content/node.html.twig'
Gluebox_24 Subtheme
#58a03b // Green Menu Text
#c6c4d3 // Light Blue Grey Menu Text
#353442 // menu drop back
#353442 // nody 1px border
#edeae4 // page back
#ffffff // body back
#27232e // menu head back
#1f262d // logo back
