Marketpath Site Standards 1 (hereafter referred to as MPSS1) is a set of standards and requirements that allow the greatest interoperability between site themes, page templates, and components.

    Primary Goals

    1. To the greatest extent possible, guarantee interoperability of packages to enable rapid high-quality website development in Marketpath CMS.
    2. Make it easy for a non-technical editor to pull in pre-built page types to a site.
    3. Define standards that make site development consistent between sites and packages so that marketers and developers know intuitively what they need to do in order to accomplish their goals (eg:modify header/footer, make stylesheet customizations, or reduce the number of HTML requests required by a page load).

    Standards

    All packages that conform to the MPSS1 standard should also attempt to conform to the standards defined in the Marketpath CMS Package Development Guidelines. This is where many of the development and usability best practices are defined.

    The standard used by each package should be noted by a label with the key of "standard" and a either a value of "mpss1" (eg: "standard=mpss1") or a framework-specific code if the package only applies to a specific framework for which an additional framework-specific standard has been created (eg: "standard=mpss1-bootstrap5").

    Each full site package should have a single standard, which will be used by sites created from that package when locating new page packages to install (ie: do not have both standard=mpss1 and standard=mpss1-bootstrap5 on the same full site package).

    Dependency Interoperability

    An MPSS1 package may depend on other packages that are NOT MPSS1 packages (eg: data, component, widget, etc… packages) so long as they are also consistent with the interoperability guidelines defined in this document.

    Nonessential Content

    Content that is not essential to the functionality of the package should be included in the package as “Install Only” to make it as easy as possible for content editors to make changes without fearing that their changes will be overwritten or make package updates more complicated than necessary.

    Basic Site Framework

    All MPSS1 full site packages should include the following assets:

    • /_header.liquid template:
      • <head> tag and inside elements
      • Start of <body> tag
      • Main header content of site
      • Optional: banner
      • Optional: {{page_title | default:entity.title}}
      • Inputs:
        • page_title - when defined, this should be used in place of {{entity.title}} (when output by the template).
        • no_header_or_footer_markup - disables the output of any header markup (including {{entity.title}})
        • minimal_header_and_footer_content - disables the output of any non-essential header content for a minimal header
        • no_header_banner - disables the output of any banner in the header template
          • Eg: {% unless no_header_banner %}{% include “/path/to/banner.liquid” %}{% assign banner_included_in_header %}{% endunless %}
        • no_header_title - disables the output of {{entity.title}} to the template.
          • Eg: {% unless no_header_title %}<span>{{entity.title}}</span>{% assign title_included_in_header %}{% endunless %}
      • Outputs
        • banner_included_in_header - should be set to true if a banner is output by the template
        • title_included_in_header - should be set to true if the title is output by the template
    • /_footer.liquid template
      • Main footer content of site (<footer> tag and inside elements)
      • </body> tag
      • Inputs:
        • no_header_or_footer_markup - disables the output of any footer markup
        • minimal_header_and_footer_content - disables the output of any non-essential footer content for a minimal footer
    • /main.scss stylesheet
    • /_variables.scss stylesheet
      • To define variables and variable “overrides”
    • /main.js javascript

    Browser Title Guideline: When building full site MPSS1 packages, you should NOT modify the title or browser in the /_header.liquid template. Doing so would make it difficult for content editors - or other components for that matter - to customize those values and also makes the SEO preview in the page edit interface inaccurate.

    The Browser Title Guideline only applies when creating full site (theme) packages - when implementing a custom MPSS1 website you may do as you wish, although there may still be issues when modifying the title and/or browser title globally across the site. The preferred way to customize the browser title is by setting the Default Browser Title Prefix and Suffix options in the Site Settings (which will apply to new pages) and editing the SEO properties of existing pages.

    Backwards Compatibility

    Asset names and paths should not be changed once the package has been created. This applies particularly to javascript, stylesheet, and template assets.

    If an asset needs to be updated with a breaking change that is no longer compatible with the original asset:

    • Keep the original asset (unaltered) in the package, but change it to “Ignored”.
    • Copy the original asset and make your changes in the new asset. You may either change the filename of the asset or, preferably, place the new asset inside a new version sub-directory (eg: copy /marketpath/superbanner/v1/_mpbanner.js to /marketpath/superbanner/v2/_mpbanner.js)
    • Note the breaking change in the package changelog, including instructions on where to find the new asset(s)

    Licenses

    You must include any license files and/or other assets required according to the original source inside your package. Place the assets as a template inside your root package path. If the asset does not have a name or extension, use a descriptive name and the .txt extension. Example: /marketpath/foundation6/LICENSE.txt

    Note: There is no requirement that the license and/or other ancillary assets must be published unless they must also be consumable by end users.

    If the terms of an agreement must be explicitly agreed to prior to installing the package on a site, include those terms in the package agreement. You should not have to include more than one agreement per package - if your package requires agreement to multiple terms and conditions then it should be separated into multiple packages with their own agreements.

    Double-check that you have permission to distribute all images, documents, and other copyrighted content in each package before activating it.

    Frameworks

    Different CSS and javascript frameworks may be built on top of the MPSS1 standards. A couple examples are:

    Bootstrap5

    Label: "standard=mpss1-bootstrap5"

    • Depends on the Bootstrap5 package
    • Bootstrap should be included and compiled inside /main.scss
    • By default no javascript is output to the template
      • To utilize bootstrap javascript: {% add_javascript "/bootstrap5/js/bootstrap.bundle.min.js" %}

    NoFramework

    Label: "standard=mpss1-noframework"

    • For sites WITHOUT a pre-existing CSS framework. Interoperability is NOT GUARANTEED without the direct involvement of a developer.
    • Semantic HTML elements should be preferred wherever possible
    • Unique CSS IDs and/or classes should be used for all parts of the site for individual styling. CSS IDs and BEM classes are preferred.

     

    Changelog

     

    The following changes have been made to the Package Development Guidelines:

    Date Change
    01/16/2023
    • Added page_title to the inputs for the /_header.liquid template.
    • Added information about leaving the title alone in full site packages.