yeti README

The project's README from github.com/foundation/yeti. As one markdown file: README.md.

Yeti

A CSS-first, native, zero-build layout and styling framework for web designers. By Foundation.

Foundation for Sites 6 users: this repository is now Yeti, the successor to Foundation for Sites. Version 6 continues on the v6 branch with bug fixes, and foundation-sites on npm keeps publishing 6.x from it. Read the announcement for the full story.

Status

Yeti is in development at 7.0.0-alpha. Nothing here is stable yet: class names, attributes, and tokens can change between commits until the beta. Follow the announcement issue for milestones.

What Yeti is

Yeti gives a designer the structure and the visual system to build a coherent site fast, with markup a human can read and an agent can write. It is one stylesheet:

<link rel="stylesheet" href="/css/yeti.css">

What Yeti is not

Not a web component library. Not a utility framework. Not a build-time system. No polyfills. No full-featured slider in core. Nothing that exists only to work around CSS that no longer needs working around.

Browser support

Yeti targets Baseline 2025. Anything that reached Baseline by the end of 2025 is used without guards; newer features sit behind @supports with a working fallback. If you need to support browsers older than that, Yeti is probably not your tool.

Try it today

The tokens, reset, and base layer are in. Link the unbuilt source and write plain HTML:

<link rel="stylesheet" href="src/yeti.css">

Or run the fixtures locally:

git clone https://github.com/foundation/yeti
cd yeti
npm ci
npx playwright install
npm test
npx playwright test --ui  # browse the fixtures under test/browser/fixtures/

Contributing

See CONTRIBUTING.md. Questions go to Discussions; bugs and proposals go to Issues using the templates.

License

Yeti is released under the Functional Source License 1.1, MIT future license (FSL-1.1-MIT). You can use, copy, modify, and redistribute it for any purpose except offering it as a competing product; each release becomes plain MIT two years after it ships. Foundation for Sites 6 remains MIT.

yeti (foundation/yeti)

Searching Database…

29.8K ·GitHub
Yeti
这是什么？Yeti 是由 Foundation 出品的一个纯 CSS、原生、零构建的布局与样式框架，面向网页设计师。它是 Foundation for Sites 的后继者——6.x 版本在 v6 分支上继续修复 bug，并仍以 foundation-sites 6.x 的名义发布到 npm。
它是一个 JavaScript 框架，还是真的就只是一个样式表？真的就只有一个样式表。以前需要 JavaScript 或预处理器才能实现的功能，现在靠原生 CSS 特性就能完成——容器查询、级联层（cascade layers）、原生嵌套、light-dark()、dialog、popover、scroll-snap；里面既没有 Web 组件，也没有工具类。
怎么把它加到页面上？链接未经构建的源码样式表，然后直接写普通 HTML——设计令牌、重置样式和基础层都已经包含在内。你也可以在本地运行仓库里的 fixtures 来做试验。
用它需要 Sass、Node 或打包工具吗？不需要——永远零构建：不需要 Sass，不需要 Node，也不需要打包工具。如果你本身有构建流程，它也可以融入进去。只有运行 Yeti 自己的仓库工具和测试时才需要 Node 24+。
现在能直接用在正式网站上吗？还不行——它目前处于 7.0.0-alpha 阶段，在 beta 之前，类名、属性和令牌仍可能随提交而变动。如果现在就基于它开发，请做好日后更新标记的准备。
支持哪些浏览器？它以 Baseline 2025 为目标：到 2025 年底已达到 Baseline 的特性可以直接使用、不加防护；更新的特性则用 @supports 包起来并提供可用的降级方案。项目明确不支持照顾更老的浏览器。
在我自己的项目里免费使用吗？是的——根据 FSL-1.1-MIT 许可证，你可以出于任何目的使用、复制、修改和再分发它，唯一不能做的是把 Yeti 本身当作竞争产品来提供。每个版本发布两年后会自动转为普通的 MIT 许可证。
怎么搭布局——是靠堆工具类吗？没有工具类堆砌那一套。Yeti 提供有命名、按意图设计的布局原语和组合好的配方，只需在普通 HTML 上加几个 data 属性就能配置。
视觉系统的可定制程度怎么样？只有一套令牌比例尺：字体和间距都由一个基准值和一个比例值在运行时计算得出。改一下比例值，整个系统就会重新计算。
开箱即用就符合无障碍要求吗？是的——无障碍是默认标配，而不是附加项：每个组件都自带正确的焦点处理和 ARIA，并且这一点在 CI 中有检查。
README 为什么会提到 AI 智能体？Yeti 的标记本来就被设计成可以让机器来写：一份机器可读的清单描述了每个组件，文档、类型提示和一个 MCP 服务器都是从它生成的。目标是写出的标记既能让人读懂，也能让智能体写出来。
What are similar projects?material, bootstrap-table, materialize, Core-Framework, css, material-design-lite, NES.css, tachyons
Which topics is it in?primitives, fair-source, foundation, design-tokens, styling, layout, css-framework, website, runtime, responsive, design-system, accessibility
Creator
foundation
Size
136.2 MB
Stars
29.8K
Updated
CommitOct 14Releasev6.9.0Sep 27
Age
15y
Commits · 90 Days