#The Theme Framework

This is the reference for how a LeaseLeads theme frontend is built — the vocabulary, the paradigms, and the conventions you follow when you structure, write, and extend one. It documents the generic framework; Novaa is its reference implementation. A handful of pieces are theme-specific and are marked as such — everything else applies to every theme.

#Two mirrored halves

The frontend is two halves that share one taxonomy:

• Views — PHP partials under resources/public/views/{type}/ that render markup.
• Assets — JS and SCSS under resources/public/assets/{type}/ that add behaviour and style.

A modules/intro/intro.php view has a modules/Intro/Intro.js and Intro.scss beside it. The folder tells you what a thing is; the pairing tells you where its markup, behaviour, and style live.

#The ideas that hold it together

1. Convention over configuration. A component is discovered by a CSS selector, its options come from a data-* attribute, and its lifecycle methods are found by name (boot*, init*). You wire almost nothing by hand.
2. Presence-gated, always. Nothing loads unless its selector matches an element on the page. Over per-component code-splitting, the browser only ever downloads what the page actually uses.
3. The page owns its behaviour; the editor owns its content. Authors place Modules and configure them in the editor; those choices reach the frontend as data-* options, data islands, and CSS custom properties — never as forked code.
4. JS drives state; SCSS expresses it. Behaviour toggles state classes (is-open, is-animated, loaded); the colocated SCSS owns every pixel of how those states look.

#Where to start

• New to the theme? Read Getting Started top to bottom.
• Building a section? Building Blocks and Recipes are task-oriented.
• Need to understand why the JS behaves as it does? Core Concepts.
• Matching a design? Styling and The Backend Bridge are your surface.