Readme (Dev Notes)

CSS Feature Browser Compatibility

Target for atleast 2.5 years (Widely available Baseline marker) for all major browser engines (Chromium, Webkit, Gecko; on both desktop and mobile) to have a particular CSS feature available before using it in production.

For e.g: CSS `:has()` became widely available since end of 2022 (except Firefox) so it's safe to use from end of 2024. In this case, even though Firefox would only have been 1 year compat, the benefit that `:has()` would provide on occasional use is worth the tradeoff for a potential minuscule subset of old Firefox version users.

If a newer CSS feature has a stable and reliable JS polyfill, then that is okay to use along with the polyfill for compatibility. Thorough testing is necessary to ensure the functionality in older versions.

E.g: `scroll-timeline` and `view-timeline` features has a stable polyfill that implements it in older versions so it's good to use for modern animations via CSS.

Styling & CSS

We use Client-first naming convention for a consistent and streamlined style authoring.

Old classes don't conform to any convention, and are supposed to be left untouched. If intentionally updated, a thorough inspection is necessary to ensure there aren't any side effects across the site.

Custom CSS is written in Global Styles / CSS component inside respective embeds, and it is included inside the Global Nav throughout the site (for compatibility purposes with pre-existing pages).

Custom JS

For new project briefs since 2024, Custom JS is written in TypeScript in a private Ignite git repository, compiled to JS, and copied into Webflow.

This is different than our usual process of directly serving code from Github via JSDelivr CDN to comply to Bank Aus IT restrictions of external access.

The Git repo has provision to switch between dev & production modes via console to allow rapid development and testing using localhost, as well as debugging modes for writing and testing TS code.

All information about the JS code and dev functionalities can be found in the git repo's Readme page.

Workflow:

• Component specific scripts go in the component itself. It has logic that prevents the script from loading more than once.
• Global scripts are added to the site custom settings.
• The script system functions via the main `entry.js` file code added to the head area of the site settings. That code is responsible for loading all other component scripts.
• 3rd party libraries -
  Global ones are included via site settings
  Component specific ones are loaded via custom function in the component to load only once

Dynamic Reactivity - AlpineJS

AlpineJS is added globally to every page of the site (as a part of `global.ts` file code).
That can be leveraged to add simple reactivity to any webpage using Alpine data attributes.

SEO Schema Setup

Schema is set up using JSON+LD markup on the site, as Webflow components.
This is to allow site-level management of all schema via the component instances.

Schema is implemented in 2 parts:
1. Schema wrapper - Schema / Wrapper Component
2. Schema JSON slot - Schema / {{Name}} (slot within the wrapper)

The sub component is direct JSON without the script tag inside a Code Embed block, and the actual schema on the page is put together by a JS script present in the wrapper component.
‍
This allows templatising schema and repeat similar setup across multiple pages by just replacing the specific values using component overrides.

Templatised Schema

That is implemented using handlebar syntax in the schema JSON along with a `data-schema-{{name}}` data attributes for its replaced value on the code embed.
An example of it is the Schema / Financial Product component.

For the blog CMS template, the implementation uses AlpineJS to set the respective `data-schema-{{name}}` attribute and the correct value for some fields like featured image where Webflow doesn't expose the direct value as component override.

Deep Dive of the setup:

An exception to this is certain schema like FAQ which has HTML microdata to avoid content duplication and make it effortless to auto-integrate Schema on the go.

Spacing Variables

Every spacing - padding, margin, flex/grid gap prioritizes using the spacing variables instead of direct values.
This ensures consistent responsiveness throughout the site.

Adding new variable values:

Although the variables are set in the Webflow variables panel (V), the ones above, all the spacing variables (e.g: 1.5 ) have a decreasing multiplier, and are overwritten in the Global Styles component, under the global-styles_responsive-shrink embed.

Remember to update the values there for them to take effect.

Spacer Components

Spacer gap elements are converted into components, with the naming convention - Spacer / {{size number}}

This is to allow quick addition of spacing elements to the page without going through the process of - "adding a div > giving it the class name" every time. Just directly type 2.5 in Finder to get the spacer of that size.

Responsive rem scaling

The rem base value scales down as screen shrinks (defined in Global Styles / CSS component)

This rem value is used across site in spacing, paddings and margins, etc. which scale proportionately. This is to ensure consistent shrinking down on smaller device sizes.

Quick Page Start

Use the components Template / PS - Page Starter and Template / SS - Section Starter to quickly get started with a new page and sections respectively. Type the abbreviations ps and ss in the Finder.

CMS External Link

By default, CMS links can't be opened in an external page as of August 2025.

We have a global JS solution added that allows opening those links in a new page by adding the data-attribute data-external to any link element.

All Components

Sections are componentised to create a modular, consistent, and scalable system and enable quick scaffolding of pages. All information about the specific components is available in the "All Components Guide" page.