你是否怀念那个翻盖即玩、触屏+按键双操作的任天堂DS时代？ds.css 是一个轻量、开源的纯CSS框架，精准还原了Nintendo DS及DS Lite主机的经典视觉风格——从像素风按钮、灰蓝主色调、圆角屏幕边框，到状态栏图标、菜单栏阴影和拟物化开关，全部用现代CSS实现。它不依赖JavaScript框架，也不需要构建工具，开箱即用，专为想快速打造复古游戏感、教育类交互界面或趣味个人项目的开发者而生。
核心功能
- 原汁原味的DS UI组件库：内置按钮（带按压反馈）、标签页、滑块、开关、输入框、进度条等，全部遵循DS系统UI规范，连字体间距和阴影角度都经过像素级校准
- 即插即用的Web组件（Web Components）：提供
<ds-calendar>等可复用自定义元素，支持原生HTML导入，无需框架也能获得交互式日历、待办列表等完整小部件 - 零依赖、超轻量：仅约12KB（minified + gzipped），纯CSS实现，无运行时JS负担，兼容所有现代浏览器，甚至可在低配设备上丝滑运行
- 多接入方式灵活适配：支持CDN直链引入（推荐新手）、npm安装（适合Vue/React/Svelte工程）、本地文件引用，还可按需导入单个Widget模块
- 响应式友好设计：虽致敬掌机小屏，但组件自动适配桌面与移动视口，既可做全站主题，也能嵌入现有页面作为“彩蛋模块”
- MIT协议完全开放：可免费用于个人项目、教学演示、商业产品甚至二次魔改——连任天堂都没告它，你放心用
适合哪些人用
如果你是前端初学者，想通过有趣项目练手CSS布局与伪类动画；或是独立游戏开发者，需要为网页版游戏原型快速搭建DS风格HUD界面；又或是教育科技产品团队，希望用亲切的复古UI降低儿童用户学习门槛；甚至只是怀旧极客，想给个人博客加个DS主题仪表盘——ds.css 都是你无需造轮子的完美起点。它不追求“企业级复杂度”，而是专注把一件事做到极致：让任天堂DS的灵魂，在你的网页里重新亮起。
快速上手
三步完成集成，5秒看到效果：
- 在HTML文件的
<head>中添加CDN链接：<link rel="stylesheet" href="https://unpkg.com/@spiritov/ds.css" rel="external nofollow" > - 立即使用基础组件，例如：
<button class="ds-btn ds-btn-primary">开始游戏</button><div class="ds-statusbar"><span class="ds-battery">●●●○</span><span class="ds-signal">📶</span></div> - 如需高级交互，直接引入Web组件（同样在
<head>中）：<script type="module" src="https://unpkg.com/@spiritov/ds.css/dist/widgets/ds-calendar.js"></script>
然后在页面任意位置写：<ds-calendar></ds-calendar>
更详细的组件文档与实时预览，请访问官方演示站：css.ds.dreamyard.xyz
项目信息
A css framework recreating the DS / DS Lite’s UI
⭐
422
422
Stars
🔀
3
Forks
3
Forks
CSS
📄
MIT
MIT
编程语言：CSS｜GitHub Star 数：422｜开源协议：MIT｜GitHub 项目地址
用一行代码唤醒童年掌机记忆，让每个网页角落都跳动着任天堂的像素心跳。
