Framework Chota 仅3KB的极简CSS微框架

Bootstrap 这类框架对“小项目”来说太重：几十 KB 的 CSS、一堆用不上的组件、还要学一套 class 体系。可又不想纯手写 reset 与栅格。
Chota 的答案是：一个约 3KB 的微框架，只给最常用的栅格、按钮、表单、卡片、导航，无依赖、无构建，直接 CDN 引入。

项目基本信息

一、项目介绍

jenil/chota 是一个极简的 CSS 微框架，MIT 协议，体积约 3KB（gzip）。它提供容器、栅格（row/col）、按钮、表单、卡片、导航栏与少量工具类，全部零依赖、无需编译。定位是“够用小而美”，适合不想引入重型框架、又希望 HTML 立刻整齐的场景。

二、核心优势

1. 极小体积：约 3KB，gzip 后几乎无负担。
2. 零依赖：纯 CSS，无需 JS 或构建。
3. 常用齐备：栅格、按钮、表单、卡片、导航都有。
4. 易覆盖：简单结构，自定义成本低。
5. CDN 即用：一行 link 即可生效。

三、适用场景

• 小项目、落地页、Demo 快速塑形。
• 嵌入式界面、轻量工具页。
• 不想引入 Bootstrap/Tailwind 的场景。
• 作为大框架之外的补充样式。

四、安装教程

通过 CDN 引入：

<link rel='stylesheet' href='https://unpkg.com/chota@1.0.0/dist/chota.min.css'>

也可 npm 安装后引本地文件。常见报错：版本号写错导致资源 404；想深度定制时建议拷贝源码再改，避免被更新覆盖。

五、使用示例

使用内置栅格与按钮类：

<div class='container'>
  <div class='row'>
    <div class='col'><button class='button'>确定</button></div>
  </div>
</div>

真实效果：容器居中、栅格分行分列、按钮统一样式立即生效，无需任何额外配置。

六、常见问题

Q：和 Bootstrap 比如何？
A：Chota 只覆盖最常用的小部分，体积远小于 Bootstrap，定位互补而非替代。
Q：方便主题化吗？
A：结构很简单，改几个 CSS 变量或覆盖类即可换肤。
Q：生产能用吗？
A：小型站点与内部工具完全够用；大型项目通常仍需更完整体系。

七、总结

Chota 用约 3KB 的体积提供了最常用的栅格与组件，是 Bootstrap 之外“小而美”的务实选择。对落地页、Demo 与轻量工具页，它能用一行 CDN 把 HTML 立刻理顺；MIT 协议、零依赖。