Skip to main content

Theme & Design Notes for Enterprise Drupal Websites

Style Guide Example

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 

Menu System

We use SuperFish for our site menus, with a mobile breakpoint of 768px. 
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.  

Superfish Menu Breakpoint

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.  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

Style Guide

#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

Gluebox Palette