Varbase Theme - Bootstrap 5

Vartheme BS5 is the Bootstrap 5.3 starter-kit theme for Varbase, and the theme every Vardot site template is cloned from — Varbase Starter, Educare, Horizon Aid and RightUp.

It is a starter kit rather than a base theme, and the difference matters here: there are no sub-themes. You generate your own theme from it and the components come with you, so you edit them directly instead of overriding someone else's markup.

What is in it

• 125 Single Directory Components, laid out as atoms, molecules, organisms and page templates. Cards, heroes and sliders, the navbar and menus, the page header and footer, breadcrumbs, pagination, share, the form elements, the views displays and the rest — with 69 Twig templates mapping Drupal's own output onto them.
• A design system, not a palette. Figtree for headings and interface, DM Mono for code, a Bootstrap blue primary over a deep navy dark, a lavender accent and warm sand neutrals, and a heading scale running 52px down to 14px at weight 700 on a 140% line height. It follows the Varbase Design System.
• Drupal Canvas ready. Every component declares its props, so an editor picks and configures them in Canvas without touching Twig. Icon props are opted into the Canvas Icon Picker.
• Storybook for building and reviewing components on their own, away from a page. 69 of them ship stories.
• Bootstrap 5.3 underneath, with the usual variables and utilities, so the parts you do not restyle behave the way Bootstrap does.

How to use it

Generate your own theme from the starter kit rather than sub-theming it — How to use the Vartheme BS5 Starterkit walks through it.

It is best used with the Varbase distribution, but it installs on any Drupal 11.4 site, including the Minimal and Standard profiles. You simply get less of the surrounding machinery.

• Creating Your Own Theme
• Integration of Varbase with Storybook
• Add Preloaded Fonts in Vartheme
• Manually Install Needed Theming Tools
• Varbase documentation

Following with Varbase Design System

Sponsored and developed by Vardot.