Viafoura's widgets have been built in a componential style, separating out layout styles and “client overridable” styles to provide you with a modularized CSS that allows for more customization to fit the feel of your site.
Viafoura's CSS follows a set of rules:
- All styles are nested in a .viafoura parent class to provide namespacing
- We use as few CSS selectors as possible to improve both CSS weight and render time
- We try avoid the use of tag/element selectors because they can cause CSS to flow outside of the domain
- Place the tray tag directly in the body element. This is recommended in our documentation to avoid unnecessary style overrides, especially as the tray is in a fixed position, it will avoid positioning bugs.
- Do not use !important styles. as it will indiscriminately override our styles.
- Avoid styles that select on tag names (ul, li, div) rather than class names where possible. This helps to keep styles within expected boundaries and avoid overflowing styles from one domain to another.
- We only fully support client customizations outlined in documentation.viafoura.com, we cannot guarantee forwards compatibility with any other customizations.
- Please do not use
display: noneto hide our elements, as this may cause issues with focus traps and general accessibility, which may actually throw fatal JS errors from our widget code.
Updated 3 months ago