الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

؟ Matcha.css

Matcha.css هي مكتبة CSS خالصة مصممة لتصميم عناصر HTML بشكل مشابه لورقة أنماط المتصفح الافتراضية ، مما يلغي الحاجة للمستخدمين إلى تصحيح مستنداتهم يدويًا.

مثالي للنماذج الأولية السريعة ، صفحات HTML الثابتة ، المستندات التي تم إنشاؤها بواسطة تخفيضات ، والمطورين الذين يسعون لتبسيط سير عملهم دون الخوض في تعقيدات CSS ويريدون الاستفادة من مجموعة كاملة من عناصر HTML المتاحة.

  • ✅ لا توجد خطوات بناء
  • ✅ لا تبعيات
  • ✅ لا جافا سكريبت
  • ✅ لا حاجة للتكوين
  • ✅ لا مطلوب إعادة إنشاء
  • ✅ ~7kB Gzipped (يمكن تقليلها)

؟ أمثلة لقطة الشاشة

؟ لماذا تختار matcha.css ؟

؟ اللاأدري

يعمل بسلاسة مع أي وثيقة ويغطي مجموعة واسعة من عناصر HTML مقارنة بالمكتبات المماثلة. لا يزال غير مزعج عن طريق الاستفادة من العناصر الزائفة CSS ويقدم دعمًا واسعًا للمتصفح.

؟ عكسها

ما عليك سوى تضمين <link rel="stylesheet"> للبدء ، وإزالته كلما لزم الأمر دون الحاجة إلى إعادة تمثيل المستندات أو التنظيف.

؟ الدلالي

يتكيف التصميم استنادًا إلى التسلسل الهرمي عناصر ، وتوفير سلوكيات بديهية مثل "البرات الفرعية الضمنية" عند التعشيش <menu> عناصر ، ومؤشر الحقل المطلوب ( * ) عندما يتم إقران <label> مع <input required> ، وما إلى ذلك ، إلخ.

؟ قابل للتخصيص

قم بتخمير بنيتك الخاصة باستخدام منشئنا المخصص لتحديد ميزات محددة وتقليل حجم البناء النهائي وفقًا لاحتياجات مشروعك.

؟ مفتوح المصدر

تم إصداره بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، المتاح بحرية على github.com/lowlight/matcha.

الاستخدام

لاستخدام matcha.css ، فقط قم بتضمين السطر التالي في قسم <head> من المستند الخاص بك. هذا بسيط! 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >

يتم استضافة الأصول على Vercel لكن Matcha.css متوفرة أيضًا على خدمات CDN التي توزع حزم NPM مثل JSDelivr.

جميع الإصدارات المنشورة متوفرة في /v/ directory. بشكل افتراضي ، يتم تقديم الفرع main .

؟ à la carte

يتم تقديم كل دليل فرعي مدرج في /styles أيضًا مباشرة من matcha.mizu.sh. على سبيل المثال ، إذا كنت ترغب فقط في تضمين أنماط @syntax-highlighting بدلاً من استخدام البناء الافتراضي أو البناء المخصص ، فيمكنك استخدام: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " >

ومع ذلك ، لاحظ أنه ما لم تقدم متغيرات CSS الخاصة بك ، فستحتاج على الأرجح إلى تضمين حزمة @root لأنها تحتوي على جميع متغيرات Matcha.css.

جميع ملفات mod.css مسجلة أيضًا على أدلة الوالدين الخاصة بها للراحة ، مما يعني أنه يمكنك أيضًا استخدام: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >

؟ المساهمة

؟ نطاق المشروع

  • احترام إمكانية الوصول وسهولة الاستخدام أفضل الممارسات
  • احترام تفضيلات المستخدمين النهائيين (على سبيل المثال ، نظام الألوان)
  • كن على سطح مكتب وصديق للهاتف المحمول
  • لا يغير بشكل كبير تصميمه الحالي (ما لم يكن للوفاء أحد المبادئ السابقة المذكورة)
  • تظل خفيفة الوزن ، وحدجية وقابلة للتخصيص
    • سيتم استبعاد ميزات إضافية تعتبر "سخامًا" افتراضيًا وسيتم اختيارها
    • لن يتم استخدام قواعد !important لضمان أن يتمكن المستخدمون من تجاوز الأنماط بسهولة

هيكل المشروع

تم فصل هذا المشروع إلى ثلاث أدلة رئيسية:

  • /api التطبيقات للوظائف بدون خادم يتم تشغيلها على Vercel
  • /app لنقاط الدخول والأصول الثابتة وإنشاء البرامج النصية
  • /styles ملفات مصدر CSS

؟ حول /styles دليل

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

يجب أن تسبق الميزات الإضافية باستخدام الحرف @ ويجب على الأرجح استبعادها افتراضيًا في البناء لتجنب انتفاخ البناء الافتراضي.

‍ دورة حياة التنمية

عند تقديم طلب سحب ، ستكون المعاينة متاحة على Vercel. يمكن للمشرفين والمساهمين الآخرين مراجعة التغييرات وتقديم التعليقات قبل الاندماج.

يهدف التنمية المحلية إلى القيام باستخدام وقت تشغيل Deno. إذا كنت لا ترغب في تثبيته ، فيمكنك أيضًا استخدام تكوين DevContainer المقدم لتشغيل المشروع في بيئة حاوية أو مباشرة على مساحات Github.

لبدء خادم التطوير ، قم بتشغيل الأمر التالي: 

deno task serve

قبل إرسال التغييرات الخاصة بك ، تأكد من تنسيق كل شيء بشكل صحيح عن طريق تشغيل الأمر التالي: 

deno task fmt

رخصة 

 MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل