What is this?
Yeti is a CSS-first, native, zero-build layout and styling framework for web designers, made by Foundation. It is the successor to Foundation for Sites - version 6 continues on the v6 branch with bug fixes and keeps shipping to npm as foundation-sites 6.x.
Yeti is a CSS-first, native, zero-build layout and styling framework for web designers, made by Foundation. It is the successor to Foundation for Sites - version 6 continues on the v6 branch with bug fixes and keeps shipping to npm as foundation-sites 6.x.Is it a JavaScript framework, or literally just a stylesheet?Literally one stylesheet. Native CSS features - container queries, cascade layers, native nesting, light-dark(), dialog, popover, scroll-snap - do what used to require JavaScript or a preprocessor; there are no web components and no utility classes in it.
Literally one stylesheet. Native CSS features - container queries, cascade layers, native nesting, light-dark(), dialog, popover, scroll-snap - do what used to require JavaScript or a preprocessor; there are no web components and no utility classes in it.How do I add it to a page?Link the unbuilt source stylesheet and write plain HTML - the tokens, reset, and base layer are already in. You can also run the repo's fixtures locally to experiment.
Link the unbuilt source stylesheet and write plain HTML - the tokens, reset, and base layer are already in. You can also run the repo's fixtures locally to experiment.Do I need Sass, Node, or a bundler to use it?No - zero build, ever: no Sass, no Node, no bundler required. It composes into your build if you happen to have one. Node 24+ is only needed to run Yeti's own repo tooling and tests.
No - zero build, ever: no Sass, no Node, no bundler required. It composes into your build if you happen to have one. Node 24+ is only needed to run Yeti's own repo tooling and tests.Can I use it on a production site today?Not yet - it is at 7.0.0-alpha, and class names, attributes, and tokens can still change between commits until the beta. If you build on it now, expect to update your markup.
Not yet - it is at 7.0.0-alpha, and class names, attributes, and tokens can still change between commits until the beta. If you build on it now, expect to update your markup.Which browsers does it work in?It targets Baseline 2025: features that reached Baseline by the end of 2025 are used without guards, and newer ones sit behind @supports with a working fallback. Supporting older browsers is explicitly not a goal.
It targets Baseline 2025: features that reached Baseline by the end of 2025 are used without guards, and newer ones sit behind @supports with a working fallback. Supporting older browsers is explicitly not a goal.Is it free to use in my own projects?Yes - under FSL-1.1-MIT you can use, copy, modify, and redistribute it for any purpose except offering Yeti itself as a competing product. Each release becomes plain MIT two years after it ships.
Yes - under FSL-1.1-MIT you can use, copy, modify, and redistribute it for any purpose except offering Yeti itself as a competing product. Each release becomes plain MIT two years after it ships.How do I build layouts - do I chain utility classes?No utility soup. Yeti provides named, intent-based layout primitives and composed recipes, configured with a few data attributes on plain HTML.
No utility soup. Yeti provides named, intent-based layout primitives and composed recipes, configured with a few data attributes on plain HTML.How customizable is the visual system?There is one token scale: type and space derive from a single base and ratio computed at runtime. Change the ratio and the whole system recomputes.
There is one token scale: type and space derive from a single base and ratio computed at runtime. Change the ratio and the whole system recomputes.Is it accessible out of the box?Yes - accessibility is a default, not an add-on: every component ships with correct focus handling and ARIA, and that is checked in CI.
Yes - accessibility is a default, not an add-on: every component ships with correct focus handling and ARIA, and that is checked in CI.Why does the README mention AI agents?Yeti's markup is meant to be writable by machines: a machine-readable manifest describes every component, and the docs, type hints, and an MCP server are generated from it. The goal is markup both a human can read and an agent can write.
Yeti's markup is meant to be writable by machines: a machine-readable manifest describes every component, and the docs, type hints, and an MCP server are generated from it. The goal is markup both a human can read and an agent can write.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