Grace Property Management - ReadMe Documentation

Components

This site uses the following:

Critical CSS to improve sitespeed and loading any CSS above the fold
BEM (Block Element Modifier) for class names
Nested CSS for certain classes, specifically forms
Container Queries to adjust to elements depending on the element size (and not viewport width)

Improvements

This site has been updated with the following improvements:

Lazyloading render-blocking resources:
- Google Fonts
- Bootstrap CSS Library
- /css/styles.css
- ReCaptcha (field will now only load if form is data-recaptcha attribute is present).
- 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) => {.
JSON in the following Snippets (to avoid double data-entry and ease of entering content):
- Areas
- FAQs
- Guarantees
- Partner
- Services
- Social
- Testimonials
Emails in the Contact and About Page are automatically truncated
Banner Replace - To add a custom class to the secondary banner (eg, adjusting opacity), add a class to the <img> element.
Example:
<div class="banner-replace"> <img src="/images/residents-bg.webp" alt="Sub Banner Image 01" class="secondary-banner--opacity-80" /> <div class="prompt"> <h1 class="hero__lead text-center">Resident Resources</h1> </div> </div>
Bios Module - To add a "fun" pic when the user hovers over the person, make sure the file name is First-Name-Last-Name-alt.webp, and add the image under the /people/ folder.

Additional Notes

Educational Videos page

Add post to blog (Educational Videos)
Post Title: Video title
Video Wrapper Code:
<div class="video-wrapper" data-video-id=""></div>

Legal Compliance Page

Blog format

Last Updated: 2025/09/19