تنزيل system.css - system.css Source Code Download

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 و Geneva 9PT هي استجمام من قبل @plogmywiki

System.CSS لا يزال في بيتا! قمت بإعادة إنشاء المكونات بناءً على إرشادات الواجهة البشرية في Apple. ومع ذلك ، لا تزال هناك فرصة جيدة لأنني قد فاتني/أغفل شيء أساسي. لقد اضطررت أيضًا إلى إعادة إنشاء معظم الأصول ، والتي يمكن العثور عليها أيضًا هنا.

إذا وجدت خطأ ، فكر في فتح مشكلة. إذا كان هناك شيء ترغب في إضافته ، فلا تتردد في إنشاء العلاقات العامة!

إذا كنت ترغب في معرفة ما الذي أقوم به ، فكر في متابعتي على Twitter أو التحقق من موقعي الشخصي :)