oat README

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

Oat UI

Semantic, minimal, zero dependencies. ~10KB 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.

I wrote this to use in my own projects after getting sick of the ridiculous bloat, dependencies, and rug-pulls in Javascript UI/component libraries.

See live demo and docs at oat.ink

IMPORTANT: The lib is currently sub v1 and is likely to have breaking changes until it hits v1.


image

oat (knadh/oat)

Searching Database…

5.5K ·GitHub
这是什么?Oat 是一个超轻量、零依赖的语义化 HTML+CSS+JS 界面组件库(压缩并 gzip 后约 10KB),无需框架或构建步骤即可搭建网页界面。
这是框架,还是只是一个样式表?它不是框架,而只是一个很小的 CSS 文件加上一个小型 JS 文件,用于少量动态的 WebComponents;不涉及任何构建工具或框架。
怎么把它加到项目里?只需在 HTML 页面中直接引入这两个小巧的 CSS 和 JS 文件(或它们的 CDN 链接),然后开始使用语义化标签即可,无需构建步骤。
使用它还需要其他库吗?不需要。Oat 零依赖,无需安装其他任何东西。
在依赖它之前,有什么需要注意的坑吗?它仍处于 v1 之前的阶段,在达到 1.0 版本之前,可能会出现不兼容的变更。
作者为什么要自己做 Oat,而不直接用现成的组件库?作者厌倦了 JavaScript 界面/组件库常见的臃肿、依赖繁多以及随意变更或突然弃用的问题,因此想为个人项目找一个精简的替代方案。
我需要给组件添加 CSS 类名才能让它们有样式吗?不需要。Oat 开箱即用,会根据语义化 HTML 标签和属性自动套用样式,组件外观就不错,也不必在页面上堆满类名。
在哪里可以看到在线演示或文档?在线演示和文档托管在 oat.ink。
Creator
knadh
Size
0.4 MB
Stars
5.5K
Age
9mo
Commits · 90 Days