استراتيجية التباعد

المقدمة

استراتيجية التباعد

تشرح هذه الصفحة كيفية تطبيق جميع طرق التباعد الموصى بها بواسطة Client-First.

يجب أن تحقق استراتيجية التباعد في Client-First المزيد من الاتساق لمشروعنا. نريد تقليل الفوضى والارتباك. يتحسن سير العمل و جودة المشروع لدينا إذا استخدمنا استراتيجيات التباعد في Client-First بذكاء.

ننظم صفحة التوثيق هذه إلى جزئين:

الجزء 1: الفئات المساعدة

الجزء 2: الفئات المخصصة

التغييرات من V1 إلى V2

تتبع استراتيجية التباعد بين V1 و V2 نفس العقلية. يقدم V2 المزيد من استراتيجيات التباعد للمزيد من حالات الاستخدام.

تحديث تباعد V2 متوافق مع الإصدارات السابقة. تُستخدم جميع استراتيجيات التباعد المستخدمة في V1 أيضًا في V2.

تباعد V1

اقترحنا استراتيجيتين لخلق مساحة بين العناصر:

مغلفة التباعد

فئات مخصصة

تباعد V2

نقدم عقليتين مع استراتيجيات متعددة لخلق مساحة بين العناصر:

الفئات المساعدة

الفئات مخصصة

لماذا يتم تحديث نظام التباعد؟

• يتمتع نظام تباعد Client-First بمزيد من قابلية الاستخدام من خلال تقديم طرق التطبيق.
• "أغلفة التباعد" ليست دائمًا ملائمة للاستخدام. ستمنحنا إضافة استراتيجية أخرى مزيدًا من المرونة في استخدام نظام المساعدة العالمي.
• جرب المطورون في Finsweet طرق تباعد فريدة وبديلة في ظل عقلية V1. نجحت التجارب في تحسين سير العمل وقرارات التباعد.
• يمكن أن يساعدنا وجود طرق تباعد متعددة ضمن نفس مبادئ نظام التباعد في اتخاذ قرارات أفضل بشأن سير العمل.

الجزء 1: الفئات المساعدة

الجزء 1 من تباعد Client-First هو التباعد باستخدام فئات المساعدة العالمية. هذه هي فئات الهامش والحشو الموجودة في فئات المساعدة لـ Client-First.

‍[margin/padding direction class] + [margin/padding size class]

داخل عقلية الفئة المساعدة ، نقدم استراتيجيتين للتباعد:

1. استراتيجية كتلة التباعد
2. استراتيجية مغلف التباعد

تعتمد كل من الكتل والأغلفة على نفس فئات التباعد المساعدة.

تختلف الكتل والأغلفة عن بعضها البعض بناءً على كيفية تطبيقها على الصفحة.

استراتيجية كتلة التباعد

في Client-First ، "كتلة التباعد" هي كتلة Div فارغة تخلق مساحة بين عنصرين مجاورين.

1. أضف Div Block "كتلة التباعد" إلى الصفحة مع الفئتين —

‍ [padding-bottom]+ [padding-size]

2. 2. أضف عناصر المحتوى إلى الصفحة كأشقاء "بشكل مجاور" لكتلة التباعد.

3. تخلق كتلة التباعد مساحة (حشو) بين العناصر.

نضيف Div Block إلى الصفحة ونطبق فئة padding-bottom ثم نضيف فئة padding-medium بالإضافة إلى ذلك. معًا ، تطبق الفئتان ^{padding-bottom: 2rem} على العنصر.

نقوم باضافة عنصر داخل غلاف التباعد لإنشاء مساحة بين العنصر والعنصر المجاور أو اي شيء آخر.

تُنشئ كتلة Div هذه "كتلة" من المسافة بين العنصرين الشقيقين. يمكننا الاستمرار في إضافة كتل Div عبر الصفحة لتوفير مساحة بين العناصر.

نستخدم دائمًا padding-bottom padding-[size] لتباعد الكتل.

سيؤدي استخدام المساحة المتروكة لكتل التباعد إلى إنشاء حجم عنصر دقيق في برنامج Designer. نحصل على عرض ممتاز لحجم كتلة التباعد المطلوب داخل لوحة المصمم.

يمكننا استخدام padding-top أو padding-bottom لتباعد الكتل. سنقوم بإضفاء الطابع الرسمي على padding-bottom باعتباره اصطلاحًا رسميًا لكتلة التباعد في Client-First.

