ZeroUI

ZEROUI / ДОКУМЕНТАЦИЯ / 01

Сначала структура.
Оформление — за системой.

Небольшая CSS-библиотека для вдумчивых текстов и функциональных интерфейсов. ZeroUI отвечает за типографику и компоновку, а браузер и операционная система — за элементы управления.

Начать ↓ Читать пример статьи ↗

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

Скопируйте папки css и js в проект и подключите файлы на странице:

Локальные файлы 
<link rel="stylesheet" href="css/zeroui.css">
<script src="js/zeroui.js" defer></script>
Подключить с GitLab Pages

Готовая сборка CSS и общий скрипт доступны по этим адресам:

<link rel="stylesheet" href="https://zeroui-b31589.gitlab.io/zeroui.css">
<script src="https://zeroui-b31589.gitlab.io/js/zeroui.js" defer></script>

Исходники и настройка собственной сборки

Общий скрипт нужен для автоматического оглавления, просмотра изображений, интерактивных вкладок и возврата из Google Translate. Формы, раскрывающиеся блоки, обычные модальные окна и слайдер работают без него. При сборке CSS объединяется, а готовый zeroui.js копируется в dist.

Свой состав сборки

Выберите CSS-модули в массиве zeroui.files в package.json. Уберите ненужные компоненты и выполните npm run build. Порядок файлов в массиве определяет порядок стилей; foundation.css должен идти первым.

Результат — два готовых файла: dist/zeroui.css без импортов и dist/zeroui.js.

ZEROUI / ОСНОВА

Основа

Системные цвета автоматически следуют теме браузера. Шкала отступов: 3, 6, 12, 24 и 48 pt. Для текста используется system-ui, для кода — ui-monospace.

Системное оформление

Canvas и CanvasText адаптируются к окружению.

Пять интервалов

Единая небольшая шкала применяется к внешним и внутренним отступам и промежуткам.

Показать пример кода 
<div class="grid">
    <div class="col-md-6">
        <h3>Системное оформление</h3>
        <p>Canvas и CanvasText адаптируются к окружению.</p>
    </div>
    <div class="col-md-6">
        <h3>Пять интервалов</h3>
        <p>Единая небольшая шкала применяется к внешним и внутренним отступам и промежуткам.</p>
    </div>
</div>

ZEROUI / ТИПОГРАФИКА

Типографика

Стандартные элементы создают иерархию без классов. Заголовки расположены рядом со своим содержимым; списки, цитаты и код сохраняют семантику.

Исследование наблюдений

Исследовательская заметка · 2026

Данные интерпретируются в контексте. Внимательный читатель увидит важные фрагменты, старые утверждения и исправления.

Методы и обозначения

Вода — H2O; площадь можно записать как м2. СО обозначает разброс.

Наблюдения

  • Первое наблюдение
    • Вложенное уточнение.
  • Второе наблюдение
  1. Соберите данные.
  2. Проверьте результат.
Выборка
Определённая совокупность наблюдений.

«Ценность результата зависит и от того, как он был получен».

Исследовательский журнал

Используйте mean(x), нажмите Enter, проверьте Готово. короткая цитата остаётся внутри строки.

Четвёртый уровень

Пятый уровень
Шестой уровень

Содержимым рисунка может быть текст, изображение или таблица.

