Repolode
Предложить
vladocar

vladocar/Sumi.css

Минималистичный CSS-фреймворк для оформления семантического HTML почти без классов: один файл, сборка не нужна.

Открыть на GitHubСайт
Звёзды
128
Форки
0
Открытые issues
2
Последний коммит
вчера

Что это?

Sumi.css — CSS-фреймворк, который оформляет HTML без классов: стили для заголовков, форм, таблиц, карточек, аккордеонов, модальных окон и навигации применяются к обычным HTML-элементам, а классы нужны только для точечной настройки. Фреймворк поставляется одним файлом размером около 6,7 КБ после минификации и gzip-сжатия, не требует JavaScript и зависимостей; его можно скачать или подключить через CDN jsDelivr.

Фреймворк поддерживает светлую и тёмную темы, автоматически выбирая режим по системным настройкам. Атрибут data-theme позволяет принудительно включить нужную тему. Цвета, шрифты, размеры и радиусы заданы CSS custom properties с префиксом --s-, поэтому темы можно настраивать глобально или для отдельных элементов. Стили элементов имеют нулевую специфичность, поэтому их легко переопределить собственным CSS без !important.

Кроме того, в Sumi.css есть классы для сетки и flex-раскладки, состояния валидации форм через aria-invalid, индикаторы загрузки, подсказки и адаптивная шкала размеров шрифта. В проекте есть справочник компонентов и пошаговое руководство; фреймворк рассчитан на актуальные версии Chrome, Edge, Firefox и Safari.

Ключевые возможности

  • 01Оформляет обычные семантические HTML-элементы без обязательного использования классов.
  • 02Один CSS-файл без JavaScript и зависимостей.
  • 03Автоматически переключает светлую и тёмную темы; атрибут data-theme позволяет задать тему вручную.
  • 04Настройка темы через CSS custom properties с префиксом --s-.
  • 05Стили элементов с нулевой специфичностью легко переопределить.
  • 06Классы для сетки, flex-раскладки и контейнеров.
  • 07Поддержка доступности: индикаторы фокуса, состояния ARIA и настройка анимации с учётом предпочтения уменьшения движения.

Сценарии использования

  • Быстро оформить статический сайт, страницу документации или личную главную без сборки проекта.
  • Создать прототип внутреннего инструмента с большим количеством форм или таблиц, почти не меняя разметку.
  • Добавить единый тематический стиль в проект с уже написанным вручную HTML.
  • Создавать собственные компоненты на основе общих цветовых и интервальных токенов.

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

  1. 1

    Скачайте sumi.min.css в свой проект

  2. 2

    Подключите таблицу стилей в head HTML-документа или загрузите её с CDN jsDelivr

Что важно знать

  • Используются современные возможности CSS, поэтому в старых браузерах цвета при наведении и фокусе будут более простыми.

Темы

#css#css-framework#classless#minimalist#dark-mode#theming#responsive-design#css-grid

Частые вопросы

Что такое Sumi.css?
Минималистичный CSS-фреймворк для оформления семантического HTML почти без классов: один файл, сборка не нужна. Sumi.css — CSS-фреймворк, который оформляет HTML без классов: стили для заголовков, форм, таблиц, карточек, аккордеонов, модальных окон и навигации применяются к обычным HTML-элементам, а классы нужны только для точечной настройки. Фреймворк поставляется одним файлом размером около 6,7 КБ после минификации и gzip-сжатия, не требует JavaScript и зависимостей; его можно скачать или подключить через CDN jsDelivr.
Sumi.css можно использовать бесплатно? Какая у него лицензия?
Sumi.css распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
Sumi.css всё ещё поддерживается?
Активно поддерживается. Последний коммит в Sumi.css — 21 окт. 2026 г..
Для чего можно использовать Sumi.css?
Быстро оформить статический сайт, страницу документации или личную главную без сборки проекта. Создать прототип внутреннего инструмента с большим количеством форм или таблиц, почти не меняя разметку. Добавить единый тематический стиль в проект с уже написанным вручную HTML. Создавать собственные компоненты на основе общих цветовых и интервальных токенов.
Как установить Sumi.css?
Скачайте sumi.min.css в свой проект Подключите таблицу стилей в head HTML-документа или загрузите её с CDN jsDelivr
Где скачать Sumi.css?
Исходный код и инструкции по установке — на GitHub: https://github.com/vladocar/Sumi.css

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты