Skip to documentation content

MPSS1 site shell with Bootstrap 5 source

All complete examples

Demonstrate a full-site shell that follows MPSS1 and compiles Bootstrap 5 from SCSS source, with brand decisions in _variables.scss.

What this example teaches

  • Ship Bootstrap as SCSS source and override its variables in _variables.scss instead of pasting compiled CSS
  • Keep main.scss to imports and component rules
  • Accept the MPSS1 header and footer inputs (page_title, no_header_or_footer_markup, minimal_header_and_footer_content)
  • Attach the compiled stylesheet once from the shared header with add_stylesheet

View this pattern on the live demo site

Files

Brand decisions as Bootstrap variable overrides — colors, fonts, spacing.

SCSS
/**
Add your own variables to this file, or use it to override bootstrap variables and change the way bootstrap components are displayed

The bootstrap variables are located in /bootstrap5/scss/_variables.scss
**/

$primary: #7A1F2B; //Deep butcher-block maroon — headers, primary buttons, brand
$secondary: #3A3A3C; //Charcoal slate — secondary buttons, footers
$success: #6B8E4E; //Sage green — "fresh & local" accents, badges
$warning: #C9A227; //Aged-brass / mustard — highlights, sale/holiday callouts
$danger: #B23A2E; //Warm red — alerts, sold-out
$info: #5C7A8A; //Muted steel blue — informational notices
$light: #F5EFE6; //Butcher-paper cream — section backgrounds
$dark: #211E1C; //Near-black charcoal — text, dark sections