system.css ดาวน์โหลด - system.css ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

system.css

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

เอกสาร

System.css เป็นไลบรารี CSS สำหรับการสร้างอินเทอร์เฟซที่มีลักษณะคล้ายกับระบบปฏิบัติการของ Apple ซึ่งวิ่งตั้งแต่ปี 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 install
เรียกใช้ npm start เพื่อเริ่มสภาพแวดล้อมการพัฒนา

ทุกสิ่งที่คุณต้องการสามารถพบได้ใน Style.css

การบริจาคเครดิต ฯลฯ

ขอบคุณที่ตรวจสอบโครงการนี้! ห้องสมุดนี้สนุกดีและได้รับแรงบันดาลใจจาก 98.css ฟอนต์ชิคาโก 12pt และเจนีวา 9pt เป็นสันทนาการโดย @blogmywiki

System.css ยังอยู่ในเบต้า! ฉันสร้างส่วนประกอบขึ้นอยู่กับแนวทางการเชื่อมต่อของมนุษย์ของ Apple อย่างไรก็ตามยังมีโอกาสที่ดีที่ฉันอาจพลาด/มองข้ามสิ่งที่จำเป็น ฉันยังต้องสร้างสินทรัพย์ส่วนใหญ่ใหม่ซึ่งสามารถพบได้ที่นี่

หากคุณพบข้อผิดพลาดให้พิจารณาเปิดปัญหา หากมีบางสิ่งที่คุณต้องการเพิ่มโปรดอย่าลังเลที่จะสร้าง PR!

หากคุณต้องการดูว่าฉันทำอะไรอีกลองติดตามฉันบน Twitter หรือตรวจสอบเว็บไซต์ส่วนตัวของฉัน :)