هل يمكنني استخدام إطار عمل CSS مختلف بدلاً من الرياح الخلفية لموضوعات الشعيرة

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

***

اعتماد خيوط على CSS Tailwind

يستخدم Filament CSS Tailwind باعتباره إطارًا افتراضيًا للتصميم والتصميم الأساسي. يستفيد نظام التصميم والمكونات بالكامل من فصول الأدوات المساعدة لخلاص Tailwind للتخطيط والتباعد والألوان والطباعة والاستجابة والتفاعل والموضوع. تم تصميم واجهة المستخدم الافتراضية مع Tailwind ، والعديد من المكونات الإضافية والملحقات الشهيرة تفترض أيضًا أن Windwind كأساس CSS.

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

***

استخدام أطر عمل CSS الأخرى مع الشعيرة: التحديات والمناهج

محاولة استبدال CSS Tailwind بإطار عمل CSS آخر مثل Bootstrap أو Bulma أو Foundation أو يتحقق من العديد من التحديات:

-أسماء الفصول والمرافق: تستخدم الأطر الأخرى أسماء فئة مختلفة ومنهجيات CSS (على سبيل المثال ، يستخدم Bootstrap أسماء فئة دلالية مثل ".BTN` ،` .Container` ، في حين يستخدم Tailwind فئات المرافق مثل `bg-blue-500` ،` p-4`). تستخدم مكونات الشعيرة أسماء فئة Tailwind على نطاق واسع ، وبالتالي فإن تبديل CSS يتطلب إعادة كتابة فئات المكونات أو إنشاء أنماط مماثلة في الإطار الجديد.

- أنظمة الاستجابة والشبكة: يستخدم Tailwind أدوات التصميم المستجيبة الخاصة بها استنادًا إلى نظام شبكة أول هاتف محمول. تحتوي الأطر الأخرى على تعريفات مختلفة للشبكة ونقطة التوقف التي قد لا تكون خريطة بشكل نظيف لنهج Tailwind.

- المكونات المخصصة والتفاعلات: تدمج العديد من مكونات واجهة مستخدم خيوط التحولات القائمة على الريح ، والرسوم المتحركة ، والولايات. قد تحتاج إلى تكرارها باستخدام إمكانات JavaScript أو غيرها من إمكانات أطر عمل CSS.

-عملية الإنشاء: تتضمن عملية بناء Filament عادة تكوين مترجم Tailwind Just-In (JIT) لإنشاء فئات CSS الضرورية فقط. يعني استخدام إطار عمل آخر ضبط أو استبدال خط أنابيب إنشاء CSS.

على الرغم من هذه العقبات ، يمكن للمستخدمين المتقدمين الذين يرغبون في استخدام إطار عمل مختلف النظر في:

- بناء موضوع خيوط مخصص: يمكنك تجاوز طرق العرض الافتراضية ومكونات الشفرة لفيلم Filament لاستخدام فئات CSS التي تختارها ، وتطبيق فصول CSS Framework بدلاً من Tailwind's. هذا يتطلب معرفة عميقة بكل من الخيوط الداخلية وإطار عمل CSS المختار.

- باستخدام ملحقات متوافقة مع Windwind: بعض أطر عمل CSS أو مكتبات واجهة المستخدم تبني أعلى أو متوافقة مع Tailwind (على سبيل المثال ، Daisyui) ، والتي يمكن أن تضيف مكونات مكونة مسبقًا وسهولة في الجزء العلوي من CSS Tailwind دون استبدالها بالكامل.

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

***

بدائل لـ Tailwind CSS لخيوط التصميم

إذا كنت ترغب في استخدام إطار عمل CSS مختلف للخيوط ، فإليك نظرة عامة موجزة على بعض البدائل الشائعة وكيف تقارن حالة الاستخدام هذه:

-Bootstrap: إطار عمل CSS الأكثر استخدامًا ، حيث يقدم تصميمًا قائمًا على المكونات مع فئات محددة مسبقًا للأزرار ، والأشكال ، والشبكات ، وما إلى ذلك. يتطلب دمج bootstrap مع الشعيرة إعادة كتابة جميع فئات الرياح الخلفية في قوالب خيوط مع فئات bootstrap وربما إعادة كتابة السلوكيات التفاعلية مع JavaScript من Bootstrap.

- بولما: إطار CSS حديث وخفيف الوزن يعتمد على Flexbox. إنه معياري ويستخدم أسماء الفئات الدلالية بدلاً من الفصول الأولى من الأداة المساعدة. على غرار Bootstrap ، يتطلب استخدام Bulma مع الشعيرة تجاوز المظهر المخصص وأعطاء مرافق Tailwind إلى مكافئات Bulma.

- الأساس: إطار عمل شامل آخر لدعم الشبكة والتخطيطات المستجيبة. يشبه منحنى التعلم وتعقيد التكامل مع bootstrap و bulma.

- تتحقق أو مواد واجهة المستخدم: أطر CSS بناءً على تصميم مواد Google. أنها توفر مكونات واجهة المستخدم مسبقا مصممة بشكل متسق مع مبادئ تصميم المواد. إن استخدامها بدلاً من الريح Tailwind يعني إعادة بناء واجهة المستخدم الخاصة بالخيوط لمطابقة إرشادات المواد وتكييف المكونات مع فصول وبرامج نصية خاصة بالمواد.

- Daisyui: ليس بديلاً ولكن مكونًا إضافيًا لـ CSS Tailwind الذي يوفر فئات مكونة لتبسيط التصميم. يمكن أن يقلل من عبء عمل CSS الخاص بك مع الحفاظ على Tailwind باعتباره الإطار الأساسي ، وهو مفيد لمستخدمي الخيوط الذين يريدون تصميمًا أسرع دون التخلي عن Tailwind.

***

الخطوات الفنية لاستخدام إطار عمل CSS مختلف مع الشعيرة

إذا اخترت المتابعة مع إطار عمل CSS آخر ، فإليك الخطوات التقنية العامة:

1. تعطيل أو إزالة CSS Tailwind من خط أنابيب أصول الشعيرة لمنع الاشتباكات.

2. أضف إطار عمل CSS المفضل إلى مشروع Laravel عبر NPM أو CDN أو إدراج الملف المباشر.

3. تجاوز مشاهدات ومكونات الشعيرة: نشر مشاهدات خيوط باستخدام "PHP Artisan Pindor: Publish` ، ثم قم بتحرير قوالب الشفرة لاستبدال دروس Tailwind بفصول إطار عملك.

4. إعادة بناء المكونات المخصصة: إذا كانت الشعيرة تعتمد على فئات Tailwind للمكونات التفاعلية ، فاحرص على كتابة هذه الأجزاء التفاعلية باستخدام JavaScript أو JavaScript أدوات الإطار CSS الخاص بك.

5. اضبط التكوين: تحديث ملفات تكوين الشعيرة إذا لزم الأمر لاستيعاب مسارات Asset CSS و JS.

6. اختبار واجهة المستخدم بدقة: يجب التحقق من صحة التصميم المستجيب ، إمكانية الوصول ، وتوافق المتصفح لأن نمط تصميم الإطار الجديد قد يختلف.

***

فوائد وعيوب استخدام الأطر الأخرى مع الشعيرة

فوائد:

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

عيوب:

- يتطلب جهد كبير ، حيث يتم إجراء خيوط ل CSS Tailwind بشكل افتراضي.
- يفقد مزايا التكامل الضيق ، مثل توليد JIT CSS ، وسهولة ، والمرونة الأولى في الأداة المساعدة.
- يحتمل أن يؤدي إلى CSS أثقل وأوقات تحميل أطول.
- قد يعقد تحديث وصيانة الشعيرة وموضوعاته.

***

ملخص

يتم دمج نظام ثياب Filament ومكونات واجهة المستخدم بعمق مع CSS Tailwind ، مما يجعل Tailwind الإطار الافتراضي والموصى به CSS لتصميم موضوعات خيوط. على الرغم من أنه من الممكن تقنيًا استخدام أطر عمل CSS الأخرى مثل Bootstrap أو Bulma أو Foundation أو Matister من خلال إنشاء موضوعات مخصصة ووجهات نظر مبتكرة ، إلا أنها تتطلب أعمال تخصيص كبيرة وفهم جيد لكل من الشعيرة والإطار البديل.

بالنسبة للعديد من المطورين ، بدلاً من استبدال الريح Tailwind تمامًا ، باستخدام الإضافات أو الإضافات مثل Daisyui التي تبني على CSS Tailwind يوفر أرضية بسيطة مع مكونات مكونة من قبل Donting Donsing's Tailwind.

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