дизайн-система rastrillo

Обзор всего, что даёт дизайн-система. Тема: day. Язык: Русский.

Примитивы интерфейса

Формы, которыми компонент быть не может, потому что они оборачивают тело, известное только вызывающему: карточка раздела, сетка данных, раскрывающееся меню и собственная обвязка каркасов. tokens.css поставляет классы, а разметку пишет приложение. Всё, что ниже, — ровно тот образец, который возвращает ui.Styleguide, и тот же образец тесты ui сверяют с tokens.css.

Ссылки здесь неактивны

Ссылки неактивны, исходник примера приложен.

box

Карточка раздела с отступами и заголовок, который стоит вне её.

Какая карточка какая

У rst-list и rst-card намеренно нет отступов: они держат череду строк, а каждая строка отбивает себя сама. Положите внутрь форму, абзац, полосу ссылок или что угодно, что не строка, — и это отрисуется вплотную к границе; текст, касающийся края, и есть примета. Карточка с отступами для произвольного содержимого — rst-box, а её заголовок стоит перед ней соседним rst-box-head.

Компьютер Телефон Код

<div rst-box-head><h2>Payout</h2><a rst-btn href="/payout/edit">Edit</a></div>
<section rst-box><p>Everything on a screen sits inside boxes.</p><div rst-box-foot>Last updated 2 hours ago</div></section>

dropdown

Меню на details/summary, стоящее за меню переполнения в шапке и за фильтром панели списка, плюс применённый фильтр в виде снимаемой метки.

Компьютер Телефон Код

<details rst-dropdown name="rst-menus">
  <summary>Filter<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span><span class="rst-sr-only">Filter orders: Paid</span></summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">Paid</a>
    <details rst-menu-group name="rst-menus-price" open><summary>Price</summary><div><a href="/orders?price=free">Free</a></div></details>
  </div>
</details>
<span rst-ftok><span rst-ftok-k>Paid</span><a href="/orders" aria-label="Remove filter Paid">✕</a></span>

form-layout

Атрибуты, которые задают форме её ритм и её панель сохранения. Ни один партиал их не выводит — они оборачивают набор полей, который собрал вызывающий.

Компьютер Телефон Код

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">Name</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">Email</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">City</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">ZIP</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>Changes save immediately.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">Cancel</a>
      <button rst-btn="primary" type="submit">Save</button>
    </div>
  </div>
</form>

help

Вопросительный знак в рамке, ведущий к статье справки. Его CSS-подсказка — украшение; ссылка несёт собственную подпись целым предложением.

Компьютер Телефон Код

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Help: orders" data-tip="About orders"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg></a>

list-grid

Настоящий словарь таблиц данных: карточка задаёт колонки один раз, строки только выбирают ячейки.

Экраны складываются по вертикали

Экран — это столбец: page-header, затем section-header и карточка, затем следующий section-header и карточка, в порядке чтения. Горизонтальная раскладка оставлена тем приёмам, которые её несут: rst-box-head, rst-field-row, rst-lbar, ячейки rst-lrow, rst-seg-tabs.

Компьютер Телефон Код

<div rst-card style="--rst-cols: 2fr 110px 32px">
  <div rst-lrow="head"><span>Order</span><span class="rst-m-hide">Status</span><span></span></div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi><small>AB3PX · <bdi>grace@example.com</bdi></small></a>
    <span class="rst-m-hide rst-cell-mut">Paid</span>
    <details rst-row-menu name="rst-menus"><summary aria-label="Actions for order AB3PX"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></summary>
      <div rst-row-menu-panel><a href="/orders/AB3PX">View</a><hr><button type="submit" class="rst-danger">Refund order…</button></div>
    </details>
  </div>
  <p rst-no-match>No orders match. <a href="/orders">Clear filters</a></p>
</div>
<p rst-count-line>Displaying <strong>1–20</strong> of <strong>412</strong></p>

modal

У модального окна есть собственный URL, а не состояние на клиенте: страница под ним помечена inert, панель над ней и обычная ссылка, чтобы закрыть.

Компьютер Телефон Код

<div rst-backdrop inert>
  <div rst-page><h1>Settings</h1></div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">Profile</a>
      <a href="/settings/billing">Billing</a>
      <a href="/settings/notifications">Notifications</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="Close settings">✕</a>
      <h2 id="modal-title">Profile</h2>
      <p>Update the name and photo shown across the account.</p>
    </section>
  </dialog>
</div>

Посмотрите его вживую по тому URL, которому он принадлежит (откроется в новой вкладке).

selbox

Флажок выбора, который строка списка носит в режиме выбора. Его подпись повторяет, что это за строка.

Компьютер Телефон Код

<label rst-selbox><input type="checkbox" aria-label="Select order AB3PX"></label>

shell-sidebar

Собственное обрамление оболочки sidebar, которое уже 800px сворачивается в details.

Компьютер Телефон Код

<div rst-shell-sidebar>
  <a rst-skip href="#main">Skip to content</a>
  <details rst-shell-chrome><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
  <aside rst-shell-rail><a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav><span rst-shell-group>Work</span><a href="/" aria-current="page">Dashboard</a><a href="/reports">Reports</a></nav>
  </aside>
  <main rst-shell-main id="main"><div rst-page>Content.</div></main>
</div>

Откройте демо каркаса с боковой панелью — отдельный просмотр. (откроется в новой вкладке).

shell-topbar

Собственная обвязка каркаса с верхней панелью, в виде разметки. Layout поставляет её как целый шаблон.

Компьютер Телефон Код

<div rst-shell-topbar>
  <a rst-skip href="#main">Skip to content</a>
  <header rst-shell-bar><a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu"><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
    <div rst-shell-tail>
    <nav rst-shell-nav><a href="/" aria-current="page">Home</a><a href="/archive">Archive</a></nav>
    <details rst-dropdown rst-shell-account name="rst-menus"><summary>Account<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
      <div rst-dropdown-menu><a href="/settings">Settings</a></div></details>
    </div>
  </header>
  <main rst-page id="main">Content.</main>
  <footer rst-shell-foot>Made with rastrillo</footer>
</div>

Откройте демо каркаса с верхней панелью — отдельный просмотр для него. (откроется в новой вкладке).

stat-band

Ряд показателей вдоль верха панели.

Компьютер Телефон Код

<div rst-stats>
  <div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>&euro;48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div>
  <div rst-stat><span rst-stat-label>Orders today</span><span rst-stat-num>318</span></div>
  <div rst-stat><span rst-stat-label>Average basket</span><span rst-stat-num>&euro;41.20</span><span rst-stat-delta rst-tone="negative">&minus;3%</span></div>
  <div rst-stat><span rst-stat-label>Refunds</span><span rst-stat-num>7</span></div>
</div>

tblock

Карточка с рамкой, тело которой раскрывается только при включённом переключателе, через :has(). Главное — переключатель; раскрытие лишь удобство отображения.

Компьютер Телефон Код

<div rst-tblock>
  <label rst-tblock-head><input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span><span rst-tblock-title>Email notifications</span><span rst-tblock-desc>Sent for every reply to a thread you're in.</span></span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">Frequency</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="Daily digest">
    </div>
  </div>
</div>