System.css構建 Apple 復古界面的 CSS 庫
System.css 是一個 CSS 庫，用于構建類似于 1984-1991 年期間運行的 Apple System OS 的界面。在設計方面，從 System 1到System 6 并沒有太大的變化； 然而，這個庫基于 System 6，因為它是 macOS 的最終單色版本。
這個庫不使用任何 JavaScript，并且與你選擇的任何前端框架兼容。
入門
可以通過多種方式開始使用 System.css
從 CDN 導入
將以下內容添加到你的 head 標簽中：
<link rel="stylesheet" />
以下是一些幫助你入門的入門代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>System.css Starter</title>
<meta charset="UTF-8" />
<link rel="stylesheet" />
</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 i @sakun/system.css
開發(fā)
- 克隆倉庫并運行
npm install - 運行
npm start啟動開發(fā)環(huán)境
評論
圖片
表情