تخصيص الأنماط

المقدمة

تقدم Slidde.co نهجًا فريدًا في تصميم الويب من خلال السماح لك بتخصيص الأنماط باستخدام CSS مباشرة داخل كل مكون. على عكس منشئي المواقع التقليديين مثل Webflow، تتميز Slidde.co بـ:

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

مكون العينة: شريط التنقل الأفقي

لنأخذ مكونًا معقدًا، وهو شريط التنقل الأفقي، ونستكشف مناطق التخصيص الخمس:

1. أنماط مخصصة: CSS لشريط التنقل بالكامل.
2. أنماط مخصصة للحاوية: أنماط للحاوية اليسرى، التي تحتوي عادةً على شعار أو عنوان.
3. أنماط مخصصة للأزرار: أنماط لأزرار سطح المكتب.
4. أنماط الأزرار النشطة: أنماط للأزرار النشطة على سطح المكتب.
5. أنماط مخصصة لزر التبديل: أنماط لزر قائمة الهامبرغر في الجوال.

يمكنك رؤية مثال كامل لشريط التنقل هنا قالب.

بناء جملة CSS المتقدم

تدعم Slidde.co بناء جملة CSS المتقدم للحصول على أنماط أكثر دقة:

• فاصل النقطة: استخدم . لفصل الخصائص عن المعدلات.
• CamelCase: استخدم camelCase لأسماء خصائص CSS.

أمثلة:

• &:hover.color: لون الخط عند التحويم.
• &:hover.borderColor: لون الحدود عند التحويم.
• padding: الحشو لجميع أحجام الشاشات.
• md.padding: الحشو للشاشات الأكبر من المتوسطة (سطح المكتب).

لتعيين حشوات مختلفة للجوال وسطح المكتب: padding: .5rem & md.padding:2rem

محددات CSS القياسية:

• & > img.height: ارتفاع عناصر img من المستوى الأول داخل العنصر الحالي.
• &:first-child.color: فئة pseudo-class ::first-child للعنصر الأول.
• &::after.content: فئة pseudo-class ::after لإضافة عناصر إضافية.

باتباع هذه الإرشادات، يمكنك استخدام Slidde.co بفعالية لتصميم وتخصيص مكونات الويب الخاصة بك بدقة وسهولة.