> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/developers/theme-development-with-varbase.md).

# 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](https://storybook.demo.varbase.vardot.com/)

Using Storybook 10.3 with Vartheme BS5 starter kit.

## Sections

### [Understanding Vartheme BS5](/developers/theme-development-with-varbase/understanding-vartheme-bs5.md)

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](/developers/theme-development-with-varbase/creating-your-own-theme.md)

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](/developers/theme-development-with-varbase/drupal-canvas.md)

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

* [**Editing the Header and Footer With Drupal Canvas**](/developers/theme-development-with-varbase/drupal-canvas/editing-the-header-and-footer-with-drupal-canvas.md) — 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**](/developers/theme-development-with-varbase/drupal-canvas/managing-multiple-accordions-with-drupal-canvas.md) — 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**](/developers/theme-development-with-varbase/drupal-canvas/hero-slider-container-and-hero-slide-with-drupal-canvas.md) — 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.