Usage

Public assets and bundle order

New pages should load starthds-core.css first, then the needed app, dashboard/data, marketing, knowledge, or markdown domain bundle, then optional token-only theme CSS, then product-local CSS. Use dependency-free ES modules only for progressive enhancements.

<link rel="stylesheet" href="/v1/css/starthds-core.css">
<link rel="stylesheet" href="/v1/css/starthds-app.css">
<link rel="stylesheet" href="/v1/css/starthds-dashboard.css">
<link rel="stylesheet" href="/v1/css/starthds-marketing.css">
<link rel="stylesheet" href="/v1/css/starthds-knowledge.css">
<link rel="stylesheet" href="/v1/css/starthds-markdown.css">
<link rel="stylesheet" href="/v1/css/themes/equiask.css">
<link rel="stylesheet" href="/assets/app-local.css">
<script type="module" src="/v1/js/starthds-core.js"></script>
<script type="module" src="/v1/js/starthds-app.js"></script>
<script type="module" src="/v1/js/starthds-dashboard.js"></script>
<script type="module" src="/v1/js/starthds-knowledge.js"></script>
<script type="module" src="/v1/js/starthds-markdown.js"></script>

The retained aggregate remains available for legacy/all-in-one consumers:

<link rel="stylesheet" href="/v1/css/starthds.css">
<script type="module" src="/v1/js/starthds.js"></script>

Consumers can self-host the same files or reference them from the StartHDS host; public /v1 assets return wildcard CORS, correct MIME types, and immutable cache headers.

Recommended order

Load core first, then only the domain bundles used by the page. A dashboard page should load /v1/css/starthds-dashboard.css immediately after core and before token-only themes or local overrides.

<link rel="stylesheet" href="/v1/css/starthds-core.css">
<link rel="stylesheet" href="/v1/css/starthds-dashboard.css">
<link rel="stylesheet" href="/v1/css/starthds-app.css">
<link rel="stylesheet" href="/v1/css/starthds-knowledge.css">
<link rel="stylesheet" href="/v1/css/starthds-markdown.css">
<link rel="stylesheet" href="/v1/css/themes/equiask.css">
<link rel="stylesheet" href="/assets/app-local.css">
<script type="module" src="/v1/js/starthds-core.js"></script>
<script type="module" src="/v1/js/starthds-dashboard.js"></script>
<script type="module" src="/v1/js/starthds-app.js"></script>
<script type="module" src="/v1/js/starthds-knowledge.js"></script>
<script type="module" src="/v1/js/starthds-markdown.js"></script>

Local CSS should define variables after StartHDS, preferably inside a wrapper such as .my-product-theme. Use /v1/css/starthds.css and /v1/js/starthds.js when a legacy/all-in-one aggregate is intentionally desired; the aggregate remains a compatibility stylesheet that includes dashboard styles for older all-in-one consumers.

Data page imports

Data pages use the dashboard CSS bundle for hds-data-table, hds-data-card, hds-data-field-list, hds-data-pagination, and hds-data-bulk-action-bar. Add app CSS/JS only when composing the existing hds-sheet edit pattern.

<link rel="stylesheet" href="/v1/css/starthds-core.css">
<link rel="stylesheet" href="/v1/css/starthds-app.css">
<link rel="stylesheet" href="/v1/css/starthds-dashboard.css">
<script type="module" src="/v1/js/starthds-core.js"></script>
<script type="module" src="/v1/js/starthds-app.js"></script>

Read data docs or open the data example.

Cross-origin contract

CSS uses Content-Type: text/css; charset=utf-8; JS uses Content-Type: application/javascript; charset=utf-8; public assets use Access-Control-Allow-Origin: * and long-lived immutable cache headers.