The Focus CMS Default Theme is the official default presentation layer of Focus CMS.
Its primary purpose is to serve as a reference implementation, demonstrating the frontend structure, component architecture, and integration patterns of the system.
It is important to emphasize that this theme is not a mandatory design direction, but a recommended starting point.
The structure, layout, and components can be freely modified, replaced, or entirely reinterpreted according to project requirements.
Modularity and Placement
Frontend themes in Focus CMS — including the Default Theme — are not installed into the vendor/ directory, but directly into the project’s Themes/ directory.
This ensures that:
- the theme remains a first-class project resource,
- it does not behave like a traditional dependency,
- it can be directly developed and customized,
- it aligns with the modular architecture of the system.
Themes are managed declaratively via the themes.json configuration file, which is processed by the Composer – Focus Theme Installer for structured installation.
Technology Stack
The current implementation of the Default Theme:
- uses Tailwind CSS for styling,
- applies Alpine.js and jQuery for component interactions,
- supports modular NPM-based asset management and build compatibility.
However, the theme is not strictly tied to these technologies.
The frontend layer can be replaced or rebuilt using any CSS framework (e.g., Bootstrap, custom CSS, utility-first or component-based approaches) and any JavaScript stack.
The Default Theme is therefore not a finalized design template, but a structural reference, illustrating how the presentation layer integrates into the modular architecture of Focus CMS.
GitHub Repository
https://github.com/hi-personal/focus-cms-default-theme