system.css下載system.css源代碼下載

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 >