سيؤدي استخدام الهامش لكتل التباعد إلى ترك Div Block "فارغًا" بشكل واضح. هذا لن يعرض بشكل صحيح حجم كتلة التباعد المطلوب.

استراتيجية مغلف التباعد

في Client-First ، "غلاف التباعد" هو Div Block يقوم بتغليف عنصر فرعي وتكوين مساحة بين عنصر مجاور.   

1. أضف "غلاف التباعد" إلى الصفحة مع الفئتين —

‍ [margin/padding-direction] + [margin/padding-size]

2. قم باضافة عنصر المحتوى داخل غلاف التباعد.

3. يقوم غلاف التباعد بإنشاء مساحة (هامش أو حشوة) بينه وبين العنصر المجاور.

نقوم باضافة Div Block إلى الصفحة ونطبق فئة margin-bottom (الاتجاه) ثم نضيف فئة margin-medium (الحجم).

تطبق الفئتان ^{margin-top: 2rem} على العنصر.

نقوم باضافة عنصر داخل غلاف التباعد لإنشاء مساحة بين العنصر والعنصر المجاور أو اي عنصر آخر.

حالات الاستخدام: التباعد بشكل عام

1. استخدم قيم التباعد العالمية الافتراضية

الفائدة: نحافظ على قيم التباعد أكثر اتساقًا وتوحيدًا في جميع مراحل المشروع

نريد توحيد التباعد بين العناصر عبر الأقسام والصفحات. إذا كنا نستخدم 4rem و 8rem و 12rem كقيم أساسية للمسافات عبر المشروع ، فنحن نريد أن تكون هذه القيم موحدة في كل مكان.

كلما زاد استخدامنا لنظام التباعد في Client-First ، كلما كانت المسافات بيننا أكثر اتساقًا في جميع أنحاء المشروع.

الفائدة: لدينا تحديثات تباعد افتراضية وتلقائية عبر شاشات الأجهزة المختلفة اللوحي والجوال.

تقوم كتلة أو غلاف التباعد تلقائيًا بتنفيذ تعديلات موحدة للمسافات على مستوى الموقع عبر كل قياسات الأجهزة المختلفة.

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

‍ لكل قياس جهاز معين ، ستتلقى العناصر المتباعدة بالكتل والأغلفة قيم التباعد الافتراضية المستخدمة عبر المشروع.

الفائدة: يمكننا إجراء تحديثات عالمية للمسافات على مستوى الموقع في جميع أنحاء المشروع.

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

2. فوائد سير العمل وقابلية التوسع

الفائدة: إذا كنا نستخدم إستراتيجية كتلة التباعد ، فيمكننا تقليل عدد الفئات المخصصة المستخدمة للهامش والحشو لخصائص CSS

نريد تقليل عدد الفئات المخصصة التي تم إنشاؤها خصيصًا للتباعد. يمكن أن تساعدنا كتل التباعد والأغلفة في إنشاء فئات أقل لمشروعنا.

يمكننا الاعتماد على الفئات المساعدة التي تم إنشاؤها بالفعل للتباعد. نظرًا لأننا نستخدم نظام التباعد المساعدة بشكل أكبر ، فسوف نعتمد بشكل أقل على إنشاء فئات مخصصة للتباعد.

الفائدة: نتجنب التراص العميق فوق العنصر.

‍
Client-First هو ضد التكديس العميق داخل مشاريع Webflow. نريد تجنب التراص العميق في جميع الأوقات. تساعدنا أغلفة وكتل التباعد في تجنب فئات التراص العميق على عناصرنا. تعرف على المزيد حول التراص العميق في إستراتيجية الفئات 2.

الفائدة: إذا تم استخدامها بشكل صحيح ، يمكن أن تساعدنا أغلفة التباعد في العمل بشكل أسرع.

‍
توجد كتل وأغلفة التباعد في Client-First لمساعدتنا على العمل بشكل أسرع والحفاظ على مشروعنا بشكل أفضل.

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

ليس من الضروري أو المستحسن استخدام كتل التباعد والأغلفة في كل مكان.

‍
يُقبل تطبيق خصائص الهامش والحشو CSS مباشرة على الفئات المخصصة. هناك حالات استخدام يكون فيها تطبيق المسافات على فصل دراسي مخصص أكثر كفاءة. نناقش استخدام فئة مخصصة في الجزء الثاني من هذه المقالة.

3. التباعد بين الطباعة والأزرار

