燕麦 – 超轻量级、语义化、零依赖的HTML UI组件库

燕麦 – 超轻量级、语义化、零依赖的HTML UI组件库
Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library

## 燕麦：轻量级和语义化的UI库燕麦是一个超轻量级（6KB CSS，2.2KB JS）的UI组件库，旨在实现简洁性和长期稳定性。它优先考虑**语义化HTML**和**零依赖**，避免了现代JavaScript框架的臃肿和复杂性。燕麦不依赖于类，而是直接样式化原生HTML元素和属性，鼓励最佳实践和更清晰的标记。动态组件使用WebComponents，并使用最少的JavaScript。通过语义化HTML和ARIA角色内置可访问性，确保正确的键盘导航。通过CSS变量可以轻松进行自定义，包括使用`data-theme="dark"`激活的捆绑深色主题。燕麦的创建是对复杂JavaScript生态系统 frustations 的回应，旨在为寻求简单且易于维护工具包的开发人员提供可靠、基于标准的UI解决方案。它的美学灵感来自shadcn。

## 燕麦：轻量级UI库总结燕麦是一个新的、超轻量级的UI库，旨在实现简洁和语义化的HTML。它没有依赖，专注于利用原生HTML元素进行样式设置，最大限度地减少臃肿并提高可访问性。该项目由一家大型印度经纪公司的CTO创建，强调“无类CSS”方法，但它确实利用了数据属性和一些CSS类。讨论中既有对它极简主义理念的赞扬，也有对它在语义化与基本元素实现方面不一致性的担忧。一些用户赞赏其中包含的原生侧边栏组件，这是类似库中经常缺失的功能。与Bootstrap、Bulma和PicoCSS等项目进行了比较，一些用户希望有更广泛的主题选项。人们也对潜在的机器人活动夸大正面评论表示担忧。尽管如此，许多人对燕麦能够提供一个精简、基于标准的替代方案，以取代更重量级的前端框架感到兴奋。

Semantic, minimal, zero dependencies. ~8KB CSS and JS.

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.

Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.

Light like an oat flake

6KB CSS, 2.2KB JS, minified + gzipped.

That's it.

Zero dependencies

Fully-standalone with no dependencies on any JS or CSS frameworks or libraries. No Node.js ecosystem garbage or bloat.

Semantic HTML

Native elements like <button>, <input>, <dialog> and semantic attributes like role="button" are styled directly. No classes.

Accessibility

Semantic HTML and ARIA roles are used (and forced in many places) throughout. Proper keyboard navigation support for all components and elements.

Easy customization

Easily customize the overall theme by overriding a handful of CSS variables. data-theme="dark" on body automatically uses the bundled dark theme.

This was made after the unending frustration with the over-engineered bloat, complexity, and dependency-hell of pretty much every Javascript UI library and framework out there. Done with the continuous PTSD of rug-pulls and lockins of the Node.js ecosystem trash. ^[1] I've published this, in case other Node.js ecosystem trauma victims find it useful.

My goal is a simple, minimal, vanilla, standards-based UI library that I can use in my own projects for the long term without having to worry about Javascript ecosystem trash. Long term because it's just simple vanilla CSS and JS. The look and feel are influenced by the shadcn aesthetic.

燕麦 – 超轻量级、语义化、零依赖的HTML UI组件库 Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library

Semantic, minimal, zero dependencies. ~8KB CSS and JS.

燕麦 – 超轻量级、语义化、零依赖的HTML UI组件库
Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library