Быстрый старт

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>