في هذا المثال ، لدينا H3 ، فقرة ، و زر. يمكننا إنشاء مسافات بين هذه العناصر دون إنشاء فئة جديدة.

نستخدم كتل التباعد لإنشاء مسافة بين كل عنصر نصي ، مما يساعدنا على تجنب إنشاء فئات مخصصة.

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

بدلاً من ذلك ، يمكننا استخدام إستراتيجيتنا العالمية للطباعة مع استراتيجيتنا العالمية للمسافات لإنشاء تصاميم محتوى نصي بدون فئات مخصصة.

الفائدة: تجنب التكديس العميق لعناصر النص للفئة المساعدة

في Client-First ، نريد الحفاظ على خط العناوين والفقرة نظيفين من الفئات غير النصية.

في الوضع المثالي ، يجب الا توجد فئات مطبقة على عناصر الطباعة لدينا. من الأفضل استخدام أنماط العلامات الافتراضية H1-H6. إذا كان أسلوب الطباعة يختلف عن الافتراضي ، فيمكننا وضع فئات text- أو heading-.

نريد تجنب فئات margin- أو padding- مباشرة إلى عنصر النص. سنتعامل بسرعة مع مشكلات التكديس العميق إذا طبقنا فئات الطباعة والتباعد على عناصر النص.

تساعدنا كتل وأغلفة التباعد في تجنب التكديس العميق.

‍ لا نريد أن نفعل هذا:

تحل كتلة التباعد مشكلة تكديس فئات التباعد على عنصر النص.

مع فصل فئات التباعد عن فئات الطباعة لدينا ، يمكننا إدارة كل منها على حدة دون مشكلة التكديس العميق.

4. التباعد بين الرموز والمكونات المعاد استخدامها

الفائدة: يمكننا إنشاء مسافات خاصة بالمثيل "instance" للرموز والمكونات.

عندما نريد تطبيق التباعد على الرموز ، يجب تطبيق التباعد على جميع مثيلات " instances" الرمز.

قد يكون تباعد الرموز الموحد مشكلة إذا كانت مثيلات رمزنا تتطلب قيم تباعد مختلفة.

باستخدام كتل التباعد أو الأغلفة ، يمكن أن يكون لدينا مسافات مختلفة لمثيلات الرموز المختلفة.

لا توجد فئة مركبة مطلوبة ، ولا توجد فئات جديدة يتم إنشاؤها ، ولا توجد حاجة إلى CSS مخصصة.  يمنحنا نظام التباعد الخاص بنا مسافات خاصة بالمثيل "instance" أثناء استخدام المحتوى الأساسي المخزن في الرمز.

حالات الاستخدام: كتلة التباعد

1. خلق مساحة بين عنصرين

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

2. رؤية الأطفال"Child elements" في Navigator

عندما نستخدم كتل التباعد ، فإننا ننشئ عرضًا واضحًا في Navigator. يمكننا أن نرى كل عناصر المكون.

قد يؤدي استخدام عدد كبير جدًا من أغلفة التباعد إلى "إخفاء" عدد كبير جدًا من العناصر المهمة داخل المجلدات المتداخلة. ستعمل كتل التباعد على إنشاء تداخل أقل داخل Navigator.

تظهر كتل التباعد عناصرنا المهمة بشكل أكثر وضوحًا في Navigator.

3. تباعد فريد بين الأقسام العلوية والسفلية

عندما يكون ^padding-top و^{padding-bottom} مختلفين لقسم ما ، ونريد الحفاظ على نظام الفئة المساعدة العالمية ، يمكننا استخدام كتل التباعد.

يمكننا تطبيق كتلة تباعد padding-large في الجزء العلوي من القسم وكتلة تباعد padding-small في الجزء السفلي من القسم.

حالات الاستخدام: غلاف التباعد

1. استخدم مع استراتيجية تباعد شبكة CSS

باستخدام إستراتيجية تباعد شبكة CSS ، يمكننا بسرعة إنشاء مساحة متساوية بين عناصر الأطفال.

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

على سبيل المثال ، يحتوي عنصر المحتوى على ^1rem بين كل عنصر فرعي - باستثناء العنصر الأخير في القائمة.

يمكننا تطبيق margin-top margin-small كغلاف مسافات لآخر عنصر في القائمة.

تسمح لنا أغلفة التباعد باستخدام تباعد شبكة CSS دون إنشاء فئات مخصصة متعددة.

الجزء 2: الفئات المخصصة

