Sources & Maintenance
Web Sources
Radix Theme & Setup
| Topic |
Source |
URL |
Last Verified |
| Radix Project |
Drupal.org |
https://www.drupal.org/project/radix |
2026-02-12 |
| Radix Documentation |
TryDrupal |
https://docs.trydrupal.com/radix |
2026-02-12 |
| Radix Components Deep Dive |
TryDrupal |
https://docs.trydrupal.com/radix/working-with-the-components/components-a-deep-dive |
2026-02-12 |
| Getting Started with Radix |
WebWash |
https://www.webwash.net/getting-started-with-radix-bootstrap-in-drupal/ |
2026-02-12 |
| Using Radix as Base Theme |
Oakleys |
https://www.oakleys.org.uk/blog/2025/03/using_radix_drupal_base_theme |
2026-02-12 |
| Choosing Bootstrap Base Theme |
DrupalEasy |
https://www.drupaleasy.com/blogs/ultimike/2025/05/choosing-right-modern-drupal-bootstrap-base-theme |
2026-02-12 |
| Building Drupal Themes with Radix |
VOSIX |
https://vosix.com.br/en/blog/2025-05/how-build-modern-drupal-themes-radix-and-bootstrap-5 |
2026-02-12 |
| Radix Best Practices Issue |
Drupal.org |
https://www.drupal.org/project/radix/issues/3299667 |
2026-02-12 |
| Radix SCSS Best Practices Issue |
Drupal.org |
https://www.drupal.org/project/radix/issues/3096232 |
2026-02-12 |
Single Directory Components (SDC)
| Topic |
Source |
URL |
Last Verified |
| Drupal SDC Documentation |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components |
2026-02-12 |
| SDC Quickstart |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart |
2026-02-12 |
| SDC FAQ |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/frequently-asked-questions |
2026-02-12 |
| Props and Slots in SDC |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/what-are-props-and-slots-in-drupal-sdc-theming |
2026-02-12 |
| Anatomy of SDC |
Drupalize.me |
https://drupalize.me/tutorial/anatomy-drupal-single-directory-component-sdc |
2026-02-12 |
| Understanding Props and Slots |
Drupalize.me |
https://drupalize.me/tutorial/understanding-props-and-slots-drupal-single-directory-components |
2026-02-12 |
| SDC in Drupal Core |
Lullabot |
https://www.lullabot.com/articles/getting-single-directory-components-drupal-core |
2026-02-12 |
| Drupal SDC Advantages |
OpenSense Labs |
https://opensenselabs.com/blog/drupal-sdc |
2026-02-12 |
| Component-Based Design with SDC |
Specbee |
https://www.specbee.com/blogs/component-based-theming-with-drupal-single-directory-component |
2026-02-12 |
| SDC Component Variants (Drupal 11.2+) |
TheDropTimes |
https://www.thedroptimes.com/49944/drupal-core-single-directory-components-introduce-component-variants |
2026-02-12 |
Component-Based Theming
| Topic |
Source |
URL |
Last Verified |
| Component-Based Design Guide |
Vardot |
https://www.vardot.com/en-us/ideas/blog/component-based-design-drupal |
2026-02-12 |
| Modern Drupal Theming with SDC |
Echo Flow |
https://www.echoflow.ca/blog/modern-drupal-theming-building-sdc-tailwind-vite-storybook |
2026-02-12 |
| Component-Based Theming Resources |
GitHub |
https://github.com/aleksip/component-based-theming |
2026-02-12 |
Twig Best Practices
| Topic |
Source |
URL |
Last Verified |
| Twig Best Practices |
Drupal.org |
https://www.drupal.org/docs/theming-drupal/twig-in-drupal/twig-best-practices-preprocess-functions-and-templates |
2026-02-12 |
| Twig in Drupal |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal |
2026-02-12 |
| Working with Twig Templates |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/working-with-twig-templates |
2026-02-12 |
| Future of Drupal Theming |
Medium/WPWeb |
https://medium.com/@wpwebinfotech/the-future-of-drupal-theming-embracing-twig-and-front-end-best-practices-3877c174195e |
2026-02-12 |
| 10 Twig Tricks |
TheDropTimes |
https://www.thedroptimes.com/54430/10-twig-tricks-cleaner-component-based-drupal-theming |
2026-02-12 |
| Twig Best Practices |
Drupal Book |
https://drupalbook.org/docs/8/theming/twig/twig-best-practices-preprocess-functions-and-templates |
2026-02-12 |
Layout Builder
| Topic |
Source |
URL |
Last Verified |
| Drupal Layout Builder Overview |
Drupal.org |
https://www.drupal.org/docs/8/core/modules/layout-builder/layout-builder-overview |
2026-02-12 |
| Layout Builder Module |
Drupal.org |
https://www.drupal.org/docs/8/core/modules/layout-builder |
2026-02-12 |
| Introduction to Layout Builder |
Drupalize.me |
https://drupalize.me/tutorial/introduction-layout-builder |
2026-02-12 |
| Improving Layout Builder UX |
Specbee |
https://www.specbee.com/blogs/improving-drupals-layout-builder-experience |
2026-02-12 |
| Comprehensive Layout Builder Guide |
WPWeb Infotech |
https://wpwebinfotech.com/blog/drupal-layout-builder/ |
2026-02-12 |
| Layout Builder Best Practices |
Drupal.org |
https://www.drupal.org/docs/contributed-modules/layout-options/best-practices |
2026-02-12 |
| Topic |
Source |
URL |
Last Verified |
| Entity and Render Caching |
QED42 |
https://www.qed42.com/insights/entity-and-render-caching-for-drupal-performance |
2026-02-12 |
| Cache API |
Drupal.org |
https://www.drupal.org/docs/8/api/cache-api/cache-api |
2026-02-12 |
| Cache Contexts |
Drupal.org |
https://www.drupal.org/docs/develop/drupal-apis/cache-api/cache-contexts |
2026-02-12 |
| Cacheability of Render Arrays |
Drupal.org |
https://www.drupal.org/docs/drupal-apis/render-api/cacheability-of-render-arrays |
2026-02-12 |
| Drupal Caching Best Practices |
Droptica |
https://www.droptica.com/blog/best-practices-drupal-caching-and-how-deal-caching-issues/ |
2026-02-12 |
| Concept: Caching |
Drupalize.me |
https://drupalize.me/tutorial/concept-caching |
2026-02-12 |
Image Optimization
| Topic |
Source |
URL |
Last Verified |
| Image Optimization in Drupal |
Specbee |
https://www.specbee.com/blogs/optimize-images-in-drupal-for-core-web-vitals |
2026-02-12 |
| High-Performance Images Meta |
Drupal.org |
https://www.drupal.org/project/drupal/issues/3372932 |
2026-02-12 |
| Enhancing Media Experience |
Horizontal Digital |
https://blog.horizontaldigital.com/enhancing-drupal-media-experience-using-webp-lazy-loading-image-widget-crop-and-more |
2026-02-12 |
| Image Optimization Trends |
MoldStud |
https://moldstud.com/articles/p-future-proofing-your-drupal-site-key-image-optimization-trends-to-watch |
2026-02-12 |
| Drupal Image Optimization Guide |
TheDropTimes |
https://www.thedroptimes.com/48828/drupal-image-optimization-guide-key-modules-performance-boost |
2026-02-12 |
| Responsive Images in Drupal |
Vardot |
https://www.vardot.com/en-us/ideas/blog/how-effortlessly-manage-responsive-images-drupal-dynamic-responsive-images |
2026-02-12 |
Library Management
| Topic |
Source |
URL |
Last Verified |
| Asset Ordering and Dependencies |
Drupal.org |
https://www.drupal.org/node/3473558 |
2026-02-12 |
| Dependencies Over Weight |
Drupal.org |
https://www.drupal.org/project/drupal/issues/1945262 |
2026-02-12 |
| Adding Assets via Libraries |
Drupal.org |
https://www.drupal.org/docs/develop/theming-drupal/adding-assets-css-js-to-a-drupal-theme-via-librariesyml |
2026-02-12 |
| Mastering Libraries API |
Aten Design |
https://atendesigngroup.com/articles/mastering-drupal-8s-libraries-api |
2026-02-12 |
Bootstrap & SCSS
| Topic |
Source |
URL |
Last Verified |
| Bootstrap 5.3 Documentation |
Bootstrap |
https://getbootstrap.com/docs/5.3/ |
2026-02-12 |
| Bootstrap SASS Customization |
Bootstrap |
https://getbootstrap.com/docs/5.3/customize/sass/ |
2026-02-12 |
| Bootstrap Variables Reference |
GitHub |
https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss |
2026-02-12 |
Theme Development Best Practices
| Topic |
Source |
URL |
Last Verified |
| Theme Development Best Practices |
Drupal COE |
https://www.drupalcoe.org/best-practices/theme-development-best-practices |
2026-02-12 |
| Professional Drupal Theming Tips |
Abbacus Tech |
https://www.abbacustechnologies.com/professional-tips-from-experts-to-create-drupal-theme-from-scratch-in-2025/ |
2026-02-12 |
| Drupal Theming Do's and Don'ts |
Evolving Web |
https://evolvingweb.com/blog/drupal-theming-dos-and-donts |
2026-02-12 |
Code Sources
| Topic |
Source Location |
Description |
| Radix Base Theme |
~/workspace/contrib/web/themes/contrib/radix/ |
Radix 6.x contrib theme |
| Radix Components |
~/workspace/contrib/web/themes/contrib/radix/components/ |
Radix SDC components |
| Radix Starterkit |
~/workspace/contrib/web/themes/contrib/radix/src/kits/radix_starterkit/ |
Sub-theme template |
| Starterkit SCSS |
~/workspace/contrib/web/themes/contrib/radix/src/kits/radix_starterkit/src/scss/ |
SCSS structure |
| Bootstrap Source |
node_modules/bootstrap/scss/ |
Bootstrap 5 SCSS files |
| Component Schema |
https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json |
SDC YAML schema |
| Guide |
Location |
Relationship |
| Design System Recognition Guide |
claude_memory/guides/design_system_recognition_guide.md |
Use FIRST to identify design system layers |
| Design System Bootstrap Mapping Guide |
claude_memory/guides/design_system_bootstrap_mapping_guide.md |
Use SECOND to map tokens to Bootstrap variables |
| This Guide |
claude_memory/guides/design-system-radix-sdc-mapping.md |
Use THIRD to implement in Radix with SDCs |
Maintenance Notes
Update Triggers:
- Radix major version releases (6.x → 7.x)
- Drupal core SDC API changes
- Bootstrap major version updates (5.x → 6.x)
- Changes to Radix starterkit structure
- New Radix SDC components added
Version Dependencies:
- Radix 6.0.2 (current at guide creation)
- Drupal 10.3+ or 11+ (SDC support)
- Bootstrap 5.3.x
- Node.js-based build tools (Laravel Mix)
Guide Purpose: Comprehensive Radix/SDC implementation guide with opinionated best practices that maps design system layers (identified via Recognition Guide) to Radix sub-theme structure using Single Directory Components, building on Bootstrap foundations (mapped via Bootstrap Mapping Guide). Provides senior themer code review guidance and architectural decision frameworks.
Framework Philosophy: Work within Radix/Bootstrap architecture, reuse existing Radix components, extend when needed, override sparingly, and create new SDCs only when necessary. Prioritize systematic development workflows optimized for Claude Code. Every recommendation includes WHY to enable informed decision-making.
Key Principles:
- Workflow order: Recognition Guide → Bootstrap Mapping Guide → THIS GUIDE
- Component reuse hierarchy: Reuse Radix SDCs first, extend second, override third, create last
- Variable override location: Bootstrap variables in base/_variables.scss BEFORE Bootstrap import
- SCSS foundation: SDC SCSS files import _init.scss for Bootstrap access
- Component discovery: Sub-theme components override Radix components automatically
- Granularity: Not every div needs an SDC; Bootstrap utilities suffice for simple layouts
- Separation of concerns: Logic in preprocess, presentation in Twig
- Performance: Proper cache metadata (tags, contexts, max-age) on all render arrays
- Editorial UX: Don't sacrifice editor experience for code cleanliness
- Documentation: Rationale for all architectural and customization decisions
Senior Themer Code Review Principles:
- "That component is too granular" — Use Bootstrap classes for simple wrappers
- "Don't put that logic in Twig" — Complex operations belong in preprocess
- "You'll lose that on the next Radix update" — Override sparingly, extend when possible
- "Where are your cache tags?" — Every render array needs cache metadata
- "Why aren't you using the Radix component?" — Check catalog before creating
- "That's going to break on mobile" — Test responsive behavior, use Bootstrap grid
- "The editor won't understand this" — Provide clear labels, help text, validation
- "This loads on every page unnecessarily" — Use conditional library attachment
- "Where's the BEM?" — Namespace component CSS to prevent conflicts
- "You're hardcoding design tokens" — Use Bootstrap variables for consistency
What Experienced Themers Know:
1. Component Granularity: If it's just 1-3 Bootstrap classes, don't create an SDC
2. Override Cost: Every Radix override you create = maintenance burden you own
3. Preprocess vs Twig: If it's complex logic or data transformation, it doesn't belong in the template
4. Cache or Suffer: Missing cache metadata is the #1 cause of "Layout Builder is slow"
5. Props vs Slots: Props for configuration (validated, typed), slots for content (flexible, composable)
6. Attributes Object: Always use attributes.addClass() or lose Drupal integration
7. Library Loading: Global libraries load everywhere; component libraries load conditionally
8. Twig Debug: 50-70% slower with debug on; disable in production
9. Responsive Images: Drupal 10+ handles this; just use the field formatter
10. Editorial Experience: Clear UI with defaults and validation prevents support tickets
Common "Gotchas" Senior Themers Catch:
- Creating SDC for every element (over-componentizing)
- Editing Radix base theme files (update = lost changes)
- Importing Bootstrap before variables (variables ignored)
- Not importing _init.scss in SDC SCSS (no Bootstrap access)
- Using props for HTML content (security risk, use slots)
- No cache metadata on render arrays (performance disaster)
- Hardcoding values instead of using Bootstrap variables (inconsistency)
- Complex logic in Twig templates (unmaintainable)
- Not checking variable existence (template errors)
- Loading all libraries globally (unnecessary bloat)
- Twig debug enabled in production (massive performance hit)
- Not using responsive image formatters (mobile data waste)
- Giving editors full Layout Builder access without restrictions (chaos)
- Pre-rendering in preprocess instead of returning render arrays (breaks caching)
- Not using BEM in component CSS (global conflicts)
Version 2.0 Additions:
This major update adds opinionated best practices based on 2024-2026 research from Drupal.org, Drupalize.me, Lullabot, Specbee, and the Drupal community. Every common mistake now includes WHY it matters and what senior themers would say in code review. New sections cover component granularity, override strategy, Twig/preprocess decisions, Layout Builder UX considerations, and comprehensive performance optimization.