Frontend Assets

Reusable plain frontend base assets for VTXM Contao projects.

This repository is not a Contao bundle. It does not contain composer.json, Contao PHP code, Contao templates, GSAP, or project-specific theme code.

The Contao bundles remain theme-agnostic. These assets are optional helpers that can be loaded by a project theme when needed.

Files

css/vtxm-components.css
js/vtxm-components.js

CSS

css/vtxm-components.css provides a generic default skin for the VTXM Contao frontend hooks.

It is aligned with the actual Contao templates and CE option classes for:

• Layout Preset
• Section Elements
• Content Grid
• Iconbox
• Members Grid
• Live Teaser
• Quote Teaser
• Announcement
• Tabs
• Accordion
• Timeline

Supported structural hooks include:

• .vtxm-section
• .section--grid
• .section--split
• .vtxm-section__inner
• .vtxm-section__area

Recommended separation:

• content-elements = reusable content blocks
• content-grid = render another article as a grid
• layout-preset = render external slots as split layout
• section-elements = inline structure inside the current article

Project-specific styling belongs in your project CSS, for example custom.css. Load project CSS after vtxm-components.css to override the defaults.

JavaScript

js/vtxm-components.js is only required for VTXM tabs.

It provides generic tab behavior for:

• multiple tab groups
• first tab active by default
• .is-active state
• hidden inactive panels
• ARIA attributes
• keyboard navigation with ArrowLeft, ArrowRight, Home and End

Accordion elements work natively with details / summary; no accordion JavaScript is included.

Recommended Load Order

CSS:

1. theme main.css
2. css/vtxm-components.css
3. project custom.css

JS:

1. theme JavaScript
2. js/vtxm-components.js
3. project app.js if needed

Notes

The assets are intentionally generic. Theme JavaScript remains part of the project theme and is not included here.

GSAP is not included.

License

VTXM CSS/JS files in this repository are MIT licensed.