Components: A deep dive

Getting to know the components structure, what are they, why they are the way they are and how to use them to our advantage.

Bootstrap like any other framework nowadays is built with the separation of concerns in mind, which means Radix should follow and inherit the same structure and mindset.

You can see a list of Bootstrap components here which we've recreated with Twig to be used within Drupal, and with SDC in Drupal core, we need to treat those components a bit differently, so let's break down a simple example component and see what's going on under the hood

Before we continue you can read more about SDC in Drupal here

What's inside

A typical component in Radix can consist of the following files, some required and some optional, note that you can host any static assets like images, videos, or even fonts within a component directory as well if you need:

/[component-name]
│
├── README.md
├── [component-name].twig
├── [component-name].component.yml
├── [component-name].scss
└── _[component-name].js

Let's break down each file and what it does:

• README.md: As the name suggests, the README of the component of what it is and a usage example, make sure to check each of Radix component's README file.

• [component-name].twig: The main twig file that gets loaded into the *.html.twig file of Drupal templates

• [component-name].component.yml: The purpose of this file in Drupal is to define the configuration for a custom component. These files specify the component's name, status, description, props (properties), slots, and other relevant information. To use Drupal SDC, this file needs to be there so it can be recognized by the Drupal core as a component, even if the content of it is empty.

• [component-name].scss: The SASS file related to the component, the watch and production commands will generate the related CSS file.

• _[component-name].js: Notice the leading underscore _ in front of the JS file, this is because we might need to do a lot of customization like minifying, custom imports, etc in the main development JS file but once we run the watch or build it will generate the non-underscore version of the file which would be the production one: [component-name].js Make sure to work within this file and leave the non-underscore one for the system to generate.

Already there are a lot of components within the Radix base theme, make sure to check them out as an example and learn how things work while keeping an eye on its README file.