Guidance for Resort Footer Development and Integration

This document provides resort guidance for developing brand footers for their Aspenware eCommerce web application.

1. Responsiveness and Breakpoints

Current Breakpoints

If you are targeting the current eCommerce platform breakpoints, please use:

mobile-wide: 42rem,
tablet: 46rem,
tablet-wide: 54rem,
desktop: 62rem,
desktop-wide: 66rem,
desktop-ultra-wide: 88rem,

Future Breakpoints

If you are targeting future support as we update our platform, our breakpoints will be changing to better target modern devices. Aspenware will be updating our breakpoints to the following over the next 18 months. For this reason, we recommend you target the updated values. While there will be some inconsistency in your footer and the platform breakpoints while Aspenware makes this conversion, it will prevent you from having to update your CSS again down the road.

sm: 37.5rem,
md: 60rem,
lg: 79rem,
xl: 119rem,

Mobile First

The Aspenware Commerce Platform is built mobile first, so when creating your CSS breakpoints for your brand footer we recommend targeting min-width instead of max-width.

For example:

@media only screen and (min-width: 60rem) {
  // YOUR CSS
}

2. Scoping CSS

Preventing Footer CSS leaks into your eCommerce site

It is very important that attempts are made to prevent the custom footer CSS from leaking into your main commerce site. If not properly scoped, these CSS leaks may cause undesired and difficult to resolve styling conflicts with your eCommerce site.

To prevent this, we strongly recommend scoping all footer CSS by encapsulating it in a unique ID.

For example…

In your CSS:

#your-resort-brandfooter p { font-size: 1rem };
#your-resort-brandfooter h1 { color: #000 };

And in your HTML:

<div id="your-resort-brandfooter">
   <h1>YOUR RESORT NAME</h1> 
   <p>Welcome to MY RESORT<p>
   <ul>
      <li><a href="home">Home</li>
      ...
   </ul>
   ...
</div>

If you are using SASS to write the CSS and precompiling, you can simply wrap all your CSS in the unique ID:

#your-resort-brandfooter {
   p { font-size: 1rem };
   h1 { color: #000 };
}

Aspenware CSS leaking into your brand footer CSS

Aspenware does its best to scope CSS but some CSS libraries we use may leak into your footer styles. If this happens, feel free to use !important on your scoped rules to ensure your styles are applied to your footer.

For example:

#your-resort-brandfooter p { color: red !important }

3. Using Libraries and Frameworks in your Brand Footer

CSS Libraries

CSS libraries such as Bootstrap getting inserted into the page via the footer may cause conflicts with your eCommerce page design. If you must use a CSS library, please check the CSS library documentation to see if it is possible to scope the library to the context of your footer.

Javascript Frameworks

We utilize Vue.js on our front end and resorts have had difficulty inserting a second Vue instance into their headers and footers as the two Vue instances tend to conflict with each other. If you are going to attempt to use Vue for your footer, make sure that the instance is attaching to the ID of your footer container eg. #your-resort-brandfooter (vs. using the default #app) and does not insert any components into the global page scope (window). It is also advised to enable scoped CSS in any Vue component files.

You may have more success using a different framework, such as React or Svelte.

In general, using frameworks for the footer is untested and unsupported at this time, so please be aware of the risk that you may run into issues.

4. Aspenware Theme Support for Resort Footers

Aspenware has internal tooling that we utilize to update the theme properties of your eCommerce site if your resort updates its branding. We have the ability to utilize the same tool to update the colors and logo in your footer on your behalf. To do this, you simply utilize special CSS Custom Properties when developing your brand footer.

The table below lists the Custom CSS Property names available to use and which elements they should be used on to enable us to update your eCommerce footer theme along with the rest of the eCommerce application if your resort undertakes a brand update.

If you prefer to manage the theming of your footer on your own, you are welcome to do that by not including any of these properties in your footer CSS. The CSS custom property names must be used exactly as written. Please do not alter the --ads-* property names.

#your-resort-brandfooter { background-color: var(--ads-plugins-brandfooter-backgroundcolor, FALLBACK COLOR);}

#your-resort-brandfooter h1, #your-resort-brandfooter h2{
   var(--ads-plugins-brandfooter-header-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter p{
   color: var(--ads-plugins-brandfooter-body-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter a {
  color: var(--ads-plugins-brandfooter-link-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter a:hover, #your-resort-brandfooter a:active, #your-resort-brandfooter a:visited {
  color: var(--ads-plugins-brandfooter-link-hover-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter .logo-image {
  height:80px; //adjust as needed for your logo dimensions
  width: 100px; //adjust as needed for your logo dimensions
  background-position: center;
  background-size: contain; //logo image will auto scale to fit the size of the container
  background-repeat: no-repeat;
  background: var(--ads-plugins-brandfooter-logo-image, url('URL TO FALLBACK IMAGE'));
}

5. More Information on These Topics

• ARIA Tags for Logo Image Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role

• Using CSS Custom Properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

• Adding a Logo Image URL to a Div: https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

• Writing Mobile First CSS: https://www.freecodecamp.org/news/taking-the-right-approach-to-responsive-web-design/