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.

Drupal Canvas

Build and manage a Vartheme BS5 site visually with Drupal Canvas — no code:

• Editing the Header and Footer With Drupal Canvas — the Allow Edit Global Regions permission, the region focus editor, dragging components and changing their props (a Donate button in the header and a Newsletter webform in the footer).

• Managing Multiple Accordions With Drupal Canvas — dragging the Accordion components from the Library, reordering and managing items in the Layers panel, the "Keep multiple items open" setting, and holding any component inside an accordion (Text, a View, a Block or a Webform).

• Hero Slider Container and Hero Slide With Drupal Canvas — building a hero carousel, managing slides in the Layers panel (including inside a Section layout), the container settings (transition, autoplay, indicators, controls, height, controller colour), the slide settings, and one example for each media position.