لا تعد فئات التباعد المساعدة  فيClient-First هي طريقة التنفيذ الوحيدة للتباعد على موقعنا.

يمكننا تطبيق خصائص margin وpadding مباشرة على الفئة المخصصة.

داخل عقلية الفئة المخصصة ، نقدم استراتيجيتين للتباعد:

1.فئة مخصصة على العنصر

2.التباعد بين الأبوين في CSS Grid

تستخدم كلتا الإستراتيجيتين فئة مخصصة لإنشاء مساحة بين العناصر.

عندما نستخدم فئات مخصصة للتباعد ، يجب أن يكون لدينا حالة استخدام جيدة للفئة المخصصة. عدد أقل من الفئات المخصصة يعني مزيدًا من التناسق في التباعد.

فئة مخصصة على استراتيجية العنصر

تطبق "الفئة المخصصة على العنصر" قيم ^margin و^padding مباشرةً على العنصر الذي يجب تباعده.

‍

على سبيل المثال ، نطبق faq_title على عنوان يتطلب تباعدًا فريدًا لا يمكن لنظام فئة المساعدة تحقيقه. يتم تطبيق خاصية CSS من ^{margin-bottom: 0.75rem} مباشرة على فئة faq_title.

يطبق هذا الرسم فئة مخصصة وتباعدًا مخصصًا على العنصر.

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

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

استراتيجية شبكة CSS

تطبق إستراتيجية تباعد شبكة CSS Grid على غلاف أصلي مما يخلق مساحة للأطفال بداخله.

يمكننا إنشاء مساحة رأسية وأفقية بين العناصر الفرعية باستخدام CSS ^grid.

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

حالات الاستخدام: فئة مخصصة على العنصر

1. إدارة التباعد بين عنصر معين على الصعيد العالمي

الكلمات الرئيسية هي "عنصر محدد".

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

مغلفات التباعد العالمية على العناصر المتكررة قد تبطئنا وتجعل إدارة المشروع أكثر صعوبة.

يمكننا أن نسأل أنفسنا سؤالين مهمين لفهم ما إذا كان يجب علينا استخدام تباعد الفئة المساعدة أو فئة مخصصة لعنصر معين.

كم عدد حالات [هذا العنصر] في المشروع؟

إذا كان هناك العديد من مثيلات هذا العنصر المحدد ، فسيكون العنصر عنصرًا متكررًا في المشروع. يمكننا استهداف كل مثيل باستخدام فئة مخصصة.

على سبيل المثال ، إذا كان هناك 25 مثيلًا "instance" لهذا العنصر في المشروع ، فيمكننا استخدام فئة مخصصة واحدة لاستهداف جميع الحالات الـ 25.

كيف نريد إدارة كل مثيل من [هذا العنصر]؟

إذا أردنا إدارة كل مثيل من [هذا العنصر المتكرر] كمجموعة واحدة ، فسوف تساعدنا الفئة المخصصة في استهداف تلك المجموعة من العناصر وتطبيق التغييرات على المجموعة بشكل عالمي.

فئة مخصصة في مثال الإدخال

دعنا نلقي نظرة على مثال حالة استخدام مع مدخلات النموذج في مشروعنا. يتم استخدام مدخلات النموذج عبر 4 صفحات من المشروع.

يوضح الإعداد أدناه كل إدخال form_input مفصولة بكتلة تباعد. يتم استخدام هذه الإستراتيجية عبر المشروع بأكمله.

إذا أردنا تقليل التباعد بين كل إدخال form_input ، فسنحتاج إلى تحديث كل كتلة تباعد على حدة.

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

يمكن أن يستغرق التغيير في جميع مدخلات النموذج عبر المشروع ثوانٍ ويتطلب القليل من الجهد مع الإعداد المناسب.

ستسمح لنا فئة مخصصة في form_input بإدارة جميع عناصر form_input كمجموعة عناصر موحدة.

تُظهر لقطة الشاشة هذه كل form_input به ^{margin-bottom: 1rem} مطبق عليه.

إذا أردنا تغيير المسافة بين كل إدخال ، فيمكننا إجراء تغيير واحد على فئة form_input. سيؤدي تغيير الهامش إلى تغيير قيمة جميع المدخلات عبر المشروع.

هذا المثال مثالي إذا أردنا أن يكون لكل مدخلات النموذج في المشروع ^{margin-bottom: 1rem}.

لدينا سيطرة عالمية كاملة على التباعد بين هذا العنصر المحدد. يمكننا تغيير كل إدخال في النموذج على هذه الصفحة ، وعبر المشروع ، بتغيير واحد form_input ^{margin-bottom}.

2. أحجام التباعد بين الأجهزة اللوحية والهواتف المحمولة الفريدة

تتمتع كتل التباعد والأغلفة بفائدة  كبيرة تتمثل في الحفاظ على التباعد الافتراضي عبر جميع شاشات الأجهزة. ومع ذلك ، قد لا نريد مسافات افتراضية عبر جميع شاشات الأجهزة.

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

تم تصميم تباعد فئة المساعدة Client-First لتوحيد التباعد عبر جميع الشاشات. لا يسمح النظام بالتخصيصات عبر قياسات الشاشات مختلفة.

يمكننا تطبيق التباعد مباشرة على الفئة المخصصة إذا احتجنا إلى تخصيصات تباعد عبر نقاط قياسات الشاشات. ستسمح لنا الفئة المخصصة بإدارة التباعد عبر كل نقطة قياس.

‍

3. تباعد فريد لمرة واحدة

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

على سبيل المثال ، يصر العميل على أن اpadding-small صغير جدًا وأن padding-medium كبير جدًا. يريدون شيئًا في المنتصف.

بدلاً من فرض هذا العنصر الفريد في نظام تباعد الفئات المساعدة ، يمكننا إنشاء فئة مخصصة للعنصر والاستمرار في بنائنا. على سبيل المثال ، يمكننا إنشاء about-testimonials_title باستخدام ^{margin-bottom: 2.25rem} كفئة تباعد فريدة لمرة واحدة.

عندما لا نكون واضحين بشأن دمج نظام تباعد الفئات المساعدة في التصميم ، يمكننا إنشاء تباعد لمرة واحدة لهذا العنصر المحدد.

من المهم أن نفهم أنه كلما أنشأنا فئات مخصصة لمرة واحدة للتباعد ، كلما قل اتباعنا لنظام تباعد موحد عالميًا. لا ينبغي أن يكون هذه ممارسة شائعة لكل عنصر.

حالات الاستخدام: CSS Grid spacing

1. التباعد بين العناصر التابعة في قائمة

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

مثال على روابط تذييل شبكة CSS

لنلقِ نظرة على مثال حالة استخدام مع روابط في التذييل.

لدينا غلاف رئيسي يسمى footer_links-column والذي يقوم بتغليف روابط التذييل. يمكننا تطبيق ^{display: grid} مع صفوف لإنشاء مساحة متساوية بين جميع روابط التذييل.

إذا أردنا تغيير المسافة بين كل رابط تذييل ، فيمكننا إجراء تغيير واحد على فئة footer_links-column. سيؤدي ضبط مسافة الصف إلى ضبط المسافة بين جميع روابط التذييل.

‍

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

مثال على بطاقة محتوى شبكة CSS

تعمل تباعد CSS Grid أيضًا مع العناصر الفرعية لعناصر المحتوى.

لدينا عناصر "بطاقة المحتوى" متداخلة داخل قائمة. تحتوي كل بطاقة محتوى على عناصر متداخلة فيها. يمكننا تطبيق CSS Grid مباشرة على بطاقة المحتوى لتباعد الرمز والعنوان والفقرة بداخلها.

يتم تطبيق CSS Grid على benefits_item ، وتتأثر العناصر الموجودة بداخلها.

يمكننا ضبط قيم فئة CSS Grid وضبط جميع محتويات benefits_item مع وحدة تحكم واحدة.

تعمل هذه الإستراتيجية بشكل جيد جدًا إذا كانت المسافات بين كل عنصر فرعي متساوية. في مثالنا ، التباعد بين كل عنصر فرعي في benefits_item هو ^1rem. يتناسب هذا السيناريو تمامًا مع عناصر التحكم في صف CSS Grid.

لإضافة عنصر فرعي بقيم تباعد مختلفة في CSS Grid ، يمكننا استخدام طريقة مغلف التباعد فمع طريقة CSS Grid.

في المثال أدناه ، نضيف زرًا إلى بطاقة المحتوى. يتطلب هذا الزر مسافة ^3rem أسفل الفقرة. هذا لا يعمل مع قيم الشبكة المطبقة على benefits_item.

يمكننا إضافة غلاف مسافات أسفل الفقرة التي تغلف الزر الجديد.

الآن يؤدي تباعد padding-top  padding-medium المغلف إلى إنشاء مساحة إضافية داخل نظام شبكة benefits_item.

