Four small, composable stylesheets instead of every engine page repeating its own copy of the same design system.
Color, spacing, radius, and typography variables shared across every Xcojo engine.
A minimal modern reset — sane box-sizing, no default margins, media elements sized correctly.
The card, dropdown, sub-nav, code-block, and badge classes shared by every engine page.
A small set of layout and spacing utility classes for one-off adjustments.
Simplest option — one link tag, correct load order guaranteed:
<link rel="stylesheet" href="https://dev.xcojo.com/CSS/?file=all">
Or load only what a page needs, in order:
<link rel="stylesheet" href="https://dev.xcojo.com/CSS/?file=tokens"> <link rel="stylesheet" href="https://dev.xcojo.com/CSS/?file=reset"> <link rel="stylesheet" href="https://dev.xcojo.com/CSS/?file=components"> <link rel="stylesheet" href="https://dev.xcojo.com/CSS/?file=utilities">
<div class="xcojo-card xcojo-flex xcojo-flex-col xcojo-gap-3">
<h2>Example</h2>
<p class="xcojo-text-muted">Styled entirely from the shared library.</p>
</div>
Welcome to the Xcojo CSS Library Engine. It centralizes the design tokens and component classes used across every engine page, so updating a color or spacing value happens in one place instead of seven.
file: tokens, reset, components, utilities, or allAll component and utility classes are prefixed xcojo- to avoid colliding with anything already on a page.
All endpoints include automatic CORS headers (Access-Control-Allow-Origin: *) and long-lived caching, since design tokens change rarely.
:root block with a single <link> to ?file=tokens..card, .dropdown-content, .sub-nav-btn for their xcojo- equivalents where convenient — this is optional and can be done gradually, since the old class names still work if left in place.