4.1 KiB
| title | localeTitle |
|---|---|
| MaterializeCSS Framework as an Alternative to Bootstrap | إطار MaterializeCSS كبديل لبرنامج Bootstrap |
يعد MaterializeCSS إطارًا أساسيًا مستجيبًا حديثًا يستند إلى مبادئ التصميم متعدد الأبعاد من Google.
ما هو تصميم المواد؟
التصميم المادي (الذي يحمل الاسم الرمزي ورقة الكم) هو نظام تصميم تم تطويره بواسطة Google. بالتوسع في نماذج "البطاقة" التي ظهرت لأول مرة في Google Now ، يجعل التصميم متعدد الأبعاد استخدامًا أكثر ليبرالية للتنسيقات القائمة على الشبكة ، والرسوم المتحركة المتجاوبة والتحولات ، والحشو ، وتأثيرات العمق مثل الإضاءة والظلال.
يمنحك هذا الفيديو فكرة حول التصميم متعدد الأبعاد:
تحقق من هذه المواقع التي تستخدم تجسيد ومعرفة الفرق من ما اعتدت عليه!
اختبرها على هاتفك أيضًا للحصول على شعور أفضل.
المزيد من الأمثلة هنا
بديل Bootstrap ، حقا؟
البرد ، لا شيء يمكنه الفوز على Bootstrap ، في رأيي. ومع ذلك ، فإن تجسيد CSS يوفر ذلك فقط ، تتحقق - الشعور بالتفاعل مع الواجهة كما لو كانت مادة مادية ، مثل الورق. لقد توصلت للتو مع هذا.
لكن حقا…
أنا مثل تتجسد بسبب بساطته ، على سبيل المثال:
في Bootstrap ، يمكنك القيام بذلك لإنشاء زر
<button class="btn btn-primary btn-lg"> My Button </button>
اساسا كل اسم فئة مرارا وتكرارا لديه btn- تعلق بها. وهذا هو الحال في الغالب بالنسبة للعديد من مكونات التمهيد الأخرى خاصة عندما تريد إضافة فئات بسيطة مثل اللون.
مع Materialize ، يمكنك إضافة جميع الطبقات ببساطة على النحو التالي:
<button class="btn waves-effect waves-light green">My Button</a>
كما ترون ، تم تخفيض استخدام btn-. يمكن إعادة استخدام الفئة green مع أي عنصر HTML آخر بخلاف button الموضح في هذه الحالة.
هناك نسخة أخرى أخف من المواد "تصميم الإطار" ولكنها ليست أنيقة أو بسيطة مثل إطار materializeCSS بخلاف هذه البساطة ، وهنا المزيد من الأسباب لماذا أحب materializeCSS:
- انه سهل! - مجرد التأكيد
- إنها مفتوحة المصدر ، يمكنك الحصول عليها هنا
- مجتمع ينمو أيضا حوله
- يبحث شخص ما لإنتاج مزيج من Bootstrap + Materialize. Sweeet!
أي شيء آخر؟
جربها وربما ستحبها. في الواقع ، نظرًا لأنه قد تم بالفعل توجيه واجهة مستخدم Android ، قد تكون هذه طريقة جيدة لتحسين أدائك في التصميم متعدد الأبعاد لتطبيقات الويب التي تركز على الجوال مثل تطبيقات الويب التقدمية
ربما يجب عليك عدم استخدامه ... حتى الآن
انها تمر بتغييرات يجري في مرحلة ألفا. لذلك قد تخطيها وعدم استخدامها في مشروع حاسم حتى تنضج.