تعد أغلفة التباعد ممتازة لاستخدام إستراتيجية تباعد شبكة CSS بمرونة وتنوع.

يعمل هذا بشكل جيد لإنشاء تباعد محتوى محكوم عالمي.

قد يكون عنصر benefits_item عنصرًا متكررًا في جميع أنحاء الموقع.

تحتوي بعض بطاقات benefits_item على CTA ، والبعض الآخر لا يحتوي على CTA ، والبعض الآخر قد يحتوي على عناصر جديدة تمامًا.

يمكننا الاحتفاظ بالمسافات العالمية والموحدة benefits_item من خلال عناصر تحكم شبكة CSS الخاصة بنا مع الاستفادة من العناصر الخاصة بالمثيل واختلافات التباعد.

نصائح التباعد

padding-section-[size]

padding-section-[size]- - عبارة عن مجموعة من الفئات المساعدة التي تساعدنا في إدارة الحشو العلوي والسفلي للأقسام عالميًا خلال المشروع.

‍

هذا هو نهج هجين بين الفئة المخصصة والفئة المساعدة. يمكننا إدارة جميع مسافات الأقسام لدينا كفئة مساعدة عالمية.

يضاف مجلد جديد يسمى اsection- إلى مجلد فئة padding- الخاص بنا.

padding-section-small

padding-section-medium

padding-section-large

إذا كانت المساحة المتروكة العمودية للقسم شيئًا مخصصًا أو فريدًا ، فيمكننا:

• موصى به: استخدم كتل التباعد لإنشاء مساحة فريدة في الجزء العلوي والسفلي من القسم. تحافظ هذه الطريقة على نظام تباعد المساعدة.
• تطبيق المساحة المتروكة الفريدة على طبقة القسم الخارجي ، section_[section-identifier]

أضف هامشًا اختياريًا على علامات العنوان

قد نرغب في أن يكون لكل علامة عنوان نفس القدر من المساحة أعلى وأسفل. نريد توحيد المسافات في نظام الطباعة لدينا.

على سبيل المثال ، كل ^H2 في المشروع به ^{margin-bottom: 2rem} ، وكل ^H3 في المشروع له ^{margin-bottom: 1.5rem}.

يعد تطبيق الهامش على علامة العنوان محاولة لتوحيد التباعد أعلى وأسفل علامات العنوان الخاصة بنا. هذه هي الطريقة التي ننشئ بها قواعد مسافات عالمية لطباعتنا.

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

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

إذا واصلنا تجاوز قيم هامش العنوان الافتراضية ، فإننا ننشئ المزيد من العمل لأنفسنا.

إذا كان يجب أن تتبع جميع العناوين أو معظمها نفس الهامش عبر المشروع ، فقد تكون هذه إستراتيجية فعالة.

لدينا شرح كامل لطريقة تباعد الطباعة في إستراتيجية الطباعة.

فلكس أو شبكة للأزرار وصفوف الأزرار

استخدم CSS Flex أو الشبكة لإنشاء تصاميم أزرار بسيطة.

مثال زر مع رمز

قم بإنشاء زر مع نص وأيقونة. قم بتطبيق felx أو الشبكة "grid" على عنصر الزر لإنشاء مسافة بين النص والرمز.

هذه طريقة سريعة وبسيطة لتنفيذ زر به عناصر  متداخلة متعددة.

مثال على صف الزر

خلق مساحة أفقية بين زرين. قم بتطبيق المسافة الأفقية بين الأزرار من خلال الغلاف الرئيسي"الأب".

باستخدام ^flex أو ^grid على الغلاف الأصلي للأزرار ، يمكننا إنشاء مساحة أفقية بين الأزرار.

سيؤدي تطبيق ^margin-right مباشرة على فئة الزر إلى تقييد كيفية استخدام button. نريد أن يعمل button في جميع الحالات ، وليس فقط في صف من الأزرار.

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

نعتقد أن استخدام ^flex أو ^grid لخلق مساحة في صف من الأزرار مثالية.

تجنب مشاكل المساحة القابلة للطي

الأكورديون عند تغيير الارتفاع ، يتنافس الهامش مع الهامش. سنوضح ذلك لاحقا. ليس مهما للمراجعة.

تجنب استخدام الحشوة المساعدة لإنشاء حجم للعناصر الداخلية

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

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

بدلاً من ذلك ، قم بتطبيق المساحة المتروكة للعنصر الداخلي مباشرةً على الفئة المخصصة.