Radix
Radix is a component-based theme for Drupal that provides a foundational structure for building custom themes using modern web development tools. It facilitates the creation of reusable components for a more efficient theming workflow.
Radix is the original component-based theme for Drupal. It comes with Bootstrap 5, Sass, ES6, BrowserSync, BiomeJS built-in.
Radix Documentation
Read the comprehensive documentation on Radix 6.x and learn about its ideology and structure
Which version? For Bootstrap 5 use 6.x, for Bootstrap 4, download 8.x-4.x. For Bootstrap 3. download 8.x-3.x.
Quick start for Radix 6 (Drupal 10.3+)
Note that 6.x works with Starterkit theme and Single directory components in the core, so no need to use the components module anymore:
Drupal Radix CLI
Try our new Radix CLI with features like list, add and generate new components
Getting started with Radix CLI
Radix 6 Tutorial
composer require 'drupal/radix:^6.0'
drupal/recommended-project):drush --include="web/themes/contrib/radix" radix:create SUBTHEME_NAMEdrush then SUBTHEME_NAME -y; drush config-set system.theme default SUBTHEME_NAME -y
cd /path/to/SUBTHEME_NAME
nvm use
npm install
cp .env.example .env.local
DRUPAL_BASE_URL variable in your .env.local to point to your localhost address (this file is .gitignored by default to avoid conflicts)
npm run watch
npm run production
Quick start for Radix 5
Watch A quick walkthrough of Radix:5.x, the theme structure and how to get started video you can see below:
💡▶ Watch Radix 5.x Getting Started Video
Also, you may watch:
- Getting Started with Bootstrap 5 using Radix in Drupal 10 (2023) by WebWash
- Creating a Bootstrap 5 Subtheme in Drupal using Radix video by Mark Kindred
On an already-running Drupal installation:
- Download and enable the components module, if you are on Drupal 10 make sure to use composer require
^3.0version:
composer require drupal/components
drush en components -y - Download and enable the Radix theme:
composer require drupal/radix; drush then radix - Create a sub-theme using Drush (Considering you are using
drupal/recommended-project):
drush --include="web/themes/contrib/radix" radix:create SUBTHEME_NAME - Set default theme:
drush then SUBTHEME_NAME -y; drush config-set system.theme default SUBTHEME_NAME -y - Install dependencies:
cd /path/to/SUBTHEME_NAME
and then switch to the appropriate node version using nvm:
nvm use
followed by:
npm install - Copy the proxy.example.js to proxy.js in the config directory of your subtheme:
cp config/proxy.example.js config/proxy.js - Update
proxyvariable to your localhost address inconfig/proxy.js(this file is .gitignored by default to avoid overrides) - Watch:
npm run watch
Support and Credits
- Issue queue: Create an issue in the issue queue.
- Drupal Slack Channel: Radix
- Documentation: 📚 Radix handbook
Join the Radix Slack channel
Or search for #radix on Drupal Slack.