Demonstrate a full-site shell that follows MPSS1 and compiles Bootstrap 5 from SCSS source, with brand decisions in _variables.scss.
View this pattern on the live demo site
Brand decisions as Bootstrap variable overrides — colors, fonts, spacing.
/** 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
Imports the variables, then Bootstrap's own SCSS source, then the site's component rules.
//This SCSS file is intended as the main stylesheet for your site. Include it in your main template with the add_stylesheet method: // //Customize how bootstrap components look by overriding variables in the /_variables.scss stylesheet // //To add your own styles on top of the bootstrap styles simply create new partial SCSS stylesheets and import them at the end of this SCSS file @import "/_variables.scss"; @import "/bootstrap5/scss/bootstrap.scss"; @import "/bootstrap-icons/font/bootstrap-icons.scss";
Opens the document, attaches main.scss once, and honors the MPSS1 header inputs.
{% comment %}
This is the main header template for the whole site. It conforms to the MPSS1 standards: https://help.marketpath.com/marketpath-site-standards-1-mpss1
Inputs:
page_title - As per MPSS1 standards, if set, will override the default page title.
no_header_or_footer_markup - As per MPSS1 standards, if set, will disable output of all markup in the header. It will still load the javascript and stylesheets.
minimal_header_and_footer_content - As per MPSS1 standards, if set, will disable output of navigation menu and other markup (apart from meta properties). It will still load the javascript and stylesheets.
no_header_banner - As per MPSS1 standards, disables the output of any banner in the header template (not applicable to this theme)
no_header_title - As per MPSS1 standards, disables the output of the title in the header (not applicable to this theme)
theme_settings - Passed through to /theme/_header.liquid
Outputs:
banner_included_in_header - As per MPSS1, will be set to true if a banner is output by the template (not applicable to this theme)
title_included_in_header - As per MPSS1, will be set to true if the title is output by the template (not applicable to this theme)
global_announcement_snippet - May be set from /theme/_header.liquid
theme_settings - May be set from /theme/_header.liquid
{% endcomment -%}
{%- include '_global_assigns.liquid' -%}
{%- add_stylesheet "/main.scss" -%}
{%- add_javascript "/main.js" defer:true position:'body' -%}
{%- unless no_header_or_footer_markup -%}
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:title" content="{{page_title | default:automatic_markup.title | escape }}"/>
<meta property="og:description" content="{{ automatic_markup.description | escape }}"/>
<meta property="og:url" content="{{ entity.full_url }}" />
</head>
<body>
{%- unless minimal_header_and_footer_content -%}
{%- include "/theme/_header.liquid" -%}
{%- endunless -%}
{%- endunless %}Closes the document and honors the MPSS1 footer inputs.
{% comment %}
Inputs:
no_header_or_footer_markup - As per MPSS1 standards, will disable output of whole footer.
minimal_header_and_footer_content - As per MPSS1 standards, will disable the output of any non-essential footer content for a minimal footer
{% endcomment -%}
{%- unless no_header_or_footer_markup -%}
{%- include "/theme/_footer.liquid" -%}
</body></html>
{%- endunless -%}