HTML Design System

CSS/JS библиотека компонентов, вдохновленная современными мобильными паттернами: табличные списки, navigation bar, tab bar, toolbar, action sheet, sheets, user cards, hero headers, segmented control, switches, steppers, sliders, collection view, progress и activity indicators.

Подключение

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="dist/html-design.css">
<script src="dist/html-design.js" defer></script>

Цвета и токены

Table views с иконками

<div class="hds-table">
  <button class="hds-list-item" data-hds-push="#view-settings">
    <span class="hds-list-icon blue"><i class="fa-solid fa-gear"></i></span>
    <span><span class="hds-list-item-title">Настройки</span></span>
    <i class="fa-solid fa-chevron-right hds-chevron"></i>
  </button>
</div>

Панельная навигация

<div class="hds-panel-nav">
  <article class="hds-view is-active" id="home">
    <button data-hds-push="#details">Открыть</button>
  </article>
  <article class="hds-view" id="details">
    <button data-hds-back>Назад</button>
  </article>
</div>

Navigation bar, tab bar, toolbar

Tab bar

<div class="hds-tab-bar" role="tablist">
  <div class="hds-tab-list">
    <button class="hds-tab is-active" aria-selected="true">...</button>
    <button class="hds-tab">...<span class="hds-tab-badge">80</span></button>
  </div>
  <button class="hds-tab-search" aria-label="Поиск">...</button>
</div>

Горизонтальные tab views

<div class="hds-tab-panels with-scroll" data-hds-tab-panels="main-tabs" style="--hds-tab-panel-gap: 1rem">
  <div class="hds-tab-panels-track" data-hds-tab-track>
    <article class="hds-tab-panel is-active" data-hds-tab-panel="home">...</article>
    <article class="hds-tab-panel" data-hds-tab-panel="messages">...</article>
  </div>
</div>
<div class="hds-tab-bar" data-hds-tab-group="main-tabs" role="tablist">
  <div class="hds-tab-list">
    <button class="hds-tab is-active" aria-selected="true" data-hds-tab-target="home">...</button>
    <button class="hds-tab" data-hds-tab-target="messages">...</button>
  </div>
</div>

Action sheet

<button data-hds-action-open="#sheet">Открыть</button>
<div class="hds-action-backdrop" id="sheet" aria-hidden="true">
  <div class="hds-action-sheet" role="dialog" aria-modal="true">
    <div class="hds-action-group">
      <button class="hds-action">Действие</button>
      <button class="hds-action destructive">Удалить</button>
    </div>
    <div class="hds-action-group">
      <button class="hds-action cancel" data-hds-action-close>Отмена</button>
    </div>
  </div>
</div>

Sheets

Sheets закрываются по `data-hds-sheet-close`, Escape, нажатию вне `.hds-sheet` и свайпу вниз.

<button data-hds-sheet-open="#whats-new">What's New</button>
<div class="hds-sheet-backdrop" id="whats-new" aria-hidden="true">
  <section class="hds-sheet" role="dialog" aria-modal="true">
    <span class="hds-sheet-handle" aria-hidden="true"></span>
    <div class="hds-sheet-content">
      <header class="hds-sheet-header">
        <h2 class="hds-sheet-title">What's New</h2>
        <p class="hds-sheet-subtitle">Short release summary.</p>
      </header>
      <div class="hds-whats-new">...</div>
      <button class="hds-button hds-button-filled" data-hds-sheet-close>Continue</button>
    </div>
  </section>
</div>

User card

<article class="hds-user-card hds-user-card-inline">
  <span class="hds-avatar">HD</span>
  <div class="hds-user-card-body">
    <h3 class="hds-user-card-title">HTML Design</h3>
    <p class="hds-user-card-subtitle">profile@example.com</p>
  </div>
</article>

Hero header и inset grouped list

<section class="hds-hero-header">
  <span class="hds-hero-symbol">...</span>
  <h2 class="hds-hero-title">Transfer Your Apps &amp; Data</h2>
  <p class="hds-hero-subtitle">...</p>
</section>
<div class="hds-inset-grouped-list">
  <div class="hds-table">...</div>
</div>

Controls

Controls

Segmented control автоматически добавляет `.hds-segmented-indicator` и анимирует его между выбранными сегментами.

<span class="hds-slider">
  <span class="hds-slider-control">
    <i class="fa-solid fa-volume-low hds-slider-icon"></i>
    <input type="range" value="42">
    <i class="fa-solid fa-volume-high hds-slider-icon"></i>
  </span>
</span>

Collection views

Progress и activity

<div class="hds-progress" style="--progress: 68"><span></span></div>
<span class="hds-activity" aria-label="Загрузка"></span>

JavaScript API

const fragment = document.querySelector("#new-content");
HTMLDesign.init(fragment);

Attribution