system.cssダウンロードsystem.cssソースコードのダウンロード

system.css

その他のソースコード

1.0.0

ダウンロード

ドキュメント

System.CSSは、1984年から1991年にかけて実行されたAppleのシステムOSに似たインターフェイスを構築するためのCSSライブラリです。デザイン的には、システム1からシステム6に実際には変更されていません。ただし、このライブラリは、MacOSの最終的なモノクロバージョンであったため、システム6に基づいています。

幸いなことに、このライブラリは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 installを実行します
npm startを実行して、開発環境を開始します。

必要なものはすべてStyle.cssで見つけることができます。

寄稿、クレジットなど

このプロジェクトをチェックしてくれてありがとう！このライブラリは楽しく作られており、主に98.CSSに触発されました。シカゴ12ptとジュネーブ9ptフォントは@blogmywikiによるレクリエーションです

System.cssはまだベータ版です！ AppleのHuman Interfaceガイドラインに基づいてコンポーネントを再作成しました。しかし、私が不可欠な何かを見逃したり見落としていたかもしれないかなり良いチャンスはまだあります。また、ほとんどの資産を再作成する必要がありましたが、これもここで見つけることができます。

バグが見つかった場合は、問題を開くことを検討してください。追加したいものがあれば、PRを作成してください！

私が他に何をしているのかを見たい場合は、Twitterで私をフォローしたり、私の個人サイトをチェックしたりすることを検討してください:)