Рисунок 1. Семантическая подпись.
Показать пример кода 
<article>
    <h1>Исследование наблюдений</h1>
    <p><small>Исследовательская заметка · 2026</small></p>
    <p><strong>Данные</strong> интерпретируются в контексте. <em>Внимательный</em> читатель увидит <mark>важные фрагменты</mark>, <del>старые утверждения</del> и <ins>исправления</ins>.</p>
    <h2>Методы и обозначения</h2>
    <p>Вода — H<sub>2</sub>O; площадь можно записать как м<sup>2</sup>. <abbr title="Стандартное отклонение">СО</abbr> обозначает разброс.</p>
    <h3>Наблюдения</h3>
    <ul>
        <li>Первое наблюдение
            <ul>
                <li>Вложенное уточнение.</li>
            </ul>
        </li>
        <li>Второе наблюдение</li>
    </ul>
    <ol>
        <li>Соберите данные.</li>
        <li>Проверьте результат.</li>
    </ol>
    <dl>
        <dt>Выборка</dt>
        <dd>Определённая совокупность наблюдений.</dd>
    </dl>
    <blockquote>
        <p>«Ценность результата зависит и от того, как он был получен».</p>
        <cite>Исследовательский журнал</cite>
    </blockquote>
    <p>Используйте <code>mean(x)</code>, нажмите <kbd>Enter</kbd>, проверьте <samp>Готово</samp>. <q>короткая цитата</q> остаётся внутри строки.</p>
    <h4>Четвёртый уровень</h4>
    <h5>Пятый уровень</h5>
    <h6>Шестой уровень</h6>
    <figure>
        <p>Содержимым рисунка может быть текст, изображение или таблица.</p>
        <figcaption>Рисунок 1. Семантическая подпись.</figcaption>
    </figure>
</article>

Нумерация заголовков и списков

Класс numbered-headings включает иерархическую нумерацию заголовков h2–h4 внутри контейнера. Заголовки остаются обычными HTML-элементами.

Метод

Сначала определяем условия исследования.

Выборка

Затем описываем данные.

Критерии

Указываем основания отбора.

Результаты

Представляем наблюдения.

Показать пример кода 
<article class="numbered-headings">
    <h2>Метод</h2>
    <p>Сначала определяем условия исследования.</p>
    <h3>Выборка</h3>
    <p>Затем описываем данные.</p>
    <h4>Критерии</h4>
    <p>Указываем основания отбора.</p>
    <h2>Результаты</h2>
    <p>Представляем наблюдения.</p>
</article>

Класс numbered-list нумерует вложенные списки ul внутри контейнера. Нативный details раскрывает оглавление без JavaScript; именно так устроено оглавление этой страницы.

Содержание исследования
  • Метод
    • Выборка
    • Измерения
  • Результаты
Показать пример кода 
<details class="numbered-list" open>
    <summary>Содержание исследования</summary>
    <ul>
        <li>
            Метод
            <ul>
                <li>Выборка</li>
                <li>Измерения</li>
            </ul>
        </li>
        <li>Результаты</li>
    </ul>
</details>

ZEROUI / КОМПОНОВКА

Компоновка

По умолчанию элементы 12-колоночной сетки занимают всю ширину. Классы колонок действуют на всех размерах или начиная с md (640 px) и lg (1024 px). Сетки можно вкладывать.

8 колонок с md
4 колонки с md
6 при md / 4 при lg
6 при md / 8 при lg
Показать пример кода 
<div class="grid">
    <div class="card col-md-8">8 колонок с md</div>
    <div class="card col-md-4">4 колонки с md</div>
    <div class="card col-md-6 col-lg-4">6 при md / 4 при lg</div>
    <div class="card col-md-6 col-lg-8">6 при md / 8 при lg</div>
</div>

ZEROUI / ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ

Вспомогательные классы

Для отступов используются m, mt, mb, ms, me, p, pt, pb, ps, pe и gap с уровнями 1–5. Логические начало и конец учитывают направление письма. Выравнивание: text-start, text-center, text-end, items-start, items-center, items-end, justify-start, justify-center, justify-between и justify-end. Отображение: d-block, d-flex, d-grid, d-none и flex-wrap. Ширина: w-full и w-auto. Класс visually-hidden скрывает текст только визуально, сохраняя его для программ чтения с экрана.

Внутренний отступ 3
Текст по центру
Видимая ссылка
Показать пример кода 
<div class="group gap-3 justify-between">
    <div class="card p-3">Внутренний отступ 3</div>
    <div class="card p-3 text-center">Текст по центру</div>
    <a href="#helpers">Видимая ссылка<span class="visually-hidden"> к вспомогательным классам</span></a>
