Швидкий старт

Trace CSS — легка CSS-бібліотека, що оформлює нативні елементи HTML без класів. Підключіть стилі Trace CSS, щоб форми, кнопки й текст мали узгоджений вигляд у світлій і темній темах.

#Пакетні менеджери

npm install trace-css

pnpm add trace-css

bun add trace-css

yarn add trace-css

Якщо проєкт використовує збирач, імпортуйте стилі у точці входу застосунку:

import 'trace-css';

#Підключення через CDN

На сторінці HTML додайте посилання на стилі у <head>:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/trace.min.css"
/>

#Розміщення стилів на власному сайті

Скопіюйте dist/trace.min.css із встановленого пакета trace-css до каталогу загальнодоступних ресурсів сайту. Якщо файл доступний за адресою /assets/trace.min.css, додайте в <head> таке посилання:

<link rel="stylesheet" href="/assets/trace.min.css" />

#Приклад використання

Trace CSS оформлює ці нативні елементи керування HTML без CSS-класів.

<form>
  <h3>Увійти</h3>
  <p>Введіть ім’я користувача й пароль, щоб продовжити.</p>

  <input
    type="text"
    autocomplete="username"
    placeholder="Ім’я користувача"
    aria-label="Ім’я користувача"
  />

  <input
    type="password"
    autocomplete="current-password"
    placeholder="Пароль"
    aria-label="Пароль"
  />

  <label>
    <input type="checkbox" role="switch" />
    Запам’ятати мене
  </label>

  <div>
    <button type="button">Увійти</button>
  </div>
</form>