Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page

Was this helpful?

  1. Working with the components

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.

PreviousComponents: IntroNextAn example component

Last updated 1 year ago

Was this helpful?

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 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 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.

Bootstrap components
SDC in Drupal