Semantic structure
Use the documented Xshna classes with semantic HTML rather than replacing native elements unnecessarily.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
XSHNA.CSS 3.0 / PRODUCTION HANDBOOK
Xshna Extract
Selective no-build CSS deployment. Practical engineering and integration guidance for serious commercial applications.
How it works
Paste or import template source, add dynamic class names to the explicit safelist, and generate a stylesheet. Extract preserves the entire core and semantic component layers. It removes unused utility selector groups from xshna-utilities.css according to class references found in the input. The tool uses browser CSSOM and keeps parent @media and @layer containers.
Dynamic classes
Xshna cannot reliably discover strings built at runtime, such as a server concatenating xsh-bg- with a status name. Add every possible generated class to the safelist. Repeat extraction after template changes. Snapshot-test all interactive states, responsive widths, error/empty/loading states and localization variants before shipping.
Offline fallback
Extract normally loads ../../dist/xshna-core.css, xshna-components.css and xshna-utilities.css over same-origin HTTP(S). If opened using a browser file:// URL, file fetch restrictions may prevent reading them; select those three source modules using the included file picker. JS bundling for the exported ZIP also needs same-origin access; copy the matching xshna.min.js manually if the ZIP notes say it was omitted.
Production workflow
Prefer the complete stylesheet during initial integration. Optimize only after coverage data and release freeze. Verify unused classes were safely removed from real pages and keep your extracted distribution under version control. Always use the same Xshna release version for all CSS/JS assets.
Launch Extract
Release status: Use the acceptance checklist before representing any feature as independently certified or accessible in all browsers. Tests delivered with the package are evidence of only the checks actually performed.
Files, tokens and configuration
| Surface | Source of truth | What to check |
|---|---|---|
dist/xshna.min.css | Compiled framework | Styling and responsive behavior |
dist/xshna.min.js | Optional interactions | Lifecycle, event handling and teardown |
src/css/ | Readable source | Public class names and token definitions |
src/contracts/ | Published component contracts where available | State, configuration and behavioral support |
Implementation details
Interactive behavior
Verify focus order, disabled behavior and descriptive labels for interactive patterns.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Test narrow containers, long translations and user-defined text sizes.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.