Responsive Organisms with Bootstrap 5

Bootstrap 5 was chosen as the CSS framework for AstroForge for several reasons: maturity, a rich component set, good documentation, and general familiarity among web developers. But a more important reason: the design token system.

Brand Alignment with Design Tokens

Bootstrap 5.3 has full CSS custom property support. Tokens like --bs-primary and --bs-body-font-family defined in src/styles/_tokens.css affect all Bootstrap components. Changing a client's brand colour requires a single token change — all buttons, links, and accents update automatically.

The Section Wrapper Pattern

Every content organism produces this HTML structure:

<section class="{organism} {organism}--{variant} app-section">
  <div class="container">
    ...
  </div>
</section>

.app-section defines global padding (from the --section-padding-y token). Full-bleed sections like Slider and FullBackground don't use this class — they manage their own height.

Per-Organism CSS Architecture

Each organism variant's CSS lives in src/styles/organisms/{Name}/{Variant}.css. src/styles/app.css is an @import list only. Vite bundles these files into a single hashed bundle at build time.

When the scaffold tool creates a new organism, it automatically creates the CSS file and adds the @import line to app.css. Developers don't have to touch the CSS infrastructure.

Responsive Grid

Bootstrap 5's grid system is used as standard in AstroForge organisms: col-md-4, d-none d-md-block, text-center text-md-start, etc. Mobile-first approach is foundational.