Framework Puppertino 基于苹果设计规范的开源CSS框架

想让 Web 界面拥有苹果那种干净、克制、圆润的观感，要么买设计工具复刻，要么逐像素手写，成本高。现成框架里又少有“直接对标 Apple 人机界面规范（HIG）”的开源 CSS 方案。
Puppertino 的思路，是把 Apple HIG 的常见元素（按钮、卡片、模态、深色模式等）做成一套开源 CSS 框架，并附少量 JS 助手。

项目基本信息

一、项目介绍

codedgar/Puppertino 是一个基于 Apple 人机界面规范的开源 CSS 框架，MIT 协议。它提供按钮、卡片、模态框、表单等组件样式，并内置深色模式与少量 JavaScript 助手（菜单、模态、主题管理）。支持通过 npm 模块化引入，也可走 CDN 快速使用。

二、核心优势

1. 对标 HIG：风格贴近 Apple 人机界面规范。
2. CSS + JS 助手：组件样式之外附带菜单、模态、主题等脚本。
3. 深色模式：内置 dark mode 与自动检测。
4. 模块化：可按需 import 具体模块（按钮、颜色等）。
5. 双渠道：npm 与 CDN 都可用。

三、适用场景

• 做 macOS/iOS 风格 Web 应用的团队。
• 希望界面与苹果生态观感一致的产物。
• 需要快速套用 Apple 风格原型的项目。
• 设计一致性要求高的品牌站点。

四、安装教程

npm 安装或 CDN 引入：

npm install @codedgar/puppertino

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@codedgar/puppertino@2.0.0/dist/css/puppertino.min.css'>

常见报错：CDN 版本号不匹配会 404；使用 JS 助手需在入口 import 对应脚本（如 menus.js、modals.js），否则交互不生效。

五、使用示例

引入后使用 Apple 风格类与深色模式：

import '@codedgar/puppertino'
// 深色模式自动检测
import '@codedgar/puppertino/js/darkmode_manager.js'
puppertinoThemeMan.init({ autoDetect: true })

<button class='p-btn'>确定</button>

真实效果：按钮、卡片等获得 Apple 风格圆角与质感，开启深色模式后界面随系统切换。

六、常见问题

Q：必须引入 JS 吗？
A：纯样式可用 CSS；菜单、模态、深色模式等交互才需要对应 JS 助手。
Q：只能做苹果风吗？
A：默认对标 HIG，但你可用自己的变量覆盖成其它风格。
Q：方便定制吗？
A：支持按模块 import，也可改源码变量调整。

七、总结

Puppertino 把 Apple 人机界面规范做成了开源 CSS 框架，让 Web 也能轻松拥有苹果风的干净观感，并附带深色模式与交互助手。对做苹果生态产品或品牌一致性的团队，它是现成且免费的选择；MIT 协议、npm/CDN 双渠道。