Customize a Varbase Single Directory Components (SDC) In a Custom Theme
Last updated
10.0.x
Last updated
The components folder contains various Single Directory Components (SDC). To enhance the default components, Projects are using the components provided by module.
To replace any component from the Varbase Components module, follow the example below:
Suppose we have a custom style for the Alert component on our site, which differs from the default style. Here are the steps to implement the custom style:
Copy the alert folder from Varbase Components to your project's theme folder:
Edit the alert.component.yml file in your PROJECT_THEME folder.
Add the following line after name: Alert in the YAML file:
The updated alert.component.yml should look like this:
Uncomment the following line in the PROJECT_THEME/webpack.config.components.js file:
SASS to CSS files for componentsThese steps will allow you to incorporate your custom style for the Alert component, using the Varbase Components module as a base.
Add JS file, or more JS files to dependencies
Add more SCSS/CSS files
Change the custom component twig template
The draft has been seamlessly integrated with YAML in SDC Components within the Drupal core. This integration now serves as the backbone for all front-end and web components, providing a unified and efficient system.
Required in modules
Optional in themes (file presence needed)
The will read the schema file to understand the syntax for fixes and enable autocomplete.
Clone the custom card component, which is targeted for a selected content type, and have the custom changes for with styles(css) and scripts(js), or even with custom props and slots.
Switch to use the starterkit/recipes for the provided Varbase Cards from Varbase Components directly from the display mode for an entity.
Clone the Varbase Card component and customize it in a custom theme
Explore customizing card components for specific content types. Our present example revolves around the Varbase Blog content type.
You're welcome to download the components and tailor them according to your chosen view mode and content type's requirements.
Make the transition from the inline CSS class placement method for UI patterns to using custom Card components. Additionally, enhance organization and readability by integrating Custom Cards as stories within Varbase Storybook.
view modes for your site, and if necessary, you can utilize or clone the Varbase Cards Starterkit/Recipe.
Incorporate custom Card components when working with specific Content types like the Varbase Blog
This approach streamlines the development workflow, enabling smooth collaboration between Design, Storybook, Front-End development with SDC components and stories, and the mapping process in the theme. The Back-end team can also effortlessly integrate components into the site structure.
The Site builder gains the flexibility to associate SDC components with both UI Pattern and SDC Display, ensuring a cohesive and efficient implementation.
Can be managed in number of approaches
( Building the list of components for fields can be now in projects or products ) Then later SDC Display can map them from the UI.
Example: Impressed Card with
style sizeofmedium,card border,Equal height,Anchoring allthe card,media positionto thetop, and passing an extra Bootstrap ~5.3.0utility classesforlight backgroundandlarge shadowover the used cardWhich only has the following in
varbase-blog-card-impressed-medium.twigfile:
The equivalent in Storybook using the custom Varbase Impressed Card -medium
Which is the equivalent of using the default Impressed Card - medium - with Read more story with the default standard Impressed Card in the storybook - but without the light background and no shadows.
Component Libraries: Components Examples
Have a look at the code and README.md for list of props, slots, and example how to use.
Following with of JSON Schema, which is a declarative language that allows you to annotate and validate JSON documents.
To follow with metadata.schema.json selected by Drupal Core team
to integrate with that
serves as an exemplary model for understanding how to effectively manage various elements such as Content types, View modes, Layout Libraries, Views, site section pages, categories, and tags using the comprehensive range of "assembled" , modules, and "Starterkit/Recipes" configs.
Example first approach: Use the module. Select a component for a field display from the UI, and map values to props and slots.
Example second approach: Create a card-text-body-field component and use the component with the twig template in Vartheme BS5 suggestion for the field body.
The component files are in ( )
, , , , ...
