System.css 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
System.css 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
System.css 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 HTML/CSS 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2022-08-15

软件简介

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 i @sakun/system.css

开发

  1. 克隆仓库并运行 npm install
  2. 运行 npm start启动开发环境
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(1) 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
1 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部