CSS System

One stylesheet

Every page links a single compiled stylesheet:

<link id="stylesheet" href="assets/css/style.css" media="screen" rel="stylesheet">

• assets/css/style.css — full, readable build (use during development).
• assets/css/style.min.css — minified build (use in production).

style.css is a single concatenated bundle — it does not @import other files at runtime, so the browser makes one request. The individual numbered files below are also shipped for reference, but you only need to link style.css (or style.min.css).

What each stylesheet covers

The numbered files map cleanly to features, which makes it easy to find where something is styled:

These are the compiled outputs you received. You normally don't edit them — see Customizing below.

Theme variables

01-variable.css defines layout/theme custom properties. A few of the key ones:

--app-width-lhs: 16.5625rem;     /* sidebar width */
--app-head-height: 4.375rem;     /* header height */
--page-header-height: 4.375rem;  /* page header height */
--page-header-sticky-top: 4.4375rem;
--animate-duration: 0.3s;        /* base animation timing */
--nav-transition-duration: 0.4s;

You can override any of these from your own stylesheet (see below), e.g. to widen the sidebar:

:root { --app-width-lhs: 18rem; }

Color palette (badges & widgets)

The kit's signature colors are the named badge/widget palette. These are the only colors used for badges and dashboard widgets:

Badge variants (all combine with the colors above):

<span class="badge badge-green">Solid</span>
<span class="badge badge-green-light">Light</span>
<span class="badge badge-outline-green">Outline</span>
<span class="badge badge-pill badge-green">Pill</span>
<span class="badge badge-sm badge-green">Small</span>
<span class="badge badge-lg badge-green">Large</span>

• badge-{color}-light — soft tinted background with a stronger text color.
• badge-outline-{color} — bordered, transparent background.
• badge-pill — fully rounded; badge-sm / badge-lg — sizes.
• badge-disabled — neutral grey (used for "off" states).

Utility classes

The kit is plain Bootstrap 5, so the full set of Bootstrap utilities is available — spacing (m-*, p-*, mb-3, me-2…), display/flex (d-flex, flex-column, justify-content-*, align-items-*), text (text-primary, text-muted, fw-bold, text-center), sizing (w-100, h-100), and the grid (row, col-*, responsive col-md-6 etc.).

Use Bootstrap 5 utility class names (e.g. me-2, mb-3), not legacy m-r-5-style names.

Customizing the look

You don't edit style.css. To change styles, add your own stylesheet after it and override what you need (your rules win because they load later):

<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/your-overrides.css" rel="stylesheet">   <!-- your customizations -->

/* your-overrides.css */
:root { --app-width-lhs: 18rem; }      /* widen sidebar via the variable */
.panel-card .card-title { font-weight: 700; }
.badge-green { /* your own green if you must */ }

For production, switch the link to style.min.css and serve your override file minified too.