Part of the Vartheme ecosystem · 8 projects
This starter kit theme provides a modern theming foundation based on Bootstrap 5, utilizing Single Directory Components and integrating with UI Patterns. It's designed to be cloned and customized for your own theme, offering a generative approach to building Drupal websites.
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.
Theme development with Varbase- 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.
Ask your assistant about Varbase Theme - Bootstrap 5
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.
More in the Vartheme ecosystem
Most installed first