Versions Compared

Version Old Version 2 New Version 3
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The current breakpoints for our Commerce Platform are as follows…

Current Breakpoints

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

Code Block
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.

...

Code Block
#YOUR-RESORT-brandfooter {
   p { font-size: 1rem };
   .headingh1 { 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.

...

Aspenware has internal tooling that we utilize to update the theme properties of your eCommerce site. 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 prop Custom CSS Property names available to use and which elements they should be used on to enable us to manage your eCommerce footer theme for you.

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.

...

CSS Custom Property

Use Cases

How to Use

--ads-brandfooter-backgroundcolor

The main background color for the footer

Code Block
#YOUR-RESORT-brandfooter { background-color: var(--ads-brandfooter-backgroundcolor, FALLBACK COLOR);}

Replace FALLBACK COLOR with the color that should be applied (eg. #334455) if the page had a problem loading the --ads-brandfooter-backgroundcolor property (or it was not configured yet by AW).

--ads-brandfooter-header-font-color

The color for any headers in your brand footer

Code Block
#YOUR-RESORT-brandfooter h1, #YOUR-RESORT-brandfooter h2{
   var(--ads-brandfooter-header-font-color, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-backgroundcolor property (or it was not configured yet by AW).

--ads-brandfooter-body-textcolor

The color for the body copy in your brand footer

Code Block
#YOUR-RESORT-brandfooter p{
   color: var(--ads-brandfooter-body-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-body-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-link-textcolor

The color for the links in your brand footer

Code Block
#YOUR-RESORT-brandfooter a {
  color: var(--ads-brandfooter-link-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-link-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-link-hover-textcolor

The color for the link interactive states in your brand footer

Code Block
#YOUR-RESORT-brandfooter a:hover, #YOUR-RESORT-brandfooter a:active, #YOUR-RESORT-brandfooter a:visited {
  color: var(--ads-brandfooter-link-hover-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-link-hover-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-logo-image

The path to the logo image. For this to work, you must set your logo as a background image on either a div or a span

Code Block
#YOUR-RESORT-brandfooter .logo-image {
  height:80px;
  width: 100px;
  background: var(--ads-brandfooter-logo-image, url('URL TO FALLBACK IMAGE'));
}

Replace URL TO FALLBACK IMAGE with the path to your logo image that should be applied (eg url('https://brandsite.com/assets/logo.png')) if the page had a problem loading the --ads-brandfooter-logo-image property (or it was not configured yet by AW).

For accessibility, place include this role and aria-label on the div or span.

<div id="#YOUR-RESORT-brandfooter-logo" role="img" aria-label="logo"></div>