Skip to main content

Site Theme & Asset Design

The Radix House Pattern Library is a foundational component of our Radix House Drupal Theme, which is constructed on the principles of Atomic Design. Atomic Design is a methodology for creating design systems, characterized by its approach of breaking down interfaces into fundamental building blocks, much like atoms in the natural world. These blocks are then combined to form larger, reusable components, or "molecules," which in turn come together to form even more complex "organisms" that can be used across the website.

In the context of the Radix House Theme, the Atomic Design approach allows for a highly modular and scalable architecture. This means that the theme is made up of small, independent pieces (atoms) such as buttons, input fields, and labels. These atoms are then used to build more comprehensive components (molecules), such as form elements. These molecules are assembled into larger, more complex structures (organisms), like navigation menus or footers, which are then deployed throughout the Drupal site to ensure consistency, efficiency, and ease of use.

The Radix House Pattern Library serves as a catalog of all these atoms, molecules, and organisms, providing developers and designers with a clear and organized view of the theme's design system. This library facilitates easier maintenance, quick updates, and the development of new features or pages by reusing these established patterns, thus streamlining the design and development process and ensuring a cohesive user experience across the Radix House Drupal Theme.


Technical Explanations & Random Notes

Radix House is a NPM compiled Bootstrap sub-theme built around the Radix Theme Project. Radix was chosen for it's flexibility in creating quick sub-themes. Radix is a mature project that runs in production for many large institutions. 

Drupal 10.x now has an easy way to toggle Theme debugging, see: /admin/config/development/settings
For Drupal 9, you can set theme debugging in the settings.php, or services.yml.

Twig TweK Cheat Sheet

Menu Systems

Quality menu UX is critical to a website's reception.  When done right, navigation should be quick and effortless.
We like to deploy a combination of two important projects to achieve our UX goals.
SuperFish - Menu Navigation
StickyNav - Mobile Layout

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.  
 

Image
Superfish Menu Breakpoint

Schema 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
Note, Radix requires the Components.

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