文章目录Puppertino把 macOS 视觉搬到 Web 上的轻量框架1、 这玩意儿是干嘛的2、 为什么要用它3、 怎么集成4、 目前有哪些组件5、 适合哪些场景Puppertino把 macOS 视觉搬到 Web 上的轻量框架Puppertino 在 GitHub 上拿到 1,141 Star。codedgar 开源了这个 CSS 框架专门做一件事让 Web 应用长出 macOS 的样子。严格遵守 Apple Human Interface Guidelines组件按需引入不绑死任何依赖。1、 这玩意儿是干嘛的把 macOS 的视觉和交互搬到浏览器里。按钮、模态框、表单、标签页、导航栏、分段控件、阴影模糊、官方 Apple 配色、暗色模式管理器开箱即用。不需要整个框架一次性吞下去挑需要的组件单独 import 就行。体积可以压到很小没必要的功能一行都不进包。2、 为什么要用它做企业内网工具或者面向 Mac 用户的产品时设计师总想把界面做得更像原生一些。自己从零撸一套样式系统工作量不小还要持续跟 macOS 的视觉迭代保持同步。Puppertino 把这层前期成本抹掉了。CDN 引一行 link 标签立刻拿到 macOS 风格的按钮、表单、模态框不需要切图不需要调色也不需要重写设计规范。只在必要的地方偏离 Apple HIG留出再创作的余地。3、 怎么集成把这一行塞进 HTML headlinkrelstylesheethrefhttps://cdn.jsdelivr.net/gh/codedgar/Puppertinolatest/dist/css/newfull.css只要 buttons 组件单独引即可linkrelstylesheethrefhttps://cdn.jsdelivr.net/gh/codedgar/Puppertinolatest/dist/css/buttons.cssNPM 也支持npminstallcodedgar/puppertinogithub:codedgar/PuppertinoJS 里的模块化导入按需取用importcodedgar/puppertino/buttonsimportcodedgar/puppertino/modalsimportcodedgar/puppertino/formsimportcodedgar/puppertino/tabs4、 目前有哪些组件覆盖的清单已经不算短ButtonsPush、Icon、Action 三种形态Modals模态框Forms Inputs表单和输入控件Layout布局Official Apple Colors官方 Apple 配色Segmented Controls分段控件Shadows Blur阴影与模糊Tabs标签页Navigation Bars导航栏Dark Mode Manager暗色模式管理器完整用法和实时演示放在官方 Examples 页面缺的组件可以去 issue 区开帖投票作者会按呼声排优先级。5、 适合哪些场景做面向 Mac 用户的 SaaS 产品、希望界面熟悉感强一些的前端项目企业内部工具系统想快速给一堆管理后台套统一外观的团队个人开发者做作品集或演示站想省掉样式系统的搭建时间教学场景下演示 Apple HIG 视觉规范的对照参考MIT 协议免费商用改也行。Codedgar 本人在持续维护组件列表还在往上加。教学场景下演示 Apple HIG 视觉规范的对照参考MIT 协议免费商用改也行。Codedgar 本人在持续维护组件列表还在往上加。
