الدليل من V1 الى V2

تحديثات أساسية في Client-First V2.

تحديثات V2 

تم شرح كل شيء بشكل أكثر وضوحًا في V2  


نقدم لكم نهج إستراتيجية [الموضوع].

أهم تحديث لبرنامج Client-First V2 هو كيفية شرح مفاهيم Client-First. افتقر V1 إلى تنظيم المحتوى والتفسير الواضح لبعض الموضوعات.

يقدم V2 طريقة جديدة لتنظيم المحتوى لمساعدتنا على فهم Clint-First بشكل أفضل. كل موضوع له شرح أكثر دقة.

— يتم تنظيم الموضوعات الأكثر أهمية على أنها "استراتيجيات" 

المجلدات

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

ستسمح لنا مجلدات Client-First بتنظيم الفئات في بنية مجلد مرنة.

استخدم الشرطة السفلية(_) لإنشاء مجلد مخصص. تنظيم الفئات المساعدة عن طريق الشرطات (-) فقط.

ستعمل المجلدات فقط مع Client-First + ملحق Finsweet. تعرف على المزيد في المجلدات.

تحديد المكونات "Components" بشكل أفضل

في V2 ، سنكون أكثر تحديدًا عندما نستخدم المكونات - وأكثر تحديدًا عند استخدام الشرطة السفلية!

الإصدار الأولي V1

‍underscore في اسم الفئة = المكون "component"

إصدار V2 مع مجلدات

‍underscore في اسم الفئة = مجلد

[folder-name]_component = المكون "component"

لا يعني استخدام شرطة سفلية في اسم الفئة بالضرورة أن المجلد مكوِن. نستخدم الآن الشرطة السفلية لتنظيم أو تجميع العناصر في المجلدات.

المكونات الآن لها تصنيف محدد. إذا أردنا اعتبار العنصر مكونًا ، فإننا نستخدم كلمة "component" لمعرف العنصر.

تعرف على المزيد في استراتيجية المجلدات.

تحديد أنواع الفئات بشكل أفضل

يتم تحديد وشرح الفئة المخصصة ، والفئة المساعدة ، والفئة العالمية ، والفئة المركبة بشكل أفضل في استراتيجية الفئات 1.

من خلال فهم أنواع الفئات بشكل أفضل ، يمكننا اتخاذ قرارات أفضل أثناء البناء.

page-padding هي الآن padding-global

تُسمى الآن قيمة الحشوة (padding) الأكثر أهمية في مشروعنا مساحة  padding-global. يؤدي تغيير الاسم هذا إلى تنظيم أفضل لنظام المجلدات الخاص بنا.

بدلاً من وضع فئة padding بنا في مجلد page- ، نضعها في مجلد padding-.

تعرف على المزيد في استراتيجية الهيكل الأساسي.

section-[identifier] هي الآن section_[identifier]

تستخدم فئات الأقسام الآن الشرطة السفلية بدلاً من الشرطة.

يؤكد تحديث المجلد الجديد الخاص بنا أن الفئات المساعدة تستخدم الشرطات فقط. تستخدم الفئات المخصصة شرطة سفلية.

 section_  — تضع الشرطة السفلية فئات الأقسام داخل نظام مجلدات الفئة المخصصة.

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

padding-section-[size] جديد يحدد الحشو العالمي للأقسام "global section padding"

لقد أضفنا نظامًا جديدًا للفئة المساعدة لإدارة التباعد العالمي (global spacing) عبر المسافات. يهدف تحديث نظام التباعد هذا إلى الحد من عدد خيارات التباعد التي لدينا للأقسام + إبقائها موحدة عبر المشروع بأكمله.

تعرف على المزيد في استراتيجية الهيكل الأساسي.

 فئات Padding-section-[size]   جديدة — 3 فئات

heading-style-[h#] جديد يحافظ على أنماط عناوين موحدة 

عندما تحتاج أنماط علامة العنوان إلى عرضها كعلامة عنوان مختلفة ، يمكننا استخدام heading-style-[h#] .

على سبيل المثال ، إذا احتجنا إلى H2 لأغراض تحسين محركات البحث ، ولكن النص يجب أن يتبع أنماط H3 ، فيمكننا تطبيق العنوان  heading-style-h3 على H2 لتغيير نمطه مع الحفاظ على علامة HTML tag الدلالية المناسبة.

تعرف على المزيد في استراتيجية الطباعة

فئات  heading-style-[h#] جديدة — 6 فئات .

فئة مساعدة جديدة display-inlineflex

تطبيق خاصية ال css التالية  display: inline-flex ، وهي ليست خاصية CSS مدعومة في Webflow.

حالة الاستخدام: استخدام خاصية CSS التالية display: flex عادةً ما تكون مهمة في مشروعنا. ومع ذلك ، يتسبب display: flex في أن تشغل العناصر 100٪ من المساحة افتراضيًا. هذا يجعل من الصعب استخدام flexbox للأزرار. display: inline-flex يسمح للعناصر بالتصرف على أنها مضمنة"inline" ، مع الحفاظ على القدرات المرنة بداخلها.

تعرف على المزيد في أنظمة الفئات المساعدة.

فئات  display-inlineflex جديدة — فئة واحدة .

تمت إزالة الفئة المساعدة show-

تمت إزالة فئات المساعدة show-. إظهار الفئات المطبقة display: block عند أحجام الشاشات المختلفة.

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

بدلاً من تطبيق فئات "show" على العناصر ، يمكننا تطبيق خصائص display مباشرةً على الفئة المخصصة.

بالإضافة إلى ذلك ، يمكننا تطبيق أي خصائص display على فئة المركبة. على سبيل المثال ، modal_component is-visible-tablet

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

يتوسع V2 في كيفية استخدام الفئات المساعدة والفئات المخصصة لتقسيم العناصر في جميع أنحاء المشروع. لقد أضفنا طرقًا جديدة لتطبيق التباعد.

التباعد مع نظام الفئة المساعدة

  • أغلفة التباعد (V1)
  • كتل التباعد (جديد في V2)

التباعد مع الفئات المخصصة

  • على العنصر (V1)
  • شبكة CSS على الأصل (جديد في V2)

تم تحسين CSS المخصص في تضمين الأنماط العالمية "Global Styles embed"

هناك نظرة عامة كاملة على كل مقتطف CSS مضمن في صفحة تضمين الأنماط العامة.

صفحات جديدة تمامًا في V2

يضيف V2 صفحات محتوى جديدة للموضوعات التي لم يتم تناولها في V1

من Client-First إلى Client-First

أصدرت Finsweet مؤخرًا شعارًا جديدًا. يستبدل هذا الشعار الحرف "f" الصغير  بحرف كبير "F".

سنتبع نفس الاتجاه لـ Client-First.

سنتبع نفس النهج مع Client-First.

يتميز Client-first V1  بحرف "f" صغير. أما في V2 ، نقوم بإستخدام F كبيرة. يغير هذا التحديث Client-first إلىClient-First.

هل أنت مهتم بانتقال Finsweet من f إلى F؟ شاهد البث المباشر هنا.

NEXT

المستندات الكبيرة

Client-First يحتوي على الكثير من المستندات. تشرح هذه الصفحة سبب كون المستندات طويلة ومهمة.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset
HTML font size
px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
px values
rem values
2px
=
0.125rem

Closest to Client-First values

2px
=
0.125rem

Neighboring values

2px
=
0.125rem