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

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

Дизайн-система Rastrillo задумана как стартовый каркас для любого приложения: единообразный, отточенный и доступный интерфейс без зависимости от JavaScript или почти без неё, на многих языках, на чистом современном HTML и CSS. Она сделана так, чтобы ею было приятно пользоваться с помощью LLM и без неё, и чтобы её легко было пересобрать под себя.

Демоприложение

Работающее приложение, собранное только из этой системы: сводка, список, одна открытая запись. У каждого свой адрес. Без JavaScript.

Предпросмотр

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

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

Куда дальше

• Начало работыПодробности о таблицах стилей и скриптах, которые поставляются с дизайн-системой Rastrillo.
• ТокеныВсе пользовательские свойства, из которых собрана система: цвет и шрифт темы, а также шкалы размера, отступов и скругления.
• ИконкиКаждый slug иконки — в том размере, в каком его рисуют компоненты, с вызовом для копирования и с именем на lucide.dev.
• Экран спискаОбычный экран списка: заголовок, панель инструментов и строки, работающие и на десктопе, и на телефоне.
• ОтображениеМелкие части словаря, из которых собирается экран: статус, личность, прогресс и единственная форма предупреждения.
• ФормаКаждый элемент управления в тех состояниях, в которые его ставит настоящая форма. Все они лежат в rst-box с отступами, потому что именно это предполагают эти партиалы.
• Дата и времяЧетыре поля, которые улучшает datetime.js: под каждым остаётся встроенный элемент ввода, так что читатель без скриптов получает простой элемент управления, а не сломанный.
• МаршрутЧасти, которые сами по себе целый ответ, а не кусок ответа.
• Примитивы интерфейсаФормы, которыми компонент быть не может, потому что они оборачивают тело, известное только вызывающему: карточки, сетки данных, меню и собственная обвязка каркасов.
• Даты, числа и именаКак показывать даты, числа, деньги, имена и адреса — и какие из них путают друг с другом.
• ЭкраныПримеры экранов, собранных на этой дизайн-системе. Их можно взять как заготовки для своих приложений.
• ОболочкиКаркасы страницы, которые умеет создавать rastrillo new. Каждый открывается во всю ширину.