system.css Download - system.css Kode Sumber Unduh

system.css

Kode sumber lainnya

1.0.0

Unduh

Dokumentasi

System.CSS adalah perpustakaan CSS untuk membangun antarmuka yang menyerupai OS sistem Apple yang berlangsung dari 1984-1991. Desain-bijaksana, tidak banyak yang benar-benar berubah dari sistem 1 ke sistem 6; Namun, perpustakaan ini didasarkan pada Sistem 6 karena itu adalah versi monokrom terakhir dari MacOS.

Untungnya, perpustakaan ini tidak menggunakan JavaScript dan kompatibel dengan kerangka kerja front-end pilihan Anda. Sebagian besar gaya juga dapat ditimpa untuk memungkinkan penyesuaian yang lebih dalam.

Memulai

Ada beberapa cara Anda dapat memulai dengan System.css!

Impor dari CDN (termudah)

Tambahkan yang berikut ke tag kepala Anda:

 < link rel =" stylesheet " href =" https://unpkg.com/@sakun/system.css " />

Berikut beberapa kode pemula untuk membantu Anda memulai:

 <!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 >

Impor dari NPMJS

 npm i @sakun/system.css

Berkembang

Klon Repositori dan Jalankan npm install
Jalankan npm start memulai lingkungan pengembangan.

Semua yang Anda butuhkan dapat ditemukan di Style.css.

Berkontribusi, kredit, dll.

Terima kasih telah memeriksa proyek ini! Perpustakaan ini dibuat dengan sangat menyenangkan dan sebagian besar terinspirasi oleh 98.CSS. Font Chicago 12pt dan Geneva 9pt adalah rekreasi oleh @BlogMywiki

System.css masih dalam beta! Saya menciptakan kembali komponen berdasarkan pedoman antarmuka manusia Apple. Namun, masih ada peluang yang cukup bagus bahwa saya mungkin telah melewatkan/mengabaikan sesuatu yang penting. Saya juga harus menciptakan kembali sebagian besar aset, yang juga dapat ditemukan di sini.

Jika Anda menemukan bug, pertimbangkan untuk membuka masalah. Jika ada sesuatu yang ingin Anda tambahkan, jangan ragu untuk membuat PR!

Jika Anda ingin melihat apa lagi yang saya lakukan, pertimbangkan untuk mengikuti saya di Twitter atau memeriksa situs pribadi saya :)