Foundations
Plain CSS
104 classes for pages with no React and no Tailwind. They match the React components, read only the --sk-* variables, and sit in the components cascade layer so a page’s own CSS wins.
Set upLink to the section Set up
@import "@skribly/ui/plain.css";<link rel="stylesheet" href="/node_modules/@skribly/ui/plain.css" />
<html data-theme="light">Plain classes give the look and not the behaviour. Use real elements, such as button, a and label, and write the ARIA yourself where a component would have added it: link hints with aria-describedby, mark errors with aria-invalid, and put a tone word such as “Error:” in every alert, so colour never carries the meaning alone.
ButtonsLink to the section Buttons
<button class="sk-button">Save</button>
<button class="sk-button sk-button--outline">Cancel</button>
<button class="sk-button sk-button--ghost">Skip</button>
<button class="sk-button sk-button--danger">Delete</button>
<button class="sk-button sk-button--sm">Small</button>
<button class="sk-button sk-button--lg">Large</button>
<button class="sk-button" disabled>Disabled</button>LinkLink to the section Link
Questions? Read the guide.
<a class="sk-link" href="/docs">Read the guide</a>FieldsLink to the section Fields
Shown to everyone in the workspace.
Error: enter an email address like name@example.com.
<div class="sk-field">
<label class="sk-label" for="name">Project name</label>
<input class="sk-input" id="name" aria-describedby="name-hint" />
<span class="sk-hint" id="name-hint">Shown to everyone in the workspace.</span>
</div>
<input class="sk-input" aria-invalid="true" aria-describedby="email-error" />
<span class="sk-hint" id="email-error">Error: enter an email address like name@example.com.</span>CardLink to the section Card
Weekly report
12 tasks done, 3 waiting for review.
<div class="sk-card">
<h3>Weekly report</h3>
<p>12 tasks done, 3 waiting for review.</p>
</div>BadgesLink to the section Badges
DraftNewDoneWaitingFailedBeta
<span class="sk-badge">Draft</span>
<span class="sk-badge sk-badge--accent">New</span>
<span class="sk-badge sk-badge--ok">Done</span>
<span class="sk-badge sk-badge--warn">Waiting</span>
<span class="sk-badge sk-badge--danger">Failed</span>
<span class="sk-badge sk-badge--info">Beta</span>AlertsLink to the section Alerts
Information: Imports run at night.
Success: Invitation sent.
Warning: Your draft is kept for 7 days.
Error: The form was not sent.
<div class="sk-alert" role="status"><strong>Information:</strong> Imports run at night.</div>
<div class="sk-alert sk-alert--ok" role="status"><strong>Success:</strong> Invitation sent.</div>
<div class="sk-alert sk-alert--warn"><strong>Warning:</strong> Your draft is kept for 7 days.</div>
<div class="sk-alert sk-alert--danger" role="alert"><strong>Error:</strong> The form was not sent.</div>Class referenceLink to the section Class reference
| Class | Modifiers | Example |
|---|---|---|
| .sk-dialog | .sk-dialog--sm.sk-dialog--lg | Not shown yet |
| .sk-button | .sk-button--outline.sk-button--ghost.sk-button--danger.sk-button--sm.sk-button--lg.sk-button--icon | Buttons |
| .sk-link | None | Link |
| .sk-field | None | Fields |
| .sk-label | None | Fields |
| .sk-required | None | Not shown yet |
| .sk-optional | None | Not shown yet |
| .sk-hint | None | Fields |
| .sk-input | None | Fields |
| .sk-textarea | .sk-textarea--mono | Not shown yet |
| .sk-select | None | Not shown yet |
| .sk-fieldset | None | Not shown yet |
| .sk-checkbox | None | Not shown yet |
| .sk-radio | None | Not shown yet |
| .sk-switch | None | Not shown yet |
| .sk-error | None | Not shown yet |
| .sk-status | .sk-status--ok.sk-status--warn.sk-status--info | Not shown yet |
| .sk-card | .sk-card--link | Card |
| .sk-badge | .sk-badge--accent.sk-badge--ok.sk-badge--warn.sk-badge--danger.sk-badge--info | Badges |
| .sk-alert | .sk-alert--info.sk-alert--ok.sk-alert--warn.sk-alert--danger | Alerts |
| .sk-callout | .sk-callout--info.sk-callout--tip.sk-callout--ok.sk-callout--warn.sk-callout--danger | Not shown yet |
| .sk-table | .sk-table--compact.sk-table--stack | Not shown yet |
| .sk-tabs | .sk-tabs--vertical | Not shown yet |
| .sk-nav | .sk-nav--vertical.sk-nav--dark | Not shown yet |
| .sk-breadcrumbs | None | Not shown yet |
| .sk-pagination | None | Not shown yet |
| .sk-kbd | None | Not shown yet |
| .sk-divider | .sk-divider--vertical.sk-divider--label | Not shown yet |
| .sk-skip | None | Not shown yet |
| .sk-visually | None | Not shown yet |
| .sk-tooltip | .sk-tooltip--bottom | Not shown yet |
| .sk-details | None | Not shown yet |
| .sk-code | .sk-code--wrap | Not shown yet |
| .sk-prose | .sk-prose--lg | Not shown yet |
| .sk-container | .sk-container--narrow.sk-container--wide | Not shown yet |
| .sk-stack | .sk-stack--sm.sk-stack--lg.sk-stack--xl | Not shown yet |
| .sk-cluster | .sk-cluster--lg.sk-cluster--between.sk-cluster--end | Not shown yet |
| .sk-grid | .sk-grid--2.sk-grid--3.sk-grid--4 | Not shown yet |
| .sk-hero | .sk-hero--display | Not shown yet |
| .sk-spinner | .sk-spinner--sm.sk-spinner--lg | Not shown yet |
| .sk-progress | .sk-progress--sm.sk-progress--ok.sk-progress--warn.sk-progress--danger.sk-progress--info | Not shown yet |
| .sk-avatar | .sk-avatar--xs.sk-avatar--md.sk-avatar--lg.sk-avatar--xl.sk-avatar--square.sk-avatar--empty | Not shown yet |