foundation/yeti v7.0.0-alpha.1

Yeti 7.0.0-alpha.1

on GitHub

This is the first release of Yeti, the successor to Foundation for Sites. It is an alpha, published on npm as @foundation/yeti. If you use Foundation 6, nothing changes for you: foundation-sites is a separate package and stays at 6.9.0.

Foundation was built for a web where CSS could not do layout on its own. That web is gone. Yeti starts again on what browsers do natively now, and it is one stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@foundation/yeti@7.0.0-alpha.1/dist/yeti.min.css">

What Yeti is

• Native first. HTML, then CSS, then JavaScript. dialog and popover are real HTML, container queries, cascade layers, light-dark() and anchor positioning do the work Sass and scripts used to do, and JavaScript only adds to what already works.
• No build, ever. No Sass, no Node and no bundler required. A build of your own works too, and you can leave out the parts you don't use.
• Named layouts, not utility classes. stack, cluster, sidebar and grid say what they do, and a few data attributes configure them.
• One system of tokens. Type and space come from one base and one ratio, and color comes from a handful of hues. Change a value and the system recomputes in the browser.
• Light and dark built in. A page follows the reader's setting with nothing to switch on.
• Accessible by default. Focus handling, ARIA and color contrast are tested on every change.
• Readable by agents. A manifest describes every component. The docs, llms.txt and editor completion are generated from it, and a validator checks your built pages against it. Every built stylesheet links the llms.txt for its exact version.

What's in this release

• 17 layouts, 3 recipes, 22 components and 7 utilities
• 304 public tokens and 2 example themes
• 10 optional JavaScript modules, because every component works with no script
• A starter page and theme to copy
• About 20 KB of CSS and 4 KB of JavaScript, minified and gzipped

Install

With npm:

npm install @foundation/yeti@next

Without Node, download the zip below, or follow the install guide to copy the files into your project.

Yeti targets Baseline 2025 browsers. There are no polyfills, so if you need older browsers, Yeti is probably not your tool yet.

What alpha means

Build something with it and tell us what breaks, but don't ship it to a client yet. Class names, attributes and tokens can still change. They freeze at the first beta, and the stability page lists exactly what will be frozen.

If you use Foundation 6

• Nothing breaks. foundation-sites on npm is a separate package and keeps publishing 6.x from the v6 branch, which continues with bug fixes.
• Yeti is not Foundation 6 with new names, so there is no automatic upgrade. The migration guide maps the grid and every version 6 component to its Yeti replacement.
• The announcement has the full story. The package is @foundation/yeti, not the yeti-css it first mentioned.

License

Yeti is released under the Functional Source License 1.1, MIT future license (FSL-1.1-MIT). Use it freely in your own sites and products. The one thing it reserves is offering Yeti itself as a competing product. Each release becomes plain MIT two years after it ships. Foundation for Sites 6 remains MIT.

Tell us what you find

Questions go to Discussions, and bugs and proposals go to Issues. The docs cover every component with live examples.