63 lines
4.1 KiB
Markdown
63 lines
4.1 KiB
Markdown
---
|
|
title: MaterializeCSS Framework as an Alternative to Bootstrap
|
|
localeTitle: إطار MaterializeCSS كبديل لبرنامج Bootstrap
|
|
---
|
|
يعد [MaterializeCSS](http://materializecss.com/) إطارًا أساسيًا مستجيبًا حديثًا يستند إلى [مبادئ التصميم](https://www.google.com/design/spec/material-design/introduction.html) متعدد الأبعاد من Google.
|
|
|
|
## ما هو تصميم المواد؟
|
|
|
|
التصميم المادي (الذي يحمل الاسم الرمزي ورقة الكم) هو نظام تصميم تم تطويره بواسطة Google. بالتوسع في نماذج "البطاقة" التي ظهرت لأول مرة في Google Now ، يجعل التصميم متعدد الأبعاد استخدامًا أكثر ليبرالية للتنسيقات القائمة على الشبكة ، والرسوم المتحركة المتجاوبة والتحولات ، والحشو ، وتأثيرات العمق مثل الإضاءة والظلال.
|
|
|
|
يمنحك هذا [الفيديو](https://www.youtube.com/watch?v=Q8TXgCzxEnw) فكرة حول التصميم متعدد الأبعاد:
|
|
|
|
## تحقق من هذه المواقع التي تستخدم تجسيد ومعرفة الفرق من ما اعتدت عليه!
|
|
|
|
اختبرها على هاتفك أيضًا للحصول على شعور أفضل.
|
|
|
|
* [ال 100](https://www.100xp.io/)
|
|
|
|
* [مواضيع المسؤول](http://demo.geekslabs.com/materialize/v2.1/)
|
|
|
|
* [StrapHq](http://www.straphq.com/)
|
|
|
|
|
|
المزيد من الأمثلة [هنا](http://materializecss.com/showcase.html)
|
|
|
|
## بديل 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:
|
|
|
|
* انه سهل! - مجرد التأكيد
|
|
* إنها مفتوحة المصدر ، يمكنك الحصول عليها هنا
|
|
* مجتمع ينمو أيضا حوله
|
|
* يبحث [شخص ما](http://fezvrasta.github.io/bootstrap-material-design/) لإنتاج مزيج من Bootstrap + Materialize. Sweeet!
|
|
|
|
## أي شيء آخر؟
|
|
|
|
جربها وربما ستحبها. في الواقع ، نظرًا لأنه قد تم بالفعل توجيه واجهة مستخدم Android ، قد تكون هذه طريقة جيدة لتحسين أدائك في التصميم متعدد الأبعاد لتطبيقات الويب التي تركز على الجوال مثل [تطبيقات الويب التقدمية](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn)
|
|
|
|
### ربما يجب عليك عدم استخدامه ... حتى الآن
|
|
|
|
انها تمر بتغييرات يجري في مرحلة ألفا. لذلك قد تخطيها وعدم استخدامها في مشروع حاسم حتى تنضج. |