system.css
1.0.0
文档
System.CSS是一个CSS库，用于构建类似于Apple的系统OS的界面，该界面从1984 - 1991年开始运行。在设计方面，从系统1转换为6的实际变化并没有太大变化；但是，该库基于系统6，因为它是MacOS的最终单色版本。
幸运的是，该库不使用任何JavaScript，并且与您选择的任何前端框架兼容。大多数样式也可以被覆盖以进行更深入的自定义。
您可以通过几种方法开始使用System.CSS！
从CDN进口（最简单）
将以下内容添加到您的头标签中：
< 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 i @sakun/system.css
npm installnpm start启动开发环境。您需要的所有内容都可以在style.css中找到。
感谢您检查这个项目！这个图书馆的娱乐性很高，并在很大程度上受到98.CSS的启发。芝加哥12PT和日内瓦9PT字体是@blogmywiki的娱乐活动
System.CSS仍在Beta中！我根据Apple的人类界面指南重新创建了组件。但是，我可能会错过/忽略一些必不可少的东西。我还必须重新创建大多数资产，也可以在这里找到。
如果您找到错误，请考虑打开问题。如果您想添加一些内容，请随时创建PR！
如果您想看看我要做什么，请考虑在Twitter上关注我或查看我的个人网站:)
CSS扫描：检查，复制和编辑CSS的最快，最简单的方法
