KonfiguracjaLink do sekcji Konfiguracja
@import "@skribly/ui/plain.css";<link rel="stylesheet" href="/node_modules/@skribly/ui/plain.css" />
<html data-theme="light">Klasy czystego CSS dają wygląd, a nie zachowanie. Używaj prawdziwych elementów, takich jak button, a i label, i pisz ARIA sam tam, gdzie dodałby je komponent: podpowiedzi łącz przez aria-describedby, błędy oznaczaj przez aria-invalid i umieszczaj słowo tonu, takie jak „Błąd:”, w każdym alercie, aby kolor nigdy nie niósł znaczenia sam.
PrzyciskiLink do sekcji Przyciski
<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 do sekcji Link
Questions? Read the guide.
<a class="sk-link" href="/docs">Read the guide</a>PolaLink do sekcji Pola
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>KartaLink do sekcji Karta
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>PlakietkiLink do sekcji Plakietki
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>AlertyLink do sekcji Alerty
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>Spis klasLink do sekcji Spis klas
| Klasa | Modyfikatory | Przykład |
|---|---|---|
| .sk-dialog | .sk-dialog--sm.sk-dialog--lg | Jeszcze nie pokazano |
| .sk-button | .sk-button--outline.sk-button--ghost.sk-button--danger.sk-button--sm.sk-button--lg.sk-button--icon | Przyciski |
| .sk-link | Brak | Link |
| .sk-field | Brak | Pola |
| .sk-label | Brak | Pola |
| .sk-required | Brak | Jeszcze nie pokazano |
| .sk-optional | Brak | Jeszcze nie pokazano |
| .sk-hint | Brak | Pola |
| .sk-input | Brak | Pola |
| .sk-textarea | .sk-textarea--mono | Jeszcze nie pokazano |
| .sk-select | Brak | Jeszcze nie pokazano |
| .sk-fieldset | Brak | Jeszcze nie pokazano |
| .sk-checkbox | Brak | Jeszcze nie pokazano |
| .sk-radio | Brak | Jeszcze nie pokazano |
| .sk-switch | Brak | Jeszcze nie pokazano |
| .sk-error | Brak | Jeszcze nie pokazano |
| .sk-status | .sk-status--ok.sk-status--warn.sk-status--info | Jeszcze nie pokazano |
| .sk-card | .sk-card--link | Karta |
| .sk-badge | .sk-badge--accent.sk-badge--ok.sk-badge--warn.sk-badge--danger.sk-badge--info | Plakietki |
| .sk-alert | .sk-alert--info.sk-alert--ok.sk-alert--warn.sk-alert--danger | Alerty |
| .sk-callout | .sk-callout--info.sk-callout--tip.sk-callout--ok.sk-callout--warn.sk-callout--danger | Jeszcze nie pokazano |
| .sk-table | .sk-table--compact.sk-table--stack | Jeszcze nie pokazano |
| .sk-tabs | .sk-tabs--vertical | Jeszcze nie pokazano |
| .sk-nav | .sk-nav--vertical.sk-nav--dark | Jeszcze nie pokazano |
| .sk-breadcrumbs | Brak | Jeszcze nie pokazano |
| .sk-pagination | .sk-pagination--ends | Jeszcze nie pokazano |
| .sk-kbd | Brak | Jeszcze nie pokazano |
| .sk-divider | .sk-divider--vertical.sk-divider--label | Jeszcze nie pokazano |
| .sk-skip | Brak | Jeszcze nie pokazano |
| .sk-visually | Brak | Jeszcze nie pokazano |
| .sk-tooltip | .sk-tooltip--bottom | Jeszcze nie pokazano |
| .sk-details | Brak | Jeszcze nie pokazano |
| .sk-code | .sk-code--wrap | Jeszcze nie pokazano |
| .sk-prose | .sk-prose--lg | Jeszcze nie pokazano |
| .sk-container | .sk-container--narrow.sk-container--wide | Jeszcze nie pokazano |
| .sk-stack | .sk-stack--sm.sk-stack--lg.sk-stack--xl | Jeszcze nie pokazano |
| .sk-cluster | .sk-cluster--lg.sk-cluster--between.sk-cluster--end | Jeszcze nie pokazano |
| .sk-grid | .sk-grid--2.sk-grid--3.sk-grid--4 | Jeszcze nie pokazano |
| .sk-hero | .sk-hero--display | Jeszcze nie pokazano |
| .sk-spinner | .sk-spinner--sm.sk-spinner--lg | Jeszcze nie pokazano |
| .sk-progress | .sk-progress--sm.sk-progress--ok.sk-progress--warn.sk-progress--danger.sk-progress--info | Jeszcze nie pokazano |
| .sk-avatar | .sk-avatar--xs.sk-avatar--md.sk-avatar--lg.sk-avatar--xl.sk-avatar--square.sk-avatar--empty | Jeszcze nie pokazano |
| .sk-ai | Brak | Jeszcze nie pokazano |