Theming

← Back to Documentation

s:CMS ships with Bootstrap 5 as its base design system. Theming works by overriding Bootstrap’s Sass/CSS variables and adding your own rules in a single stylesheet you own: src/styles/global.css.

Where styles live

1
src/styles/global.css                        → your stylesheet — edit this
2
node_modules/@lad-sapienza/scms-core/         → framework components — no stylesheet of its own

global.css is imported once by src/layouts/BaseLayout.astro and applies to the whole site. There is no separate framework stylesheet to merge with — this file is your theme.

Quick start

global.css already does three things out of the box; edit them directly:

Import a font (optional) — the starter imports a Google Font:

1
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

Import Bootstrap’s compiled CSS:

1
@import "bootstrap/dist/css/bootstrap.min.css";

Override Bootstrap’s CSS variables — this is the main lever for brand colors, typography, and body styling:

1
:root {
2
  --bs-primary: #6366f1;
3
  --bs-secondary: #8b5cf6;
4
  --bs-success: #06b6d4;
5
  --bs-body-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
  --bs-body-color: #334155;
7
  --bs-body-bg: #fafafa;
8
  --bs-heading-color: #1e1b4b;
9
  --bs-border-color: #e7e5e4;
10
}

Because these are plain CSS custom properties (not a Sass build step), changes take effect immediately in the dev server — no rebuild of Bootstrap required.

Using Bootstrap utility classes

With Bootstrap’s CSS loaded, its utility classes are available everywhere in your Astro/MDX content:

1
<button class="btn btn-primary">Primary button</button>
2
<div class="text-primary border border-primary">Brand-colored content</div>
3
<h1 class="fw-bold">Bold heading</h1>
4
<div class="row g-3">
5
  <div class="col-md-6">Half-width column</div>
6
</div>

See the Bootstrap documentation for the full utility and component reference.

Custom rules beyond variable overrides

Anything Bootstrap’s variables don’t cover, write as plain CSS in global.css, after the imports. The starter includes examples for headings, buttons, cards, form controls, badges, and a mobile breakpoint — extend these or add your own selectors:

1
.btn-primary {
2
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
3
  font-weight: 600;
4
}
5

6
.card {
7
  border: none;
8
  border-radius: 1.25rem;
9
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
10
}
11

12
@media (max-width: 768px) {
13
  h1 { font-size: 2rem; }
14
}

The top navigation (BSNavbar, from @lad-sapienza/scms-core/components/BSNavbar) is a Bootstrap navbar rendered from the menuItems array in src/layouts/BaseLayout.astro — see Getting Started for how to edit the menu. It picks up the same --bs-* variables as the rest of the site, so no separate theming is needed for it.

Component-level styling

Core components (DataTb, Map, Gallery, etc.) render mostly plain HTML with Bootstrap classes, so global overrides in global.css apply to them too. A few components pull in their own third-party CSS (e.g. MapLibre GL, PhotoSwipe) for functionality that Bootstrap doesn’t cover (map controls, the lightbox) — those are scoped to the component and won’t conflict with your theme.

Best practices