NXP Docs

Appearance

Usage ​

Everyday workflow ​

  • Assign modules to the included positions (header, sidebar, footer, etc.).
  • Use the template settings to adjust colors, logos, and navigation.

Developer workflow ​

Recommended build commands:

bash
npm run dev:css
npm run dev:js

For production builds:

bash
npm run build

PHP compilation mode ​

If you do not want Node.js running during development:

  1. Enable Developer Mode in template settings.
  2. Turn on Compile SCSS on each request for automatic compilation on page reload when files change in src/.
  3. Optionally enable Show compile toolbar for manual builds.

Note: this setting adds overhead to each request, so disable it when you are finished compiling or when moving toward production.

SCSS structure ​

  • src/scss/template.scss for the main entry point.
  • src/scss/_variables.scss for tokens and breakpoints.
  • src/scss/_mixins.scss for reusable patterns.
  • src/scss/components/ for component-level styles.

Custom layouts ​

Create layouts in template_layouts/ and render them with Joomla FileLayout:

php
<?php defined('_JEXEC') or die; ?>
<div class="custom-section">
  <h2><?php echo $displayData['title']; ?></h2>
</div>

Asset management ​

Use the helper to include project-specific assets:

php
$nxp->addCSS('custom.css');
$nxp->addJS('custom.js');

Troubleshooting ​

  • Clear Joomla cache and hard refresh if CSS/JS is stale.
  • Check engine/logs/template.log.php for compilation errors.
  • Ensure css/, js/, and engine/logs/ are writable by the web server.

Production optimization ​

  • Disable developer mode before going live.
  • Build assets with Vite to minify CSS and JS.
  • Enable Joomla caching and gzip at the server level.