Что это такое?
Yeti — это CSS-first фреймворк для вёрстки и оформления на нативном CSS, без сборки, созданный для веб-дизайнеров командой Foundation. Он приходит на смену Foundation for Sites: шестая версия развивается в ветке v6, получает исправления ошибок и по-прежнему публикуется в npm как foundation-sites 6.x.
Yeti — это CSS-first фреймворк для вёрстки и оформления на нативном CSS, без сборки, созданный для веб-дизайнеров командой Foundation. Он приходит на смену Foundation for Sites: шестая версия развивается в ветке v6, получает исправления ошибок и по-прежнему публикуется в npm как foundation-sites 6.x.Это JavaScript-фреймворк или буквально просто файл стилей?Буквально один файл стилей. Нативные возможности CSS — container queries, cascade layers, native nesting, light-dark(), dialog, popover, scroll-snap — делают то, что раньше требовало JavaScript или препроцессора; внутри нет ни веб-компонентов, ни utility-классов.
Буквально один файл стилей. Нативные возможности CSS — container queries, cascade layers, native nesting, light-dark(), dialog, popover, scroll-snap — делают то, что раньше требовало JavaScript или препроцессора; внутри нет ни веб-компонентов, ни utility-классов.Как подключить его к странице?Подключите исходный файл стилей без сборки и пишите обычный HTML — токены, reset и базовый слой уже внутри. Можно также запустить фикстуры из репозитория локально и поэкспериментировать.
Подключите исходный файл стилей без сборки и пишите обычный HTML — токены, reset и базовый слой уже внутри. Можно также запустить фикстуры из репозитория локально и поэкспериментировать.Нужны ли Sass, Node или сборщик, чтобы им пользоваться?Нет — ноль сборки, всегда: ни Sass, ни Node, ни сборщика не требуется. При этом он без проблем встраивается в вашу сборку, если она у вас есть. Node 24+ нужен только для запуска собственных инструментов и тестов репозитория Yeti.
Нет — ноль сборки, всегда: ни Sass, ни Node, ни сборщика не требуется. При этом он без проблем встраивается в вашу сборку, если она у вас есть. Node 24+ нужен только для запуска собственных инструментов и тестов репозитория Yeti.Можно ли использовать его на рабочем сайте прямо сейчас?Пока нет — версия 7.0.0-alpha, и имена классов, атрибуты и токены могут меняться от коммита к коммиту вплоть до беты. Если строите на нём сейчас, будьте готовы обновлять свою разметку.
Пока нет — версия 7.0.0-alpha, и имена классов, атрибуты и токены могут меняться от коммита к коммиту вплоть до беты. Если строите на нём сейчас, будьте готовы обновлять свою разметку.В каких браузерах он работает?Он нацелен на Baseline 2025: возможности, достигшие Baseline до конца 2025 года, используются напрямую без проверок, а более новые спрятаны за @supports с рабочим запасным вариантом. Поддержка старых браузеров сознательно не входит в цели проекта.
Он нацелен на Baseline 2025: возможности, достигшие Baseline до конца 2025 года, используются напрямую без проверок, а более новые спрятаны за @supports с рабочим запасным вариантом. Поддержка старых браузеров сознательно не входит в цели проекта.Можно ли бесплатно использовать его в своих проектах?Да — по лицензии FSL-1.1-MIT его можно использовать, копировать, изменять и распространять для любых целей, кроме продажи Yeti самого по себе как конкурирующего продукта. Каждый релиз через два года после выхода переходит под обычную MIT.
Да — по лицензии FSL-1.1-MIT его можно использовать, копировать, изменять и распространять для любых целей, кроме продажи Yeti самого по себе как конкурирующего продукта. Каждый релиз через два года после выхода переходит под обычную MIT.Как строить раскладку — нужно соединять utility-классы?Никакой «утилитной каши». Yeti даёт именованные готовые блоки раскладки, построенные вокруг задачи, и составные рецепты, которые настраиваются парой data-атрибутов на обычном HTML.
Никакой «утилитной каши». Yeti даёт именованные готовые блоки раскладки, построенные вокруг задачи, и составные рецепты, которые настраиваются парой data-атрибутов на обычном HTML.Насколько гибко настраивается визуальная система?Есть одна шкала токенов: типографика и отступы выводятся из единой базовой величины и коэффициента, которые вычисляются на этапе выполнения. Поменяйте коэффициент — и вся система пересчитается.
Есть одна шкала токенов: типографика и отступы выводятся из единой базовой величины и коэффициента, которые вычисляются на этапе выполнения. Поменяйте коэффициент — и вся система пересчитается.Он доступный по умолчанию?Да — доступность здесь правило по умолчанию, а не дополнительная опция: каждый компонент поставляется с корректной обработкой фокуса и ARIA, и это проверяется в CI.
Да — доступность здесь правило по умолчанию, а не дополнительная опция: каждый компонент поставляется с корректной обработкой фокуса и ARIA, и это проверяется в CI.Почему в README упоминаются AI-агенты?Разметка Yeti задумана так, чтобы её мог писать и компьютер: машиночитаемый манифест описывает каждый компонент, а документация, подсказки типов и MCP-сервер генерируются из него. Цель — разметка, которую человек может читать, а агент — писать.
Разметка Yeti задумана так, чтобы её мог писать и компьютер: машиночитаемый манифест описывает каждый компонент, а документация, подсказки типов и MCP-сервер генерируются из него. Цель — разметка, которую человек может читать, а агент — писать.What are similar projects?material, bootstrap-table, materialize, Core-Framework, css, material-design-lite, NES.css, tachyons
material, bootstrap-table, materialize, Core-Framework, css, material-design-lite, NES.css, tachyonsWhich topics is it in?primitives, fair-source, foundation, design-tokens, styling, layout, css-framework, website, runtime, responsive, design-system, accessibility
primitives, fair-source, foundation, design-tokens, styling, layout, css-framework, website, runtime, responsive, design-system, accessibility