</div>

ZEROUI / КОМПОНЕНТЫ

Компоненты

Карточки, навигация, раскрывающиеся блоки, формы и таблицы используют обычный HTML. Элементы управления сохраняют системный вид; навигационные вкладки используют ссылки. Пример переключаемых панелей с клавиатурным управлением находится в приложении.

Полевые заметки

Карточка объединяет связанную информацию, не меняя её смысл.

Читать статью →

Действия

Посмотреть примеры
Дополнительная информация

Нативное раскрытие работает без JavaScript.

Вложенный блок

Браузер сохраняет собственный маркер раскрытия.

Показать пример кода 
<nav class="tabs" aria-label="Пример навигации">
    <a href="#components" aria-current="page">Обзор</a>
    <a href="#forms">Формы</a>
    <a href="#tables">Таблицы</a>
</nav>
<div class="grid">
    <section class="card col-md-6">
        <h3>Полевые заметки</h3>
        <p>Карточка объединяет связанную информацию, не меняя её смысл.</p>
        <a href="examples/article.html">Читать статью →</a>
    </section>
    <section class="card col-md-6">
        <h3>Действия</h3>
        <div class="toolbar" aria-label="Действия с документом">
            <button type="button">Сохранить</button>
            <button type="button">Экспорт</button>
            <a href="#examples">Посмотреть примеры</a>
        </div>
    </section>
</div>
<details class="mt-3">
    <summary>Дополнительная информация</summary>
    <p>Нативное раскрытие работает без JavaScript.</p>
    <details>
        <summary>Вложенный блок</summary>
        <p>Браузер сохраняет собственный маркер раскрытия.</p>
    </details>
</details>

Слайдер и галерея

Слайдер без JavaScript

Прокручивайте горизонтально жестом, трекпадом или полосой прокрутки. Область доступна с клавиатуры. Размер sm, md или lg задаёт высоту 96, 192 или 288 pt. По умолчанию используется md.

Маленький

Наблюдение A: три точки Наблюдение Б: пять точек
Показать пример кода 
<div class="slider slider-sm" tabindex="0" role="region" aria-label="Маленький слайдер">
    <img src="examples/observation-a.svg" alt="Наблюдение A: три точки">
    <img src="examples/observation-b.svg" alt="Наблюдение Б: пять точек">
</div>

Средний

Наблюдение A: три точки Наблюдение Б: пять точек
Показать пример кода 
<div class="slider slider-md" tabindex="0" role="region" aria-label="Средний слайдер">
    <img src="examples/observation-a.svg" alt="Наблюдение A: три точки">
    <img src="examples/observation-b.svg" alt="Наблюдение Б: пять точек">
</div>

Большой

Наблюдение A: три точки Наблюдение Б: пять точек
Показать пример кода 
<div class="slider slider-lg" tabindex="0" role="region" aria-label="Большой слайдер">
    <img src="examples/observation-a.svg" alt="Наблюдение A: три точки">
    <img src="examples/observation-b.svg" alt="Наблюдение Б: пять точек">
</div>

Соотношение сторон всех слайдов задаётся переменной --slider-ratio на обёртке. По умолчанию calc(16 / 9); для другого формата укажите, например, calc(4 / 3). Изображения заполняют кадр с обрезкой (cover). Обёртка остаётся в ширине страницы, а крупные слайды прокручиваются внутри неё.

Галерея

Галерея располагает изображения адаптивной сеткой и переносит их на следующую строку. Подписи оформляются обычными figure и figcaption. Сетка не требует JavaScript. Метка data-modal добавляет просмотр изображения: небольшой общий скрипт подставляет его в диалог. Enter и пробел открывают изображение с клавиатуры.

Три точки на горизонтальной оси
Наблюдение A
Пять точек на горизонтальной оси
Наблюдение Б
Показать пример кода 
<div class="gallery">
    <figure>
        <img src="examples/observation-a.svg" alt="Три точки на горизонтальной оси" data-modal="gallery-dialog" role="button" tabindex="0">
        <figcaption>Наблюдение A</figcaption>
    </figure>
    <figure>
        <img src="examples/observation-b.svg" alt="Пять точек на горизонтальной оси" data-modal="gallery-dialog" role="button" tabindex="0">
        <figcaption>Наблюдение Б</figcaption>
    </figure>
</div>

ZEROUI / ФОРМЫ

Формы

Подписи, группы полей и нативные элементы управления задают структуру. Их фон, границы, тени и состояния не переопределяются.

Параметры исследования




Формат:
70%
80%
Показать пример кода 
<form action="#forms">
    <fieldset>
        <legend>Параметры исследования</legend>
        <div class="stack gap-2">
            <div>
                <label for="name">Имя</label><br>
                <input id="name" name="name" type="text" autocomplete="name">
            </div>
            <div>
                <label for="email">Электронная почта</label><br>
                <input id="email" name="email" type="email" autocomplete="email">
            </div>
            <div>
                <label for="discipline">Область исследования</label><br>
                <select id="discipline" name="discipline">
                    <option>Гуманитарные науки</option>
                    <option>Естественные науки</option>
                </select>
            </div>
            <div>
                <label for="notes">Примечания</label><br>
                <textarea id="notes" name="notes" rows="3"></textarea>
            </div>
            <label><input type="checkbox" name="updates"> Получать обновления</label>
            <div>
                <span>Формат:</span>
                <label><input type="radio" name="format" value="html" checked> HTML</label>
                <label><input type="radio" name="format" value="pdf"> PDF</label>
            </div>
            <div><label for="progress">Прогресс</label> <progress id="progress" value="70" max="100">70%</progress></div>
            <div><label for="quality">Качество</label> <meter id="quality" value="0.8">80%</meter></div>
            <div><button type="submit">Применить параметры</button></div>
        </div>
    </fieldset>
</form>

ZEROUI / ТАБЛИЦЫ

Таблицы

Подписи и заголовки с областью действия делают данные понятнее. Оборачивайте широкие таблицы, чтобы на маленьких экранах прокручивалась только таблица.

Таблица 1. Наблюдения по группам
ГруппаВыборкаСреднееДиапазон
A2412.48–17
B3214.19–19
Показать пример кода 
<div class="table-scroll">
    <table>
        <caption>Таблица 1. Наблюдения по группам</caption>
        <thead>
            <tr><th scope="col">Группа</th><th scope="col">Выборка</th><th scope="col">Среднее</th><th scope="col">Диапазон</th></tr>
        </thead>
        <tbody>
            <tr><th scope="row">A</th><td>24</td><td>12.4</td><td>8–17</td></tr>
            <tr><th scope="row">B</th><td>32</td><td>14.1</td><td>9–19</td></tr>
        </tbody>
    </table>
</div>

Печать

Правила print.css автоматически применяются при печати: делают текст компактнее, стараются сохранить блоки целыми и скрывают навигацию, шапки, раскрывающиеся блоки, фреймы и диалоги. Специальный класс не требуется. Класс noprint позволяет исключить отдельную панель или кнопку из печати.

Откройте предварительный просмотр печати в браузере, чтобы увидеть результат.

Показать пример кода 
<link rel="stylesheet" href="css/print.css">

Примеры

Два полноценных примера используют ту же таблицу стилей, что и документация.

ПРИМЕР 01 / ПУБЛИКАЦИЯ

Статья о разработке

Заметка о разработке ZeroUI с таблицей, цитатой и примечаниями.

Читать статью →

ПРИМЕР 02 / РАБОЧЕЕ ПРОСТРАНСТВО

Исследовательское приложение

Навигация, элементы управления, карточки и таблица в одном интерфейсе.

Открыть приложение →