تحديثات 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.
- يمنحنا مسار التعلم مسارًا مدته 7 أيام لتعلم Client-First.
- تساعد المستندات الكبيرة في تحفيزنا على تعلم Client-First بالكامل.
- تعطينا إستراتيجية المجلدات والمجلدات شرحًا كاملاً لطريقة تصور جديدة للفئات.
- تمنحنا علامات HTML الدلالية فهمًا أفضل لكيفية البناء في الـ HTML بشكل صحيح.
- يساعدنا التضمين الشامل على فهم الغرض من CSS المخصص المضاف إلى مشروع Client-First القابل للاستنساخ.
- خصوصية CSS تعطينا شرحًا أوضح عن سبب عدم عمل فئات الهامش والحشو عند النسخ واللصق.
- تمنحنا إستراتيجية المبيعات طرقًا لاستخدام Client-First في عملية المبيعات لدينا للحصول على المزيد من المشاريع.
- يمنحنا تحويل المشاريع القديمة معلومات حول تحويل المشاريع السابقة إلى Client-First.
من Client-First إلى Client-First
أصدرت Finsweet مؤخرًا شعارًا جديدًا. يستبدل هذا الشعار الحرف "f" الصغير بحرف كبير "F".
سنتبع نفس الاتجاه لـ Client-First.
سنتبع نفس النهج مع Client-First.
يتميز Client-first V1 بحرف "f" صغير. أما في V2 ، نقوم بإستخدام F كبيرة. يغير هذا التحديث Client-first إلىClient-First.
هل أنت مهتم بانتقال Finsweet من f إلى F؟ شاهد البث المباشر هنا.