Video sections:
- Install Radix (01:31)
- Create sub-theme (03:30)
- Enable sub-theme (05:22)
- Compile Bootstrap (06:07)
- Fix blocks and regions (07:23)
- Using Browsersync (npm run watch) (13:00)
- Using Radix Layouts (15:49)
- Using Radix Layouts with Field Layouts (19:43)
- Using Radix Layouts with Layout Builder (23:56)
Radix is a Bootstrap 4 powered theme which is set up out-of-the-box to compile the Bootstrap library locally. It is targeted towards advance front-end developers who want total control on how Bootstrap is loaded and comes with Browsersync and Font Awesome built-in. The theme doesn’t support loading Bootstrap via a CDN out-of-the-box. I’d recommend you look at the Barrio theme if you prefer to load everything through a CDN.
Because you’re compiling Bootstrap, you get the added benefit of being able to modify the _variables.scss
which is used to customize Bootstrap and can control what SASS components get imported. By importing only what you need you can drastically reduce the size of the compiled CSS file.
The theme comes with a Drush command (Drush 8 only), drush radix "Theme name"
, which makes it easy to generate sub-themes. The sub-theme comes with a package.json
which has all the required packages.
Just run npm install
, then npm run dev
to compile Bootstrap. It uses laravel-mix to compile everything so you don’t have to spend time configuring webpack files.
In this tutorial, you’ll learn how to install Radix, create a sub-theme, how to compile everything and learn about Radix Layouts.
Barrio is another Bootstrap 4 theme for Drupal 8 which you should check out. It can be configured to load Bootstrap through a CDN.
Getting Started
Before we can begin, go download the “Component Libraries” module and the Radix theme.
Run the following Composer command:
composer require drupal/components drupal/radix
Once you’ve download both the module and theme, enable them.
Create Radix Sub-theme
Now we need to create a Radix sub-theme. Luckily for us the theme comes with a Drush command which’ll create a sub-theme, so we won’t have to manually copy and rename files or folders.
First make sure you’ve enabled the Radix theme, it doesn’t have to be set as default but it needs to be enabled.
Then run the following Drush command:
drush --include="PATH_TO_RADIX_THEME" radix:create subtheme_name
For example:
drush --include="themes/contrib/radix" radix:create radix_subtheme
Warning: You must use Drush 8, not Drush 9!
The above mentioned command (drush radix
) only works in Drush 8 not version 9. There’s currently an issue about the problem.
Drush 9 is now fully supported in Radix 8.x-4.6.
Compile Bootstrap 4 SASS in Sub-theme
Now at this point, we’re downloaded the required module and theme. We created a sub-theme, so the last thing to do is run npm install
to download all the packages we need to compile Bootstrap 4 and our SASS files.
1. Open up your Terminal and go into your sub-theme and run npm install
. You’ll need Node.js and npm installed on your machine.
cd /to/theme npm install
2. Open up webpack.mix.js in your sub-theme and change const proxy = 'http://drupal.local';
to the URL of your local site. This is for the Browsersync functionality.
3. Run npm run watch
to compile SASS. Use this command while developing because it’ll autoload the site when files change, saving you from refreshing the page.
If everything is working you should see something like this after running npm run watch
.
DONE Compiled successfully in 3869ms 10:13:40 pm Asset Size Chunks Chunk Names /js/radix_webwash.script.js 475 KiB /js/radix_webwash.script [emitted] /js/radix_webwash.script css/radix_webwash.style.css 155 KiB /js/radix_webwash.script [emitted] /js/radix_webwash.script [Browsersync] Proxying: http://d8-local:8888 [Browsersync] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.20.8:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ------------------------------------- [Browsersync] Watching files...
Open package.json
to see all the available npm run scripts:
"scripts": { "postinstall": "find node_modules/ -name '*.info' -type f -delete", "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },
The two important scripts are:
npm run watch
Use this script to automatically compile when a file is changed. This should be used locally while developing a site.
npm run production
This script should run when you’re ready to deploy to production. It’ll uglify the CSS and JavaScript file to reduce the size.
Modify SASS Files
The SASS files in your sub-theme are located in src/sass
.
The subtheme.style.scss
file is used to import all the SASS components. So if you want to remove some of Bootstrap’s components, you can do so from this file. Top tip, only import the components you actually need. This will keep your CSS files nice and lite.
The variables file located at src/sass/base/_variables.scss
is the file you’ll need if you want to change a SASS variable. These variables are used to modify all sorts of stuff, such as color, fonts, headings, navbar, etc…
Once you change a variable don’t forget to recompile everything.
Enable Sub-theme
Once you run npm install
, compiled SASS in your sub-theme, now it’s time to test the theme.
1. Go to Appearance and click on “Install and set as default” to enable the sub-theme
If you go to the homepage now, you should see a basic styled Bootstrap 4 site.
However, it doesn’t look right and that’s because the blocks are not in the right regions.
Add Blocks to the Right Region
Our current Bootstrap 4 site doesn’t look correct because we need to rearrange the blocks into the correct regions.
1. Go to Structure, “Block layout”.
2. Assign the blocks as follows:
Region: Navbar branding
- Site branding
Region: Navbar left
- Main navigation
Region: Navbar right
- User account menu
Region: Header
- Status messages
- Breadcrumbs
- Help
- Page title
- Tabs
- Primary admin actions
Region: Content
- Main page content
Region: Footer
- Footer menu
- Powered by Drupal
Now your Drupal site should look a lot nicer and the mobile navbar should work.


Radix Layouts
Radix Layouts is a companion module which you should use with the Radix theme. It ships a bunch of pre-built layouts which can be used with Display Suite, Panels/Page Manager, Field Layouts and even Layout Builder module.
You can create your own layouts if you need to but this module offers a good selection of pre-built layouts.
To begin using the module, first download it using the following command:
composer require drupal/radix_layouts
Simply downloading and installing the module won’t give you any functionality. You’ll need to a module which implements the layouts, look at the following modules:
- Display Suite
- Panels/Page Manager
- Field Layouts (core)
- Layout Builder (core)
It should work with any module that integrates with the core module “Layout Discovery”.
Use with Field Layouts
1. Enable the “Field Layouts” module.
2. Go to a “Manage display” page on a content type
3. From the “Layout settings” section, select one of the layouts from the “Select a layout” drop-down.
Use with Layout Builder
1. Enable the “Layout Builder” module.
2. Go to a “Manage display” page on a content type and check “Use Layout Builder”.
3. Then click on “Manage layout” to change the layout.
4. Click on “Add section” and select the layout from the right column.
Note: Both “Field Layouts” and “Layout Builder” are experimental in Drupal 8.6. If you’re looking for something similar to “Field Layouts”, then look at “Display Suite“.
Summary
At this point, you have a good understanding on how to install and create your own Radix sub-theme. This theme is more for advanced front-end developers. You need to be comfortable using front-end tools such as NPM, SASS and Webpack. However, this theme gives you the most flexibility compared to others because you can modify the variables.scss file.
FAQs
Q: Can’t find the radix:create
command in Drush?
First, make sure you’re using Drush 9.
Then make sure --include="themes/contrib/radix"
is correct.
Are there reasons to use the bootstrap theme in favor of the radix theme ?
Or vice versa?
I am in doubt whixh one to use.
Bootstrap theme will support bootsyrap 4 soon also.
Regads
Hans
Hi Hans,
It supports Bootstrap 4, the Bootstrap theme does not. That’s the biggest difference.
“Bootstrap theme will support bootsyrap 4 soon also.”
I don’t think it’ll support it anytime soon. From looking at this issue, https://www.drupal.org/project/bootstrap/issues/2554199, they are still waiting for other tickets.
Cheers,
Ivan
If ypu look at #86 you can see that mark changed the plan.
Several things have been moved to the wish list…
Hi Hans,
That comment doesn’t change anything. As far as I’m aware, there’s no Bootstrap 4 code in the theme at all.
You can wait for the Bootstrap theme to update to BS4, but if you need to start a project now, then Radix is a good choice.
Cheers,
Ivan
It changes everything actually. It’s not blocked on a massive re-architecture anymore.
There’s no code in 8.x-4.x because I didn’t want people to post patches (i.e. “open” the public) when it wasn’t actually ready to receive development. I’ve been working on BS4 code locally however and I believe there should be code coming to the 8.x-4.x branch by the end of this week. I suspect we’ll have a beta within a couple of weeks and likely a full release within the next month.
That’s awesome news, thanks for the update.
One big difference is the region layout.
I think radix has a filosofie on that
Sorry, not sure what you mean by “region layout”.
Are there any significant benefits to using a Bootstrap 4 based theme vs. a Bootstrap 3 based theme for folks building drupal sites?
Hi Patrick,
It really comes down to what you want to use Bootstrap 3 or Bootstrap 4.
Bootstrap 3 is better suited for older browsers, I believe.
Cheers,
Ivan
By region i meant the block regions which you can see by : Demonstrate block regions
I think Radix has the filosofie to have one big region where the placement of content is done by using the layouts.
I.e. layout builder or panels etc.
According to the maintainer/developer ( arshadcn ):
” The idea behind Radix was to have one single region that ships by default and use Panels for layouts ”
Whereas Bootstrap theme has real regions (like primary and secondary )
We added a few more regions to the Radix 4 but the main content area is still one big region. For Drupal 7, this works best with Panels and layout builder for Drupal 8.
As Ivan pointed out in the video, Radix gives you a bit more flexibility on how the Bootstrap framework is pulled in. You can modify the sass variables and recompile your CSS. The Bootstrap theme handles customization through the UI which is a good starting point and easy for new themers.
Hope this helps,
Arshad
How do handle conditional layouts in Radix 4? Like setting it up so if there’s something in the right sidebar, then the page automatically goes from 100% to a 80/20 split? I know you can customize the layout on a single node with Layout Builder, but there’s no regions defined for right/left sidebar, so how would you automate that?
Great tutorials. Thanks!
Hi Ivan. I use composer and Drush (8) no problem. How ever I am having a problem getting node.js and npm to work.
I am using ssh. Where do I install node.js ? Should it be outside the drupal directory? Any help would be much appreciated.
Adrian.
Hi Adrian,
Node needs to be installed globally. Node and NPM have nothing to do with Drupal.
Just Google “install node YOUR_OS”, i.e., “Install node ubuntu”.
Or go to https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
Cheers,
Ivan
Hi Ivan, thanks for the reply. I have node installed globally the problem is when I am using ssh to install modules etc I can’t access node, when I type node –version I the message “command not found” when I exit ssh to my local file system and type node –version in terminal I get the version of node I have installed on my machine I just can’t get it to work when I am using ssh. Any help would be much appreciated.
Adrian.
Hi Adrian,
Have you installed Node where you SSH into? You need to install it there.
Cheers,
Ivan
Hi Ivan!
I have followed your video and i have an error at the following step:
Actually i’am using a Linux Shared hosting server with cpanel.
Using Drush 8 as you suggested.
I have SSH access.
I have installed NVM (~/.nvm)
Then i have installed Node.js and npm (latest stable version)
NVM version: 0.34.0
NPM version: 6.4.1
Node version: 10.15.3
When i navigate to the /themes/custom/yourtheme folder via SSH and type in npm install it starts to install the packages then at the end i get the following error:
npm ERR! cb() never called.
I cannot move to the next step and i have no idea how to solve this.
By any chance do you have any idea what could be done in order to solve it? (i have read its a bug) Should i use older version of node.js?
Can you please point me in the right direction?
Thanks in advance!
Best regards,
Norbert
Hi Norbert,
I’ve never seen this error.
Sorry but I think you’ll have to debug it further. Instead of compiling SASS on the server, why don’t you compile it locally and store the CSS in git. It’s not ideal, but it’s a workaround.
Cheers,
Ivan
Regarding Drush 9 and creating Radix subtheme, look here:
https://www.drupal.org/project/radix/issues/2933383
Thanks.
I can see that there’s a patch now.
Instead of compiling SASS on the server, why don’t you compile it locally and store the CSS in git. It’s not ideal, but it’s a workaround.
Hi Tukt,
Yes, you can do that.
But if you have multiple people working on the project, you’ll have to deal with merge conflicts with the stored CSS file and it’s easy to commit the non-minified CSS version.
Cheers,
Ivan
How can I get the fluid-container?
Hi Chandra,
Sorry, I don’t quite understand what you’re asking for?
Do you want to change the container to container-fluid? Look in the page.html.twig to change it.
Cheers,
Ivan
Do you think this theme will go well with the paragraph modules?
Hi Kanaan,
Paragraphs is just a custom entity and field type. It has nothing to do with the theme.
No matter which theme you use you’ll still need to style the paragraph.
So to answer your question the theme doesn’t matter.
Cheers,
Ivan
I’m having trouble running the drush command to create a new sub theme due to the drupal 8/drush 9 issue. After going into several rabbit holes trying to figure that out, i gave up and decided to just copy over the files manually. However, having an issue with that as well. Not sure exactly which files I need to copy over/edit. Do you have a summary of how I can do this manually and/or know of a location i can grab these files from?
Hi Efrain,
The command doesn’t work with Drush 9 as mentioned here, https://www.webwash.net/getting-started-with-bootstrap-4-using-radix-in-drupal/#warning-you-must-use-drush-8-not-drush-9
I’ve never manually copied it so I don’t know what’s required.
You can run Drush 8 and 9 together. https://drupal.stackexchange.com/a/260638/247
Cheers,
Ivan
This now works with drush 9
https://www.drupal.org/project/radix/issues/2933383
Thanks for the link.
Hi Ivan,
Thank you for the great tutorial!
I have installed Radix in a Drupal 8 Lightning instance. The installation of the sub-theme worked great, according to https://docs.radixtheme.org/en/latest/radix-4/
Now, I would like to change the Bootswatch theme. — There is a Drush command for Drupal 7 which does not work for Drupal 8:
drush –include=”docroot/themes/contrib/radix” radix “my-theme” –bootswatch=my-bootswach-theme
The “–bootswatch” option does not exist.
Do you know how this could be accomplished in Drupal 8 with Drush 9?
Hi Ralf,
I don’t know if Bootswatch is supported in the Drupal 8 version. Best to ask in the issue queue.
Cheers,
Ivan
Really struggling with just one step.
I’ve double checked everything I can, I’m using the latest Drupal 8, have installed composer, drush and drush launcher.
I’ve installed components and Radix using composer using both the commands in your video, and also the command in your notes (php composer.phar require drush/components drush/radix)
Installed component libraries and installed Radix from the Drupal administrator
Executed drush cache-clear drush
But when I try and run drush radix –help I keep getting the error that it cannot find Radix.
I’ve been using Drupal 8 for a while, but this is my first foray into drush and the cli tools so I’m stumped.
ANY help as to where to look and what to do would be HUGELY appreciated
For info, I’m developing locally on a Mac OS 10.11 with MAMP
Hi Colin,
Looking at https://www.drupal.org/project/radix/issues/2933383. It looks like Drush 9 support has been added.
So make sure you’re running Drush 9 and have the latest version of Radix.
Cheers,
Ivan
HI I´m also struggling with basic install only with last drush 10.1 version.
https://www.drupal.org/project/radix/issues/3092006
I also tried to downgrade to drush 9.7.0 but no change, and the above patch only seams to work for 4.4 radix… and we are now on 4.6
With older version this installed seams to work but we then had trouble with subthem JS = Uncaught TypeError: $ is not a function
Any hints?
Hi Robert,
I had no idea there’s a Drush 10.
I haven’t tested the latest version of radix with drush 10.
Cheers,
Ivan
Hi Ivan,
Thanks again for the great tutorial.
I have onea question about Source Maps, which I can’t get to work.
I tried to add the following code to the webpack.mix.js with not luck:
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: ‘source-map’,
})
.sourceMaps()
}
Did you make this work?
Right out of the chute I am having trouble with the drush command. Am I making a common error?
I am using a new Drupal 8 install from the preferred template project installed via composer.
Installed by didn’t set as default the Radix theme.
drush radix –help fails with radix not defined.
—–
/var/www/drupal$ ./vendor/bin/drush radix –help
Command “radix” is not defined.
Hi Joe,
Your command needs the –include parameter.
drush –include=”PATH_TO_RADIX_THEME” radix:create subtheme_name
And make sure you’re using Drush 9.
Cheers,
Ivan
Perfect, thank you!
Thanks Ivan, I have now built and installed my sub-theme with the minor change to get the “drush radix” command to work.
Next step, I have googled this a lot and have not found any tutorials. I now need to change the CSS attributes for my article teaser image to have a float: left and margin-right: 20px.
I can do that in my web inspector but am having trouble figuring out how to do it the proper way.
I see the default twig being used is from the core Radix theme by inspecting the displayed page.
1) when I try to use my own twig in my sub-theme it doesn’t seem to be recognized.
The suggested file names for twigs are
FILE NAME SUGGESTIONS:
* block–field-block–node–article–body.html.twig
* block–field-block–node–article.html.twig
* block–field-block–node.html.twig
* block–field-block.html.twig
* block–layout-builder.html.twig
x block.html.twig
so I tried to create a new one in my sub-theme called “block–field-block–node–article–teaser–image.html.twig” and minor variations like leaving the image out of it. For the content, I just copied the core twig for now without any mods. I then re-ran the “npm run watch” (I know I could have left this running in a spare shell) but it didn’t seem to recompile anything.
And subsequent page displays do not show that being read.
2) once I get that recognized, what it the best way to override a class attribute for an element?
I guess I need to go back to square one and start researching from the ground up. I was hoping for a internet guide to show me though. Thanks for all of the help you’ve already provided.
Thanks Ivan, FYI, here is are my working commands for Drupal 8.8.1 as of Feb 2020
cd /var/www/drupal
composer require drupal/radix;
cd /var/www/drupal/web
drush theme:enable radix
drush –include=”themes/contrib/radix” radix:create “my Radix SubTheme”
drush cr # maybe not needed but can’t hurt
# Use the machine name for two below.
drush theme:enable my_radix_subtheme;
drush config:set system.theme -y default my_radix_subtheme
cd /var/www/drupal/web/themes/custom/my_radix_subtheme
npm install
npm run watch
Thanks.
Hi Ivan ,
I am using radix 4 now. A few days ago a new version was available.
I updated the contrib theme from 4.6 to 4.7.
To upgrade my subtheme i looked at the release notes and copied the files that where changed in the kits/default directory from the contrib theme to my subtheme.
Then i updated the version number in radix_.info.
Is that the way to do it or is there a more straight forward method ?
Hans Nieuwenhuis
Hi Hans,
I see that you created this issue in the Radix queue, https://www.drupal.org/project/radix/issues/3069989
You don’t generally update the sub-theme after it’s been generated. You just update the base theme, i.e., Radix.
There’s no automated process, you’ll need to manually review changes as the first comment in the issue explains.
Cheers,
Ivan
Hi Ivan,
I have installed Redix theme and created a sub theme as per instructions.
I have written styles for screens in srcsassscreen but somehow they are not getting applied.
Can you explain why this is happening.
Thanks
Hi Nileema,
There could be many reasons why it’s happening.
1, Check that you’re compiling SCSS correctly, 2, Check that the libraries.yml file is correctly configured and the compiled CSS is being loaded, 3, Check the actual CSS and make it works.
Cheers,
Ivan
Hi Ivan.
Thank you for a great tutorial on the setup of Radix. I’ve searched the internet hi and low for more information on this promising theme but found very little and most focus on the same subject: installation and primary setup.
There’s just no info on the best practices and use of this advanced theme.
For instance, do you edit the “*.html.twig” files in the “templates” folder or the “*.twig” files in the “src/components/*” folder of the main theme.
Either way, great tutorial and thanks for your work.
Cheers!
Hi Ivan,
Thanks for the great tutorial.
I’m getting an error after running npm run watch.
ERROR in ./src/sass/institutos.style.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
@if $grid-row-columns > 0 {
^
Undefined variable.
I searched the internet and it seems that the solution is to downgrade to bootstrap 4.3.1 in package.json, but I’m already there.
Any suggestions on how to fix this?
Thank you!
Hi Natalia,
The error says that “$grid-row-columns” is not defined. Why that’s happening, I don’t know.
Have a look in the Radix issue queue to see if others have the same problem.
Cheers,
Ivan
Hi Ivan and all readers,
That “$grid-row-columns” error is related to Boostrap 4.4 and above which introduces new variables that are not declared in Radix yet.
To fix this, you’ll need to copy the Bootstrap _variables.scss content into your theme _variables.scss file (replacing all) .
Thanks PhilY
Hello Ivan,
I guess I am a bit confused about the
npm run production
command. I understand that it Uglyfies and Minifies the website resources, which will then be put into the /assets folder.
But on my live website it seems I still need everything that is in the /src folder.
This is a bit annoying as in my ideal set-up I’m looking to run a NPM command to give me an out-of-the-box deployable folder structure that doesn’t contain anything related to the development environment. Not sure if this makes sense…
Thank you,
Alessio
Hi Alessio,
You can change the “production” build folder in the
webpack.mix.js
, (https://git.drupalcode.org/project/radix/-/blob/8.x-4.x/src/kits/default/webpack.mix.js#L19)Just change the
.setPublicPath('assets')
line.I’ve never changed the source and public folders before in radix. But it should be possible, you’ll just need to modify the
webpack.mix.js
file.Hope this helps.
Cheers,
Ivan
How to add a dark mode with radix theme and its sass compiler?
Could you please provide instructions on how to install that theme without using drush or npm ?
(I’m working on windows)
Radix needs to be compiled so it needs npm, I’m not sure how you’ll use the theme.
If you need to install a theme without drush, a quick google search of “install drupal themes” brings up this page, https://www.drupal.org/docs/extending-drupal/installing-themes, follow step 1 and 2.
drush radix “Themename” returns:
Command “radix” is not defined.
drush –include=”themes/contrib/radix” radix:create radix_themename rerturns:
Command “radix” is not defined.
I’m using Drupal 9 with Drush 10. Should i drop down to Drupal 8 and Drush 9? Or is it worth creating the subtheme manually?
It works with Drush 10 and D9.
Make sure the include path is correct. It could be “web/themes/contrib/radix” if you installed Drupal using composer. I mention that in the FAQ section in the tutorial.
Also make sure you enable Radix theme and components module first before running the command. Or you’ll get another error:
“[error] The origin directory specified “/src/kits/default” was not found.”
Is it possible to SPLIT the npm created CSS into 3 parts so only the required css is loaded for the required drupal pages?
Eg. Front-page.css gets a optimized header.scss+footer.scss+frontpage.scss.
Taxonomy and product pages get each their css so the the site will load slightly faster by not having to load the unused css, which would benefit Google lighthouses core web virtuals scores?
Hi Robert,
“Is it possible to SPLIT the npm created CSS into 3 parts so only the required css is loaded for the required drupal pages?”
This can be done by configuring whatever you’re using to compile Sass. Webpack, etc…
“Taxonomy and product pages get each their css so the the site will load slightly faster by not having to load the unused css, which would benefit Google lighthouses core web virtuals scores?”
Then you’ll need to define a library for each compiled CSS.
Then you’ll need to write custom code and attach the library to specific pages.
Here’s a Drupal Answers link explaining the exact thing. https://drupal.stackexchange.com/a/221522/247
I personally don’t think it’s worth the effort you could introduce bugs in the code you wrote to attach the libraries. It seems like a lot of work just to get a score in “Google lighthouse”.
My recommendation is make sure you’re using a CDN and caching JS and CSS assets and review your compiled CSS and make sure it’s not bloated.
Cheers,
Ivan
Thanks its working with a bit of work, but google is still complaining about too much unused css for the core web virtual.
I found this plugin to even split css desktop + mobile but as of now I don’t have a clue how to add it with radix….. any hints?
https://github.com/SassNinja/media-query-plugin
Sorry never used the package.