Theme Development with Varbase

Varbase 11.0.x provides a modern theming system built on established front-end technologies and Drupal's component-based architecture.

Front-End Theme: Vartheme BS5

Vartheme BS5 is the default front-end theme for Varbase. It is a Bootstrap 5 based theme that provides responsive design, SCSS compilation, and a component-based architecture using Drupal's Single Directory Components (SDC) system. Vartheme BS5 is installed by the Varbase Starter recipe.

Design System Base Install

Using Storybook 10.3 with Vartheme BS5 starter kit.

Sections

Understanding Vartheme BS5

Learn about the architecture of Vartheme BS5, including its Bootstrap 5 foundation, SCSS structure, Single Directory Components, and CVA (Class Variance Authority) integration.

Creating Your Own Theme

Step-by-step guide to creating a custom sub-theme that extends Vartheme BS5, including setting up SCSS compilation and customizing Bootstrap variables.