System.css 是一个 CSS 库，用于构建类似于 1984-1991 年期间运行的 Apple System OS 的界面。在设计方面，从 System 1到System 6 并没有太大的变化； 然而，这个库基于 System 6，因为它是 macOS 的最终单色版本。
这个库不使用任何 JavaScript，并且与你选择的任何前端框架兼容。
![]()
入门
可以通过多种方式开始使用 System.css
从 CDN 导入
将以下内容添加到你的 head 标签中：
<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />
以下是一些帮助你入门的入门代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>System.css Starter</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />
</head>
<body>
<div class="window" style="width:30rem;">
<div class="title-bar">
<button aria-label="Close" class="close"></button>
<h1 class="title">System.css</h1>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
<div class="window-pane">
Hello world!
</div>
</div>
<div class="window" style="width:30rem;">
<div class="title-bar">
<button aria-label="Close" class="close"></button>
<h1 class="title">Search</h1>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
<div class="separator"></div>
<div class="modeless-dialog">
<section class="field-row" style="justify-content: flex-start">
<label for="text_find" class="modeless-text">Find:</label>
<input id="text_find" type="text" style="width:100%;" placeholder="">
</section>
<section class="field-row" style="justify-content: flex-end">
<button class="btn">Cancel</button>
<button class="btn" style="width:95px;">Find</button>
</section>
</div>
</div>
</body>
</html>
从 npmjs 导入
开发
- 克隆仓库并运行
npm install
- 运行
npm start启动开发环境
