Theming
Haven provides optional theme CSS files that control layout, spacing, and visual polish. You can use them as-is or extend them with your own styles.
Theme files
Load these after the Haven library:
<link rel="stylesheet" href="/haven-theme--default.css" />
<link rel="stylesheet" href="/haven-theme--directory.css" />
<!-- or for calendar -->
<link rel="stylesheet" href="/haven-theme--calendar.css" />| File | Purpose |
|---|---|
haven-theme--default.css | Shared base: buttons, images, filters, breadcrumbs, print styles |
haven-theme--directory.css | Directory grid layout and element ordering |
haven-theme--calendar.css | Calendar list, upcoming/ongoing layouts, filter grid |
The default theme is required; add the module theme matching your embed type.
CSS custom properties
Haven injects CSS variables at runtime. Theme files reference these:
| Variable | Set by | Purpose |
|---|---|---|
--haven-gap | Theme CSS | Standard spacing |
--haven-grid-gap | Theme CSS | Grid gap between items |
--haven-padding | Theme CSS | Container padding |
--haven-breakpoint-mobile | haven.config({ breakpoints }) | Mobile breakpoint (px) |
--haven-breakpoint-tablet | breakpoints config | Tablet breakpoint |
--haven-breakpoint-desktop | breakpoints config | Desktop breakpoint |
Breakpoints
Pass breakpoints in haven.config() to inject responsive CSS variables:
haven.config({
breakpoints: {
mobile: 480,
tablet: 800,
desktop: 1024,
'desktop-large': 1200,
'desktop-xlarge': 1360,
},
});Haven adds a <style> block to <head>:
:root {
--haven-breakpoint-mobile: 480px;
--haven-breakpoint-tablet: 800px;
/* ... */
}Use these in your own media queries:
@media only screen and (max-width: 800px) {
#haven-container {
flex-direction: column;
}
}Directory layout
The directory theme uses CSS Grid on body.haven__view--directory-list to control element order:
- Category title
- Breadcrumb
- Map
- Filter
- Product list
Override order or spacing in your own stylesheet by targeting Haven's BEM classes:
.haven__directory .haven__item {
/* custom item styles */
}
.haven__filter {
margin-bottom: 20px;
}Calendar layout
The calendar theme styles list items, daily groupings, upcoming widgets, and ongoing sidebars. Widget embeds use:
options: {
css: 'haven__calendar haven__calendar--widget',
}Matching your brand
Override Haven styles with your site's CSS variables or direct selectors:
.haven__item__title a {
color: var(--your-brand-color);
}
.haven__button {
background-color: var(--your-accent-color);
}Load your overrides after Haven theme files.
Base library styles
haven.min.css (loaded by the Kit or standalone) contains component styles for the gallery, lightbox, map controls, and filter fields. Theme files build on top of these base styles.
Print styles
haven-theme--default.css includes print rules that hide maps, filters, and navigation chrome when printing.