JavaScript Libraries

ParadigmCSS

ParadigmCSS is a CSS-in-JS engine included via includes/paradigm.css.js. Instead of writing traditional stylesheets, you declare styles directly on HTML elements using the css="" attribute. ParadigmCSS reads these attributes at render time and generates real CSS rules in the document head.

The full styling system — the css="" attribute, the spaces-to-underscores rule, responsive breakpoints, states, variables, components, design tokens, and the calc() caveat — has its own reference page: Paradigm CSS.

Boot sequence

At page load, Bolt CMS runs ParadigmCSS once the DOM is ready so every css="" attribute is converted into real CSS:

ParadigmCSS.render();

ParadigmCSS scans the rendered DOM for css="" attributes and generates the corresponding stylesheet in the document head.

If you dynamically add content to the page after initial load (e.g., via an API response), call it again to process the new elements:

// After inserting new HTML into the DOM
ParadigmCSS.render();

The SITEURL global

Bolt exposes a SITEURL JavaScript global variable that contains the base URL of the site (e.g., https://example.com or http://localhost/my-site). Use it when constructing API URLs or navigation links in JavaScript:

fetch(SITEURL + '/api/search.php?q=' + encodeURIComponent(query))
    .then(response => response.json())
    .then(data => {
        // handle results
    });

This variable is set by the PHP entry point and matches the SITEURL constant available on the server side. It accounts for subdirectory installations, so you should always use it instead of hardcoding paths.