The Portico - ReadMe Documentation

Components

This template uses the following:

Critical CSS to improve sitespeed and loading any CSS above the fold. This can be found under the Snippet critical-css
BEM (Block Element Modifier) for class names
Nested CSS for certain classes, specifically forms and Nesthub listing widget (work in progress)
Container Queries to adjust to elements depending on the element size (and not viewport width)

Improvements

This template has been updated with the following improvements:

Supernav within the nav automatically calculates the width depending on the number of columns!
Emails in the Contact and About Page are automatically truncated to prevent an overflow of the container. Users will still be able to copy the email address if needed.
Lazyloading render-blocking resources:
- Google Fonts
- Bootstrap CSS Library
- /css/styles.css
- Animations are now condensed with automations. If you need to use custom animation class (bounceIn, flipIn, pulse), you can attach the data-style and link the animate-v2.min.css to the element.
  Example:
  <div class="analysis-image lazyload" data-animation="flipInY" data-link="/css/animate-v2.min.css?v0808"></div>
  - Note: We advise you to only use the custom animation once to prevent render-blocking. If you are planning to use multiple custom animation on the page, you may simply load the CSS as a <link> tag within the <head> tag.
- All scripts are moved to the footer of the resources in the Document via the location='footer' parameter. If you are embedding a script inside the page that uses JQuery, please replace $(document).ready(function () { with window.addEventListener('load', (event) => {.
  - If there is no $(document).ready(function () { at the top of the script tag, you can simply add window.addEventListener('load', (event) => { at the top of the script tag and add }); at the bottom before the closing tag.
- JSON in the following Snippets (to avoid double data-entry and ease of entering content):
  - Guarantees
  - Testimonials
  - FAQs
- Sample Analysis Report Images for both home and military service pages automatically have the logo. This will mitigate time for developers to manually switch out the logo.
- Custom text for More/Less toggle buttons
  - You can simply add data-less-text and data-more-text to the <a> tag
    Example:
    <a data-bs-toggle="collapse" href="#collapseDiscover" role="button" aria-expanded="false" aria-controls="collapseDiscover" class="btn btn--arrow btn--right" data-less-text="View Less" data-more-text="Learn More">Learn More</a>
Viewport Width Calculator

Last Updated: 2025/12/09

The Portico - ReadMe Documentation

Components

Improvements

Viewport Width Calculator