يعمل فريق التصميم على إجراء تغييرات/تعديلات صغيرة ولكنها قوية على سمة foundation (الأساس) لمواءمتها بشكل أوثق مع معايير الويب الحديثة. لعرض هذه التغييرات مباشرة على meta، انضم إلى هذه المجموعة:
https://meta.discourse.org/g/modernized-foundation
سنقوم بتطبيق هذا التغيير مباشرةً من خلال ميزة Upcoming Changes (التغييرات القادمة) المتاحة في Discourse. سيتيح هذا لمالكي المواقع تمكين التغييرات لأي مجموعة يحددونها، وذلك لاختبار طرح التغييرات دون الخوف من إمكانية إتلاف السمات أو التخصيصات الحالية.
ما الذي سيتغير؟
تقلص ارتفاع الرأس (Header)
لقد قللنا حجم الرأس إلى جانب بعض الأيقونات والصورة الرمزية (avatar) قليلاً للاستفادة من مساحة الشاشة.
الأزرار الافتراضية (Default buttons)
ننتقل من خلفية زر رمادية افتراضية إلى خلفية شفافة / “ثانوية” مع حدود.
- إزالة الخلفية الرمادية
- إضافة حدود
- يتطابق لون الأيقونة مع لون النص
- أصبحت الأزرار الآن ذات ارتفاع محدد
زر إنشاء موضوع جديد في صفحة قائمة المواضيع
مطابقة لـ Horizon وإعطاء هذا اللون الخلفي لـ “دعوة لاتخاذ إجراء” (CTA) وهو tertiary (ثالثي).
إزالة الكثير من الخلفيات الرمادية
قائمة المواضيع
- إزالة الحد العلوي السميك بحجم 3 بكسل
- تقليل حجم خط بيانات رأس الجدول
- لون متسق لعناصر بيانات الجدول
- تغيير قيمة اللون للقراءة/غير مقروء
- زيادة طفيفة في وزن الخط للعناصر غير المقروءة
الفئات (Categories)
- محاذاة النص إلى اليسار
- إزالة الحد الملون السميك الأيسر
- شارات مستديرة قليلاً
- حد أرق على الصندوق
شريط التنقل (Nav bar)
- ستكون أقراص التنقل في صفحات قائمة المواضيع بنفس ارتفاع الأزرار في هذه المنطقة
- لون نص وأيقونة أغمق على المجموعة المحددة (select kit)
الشريط الجانبي (Sidebar)
- يتطابق لون الأيقونة والنص
- نص وأيقونات أغمق
- خلفية “نشط” أفتح
- وزن خط نشط أثقل
لافتة الترحيب (Welcome banner)
- مسافات متوازنة
- تمت إضافة متغيرات لتسهيل المحاذاة لليسار/اليمين/الوسط عبر التخصيص
- انخفاض وزن خط العنوان
- انخفاض حجم خط العنوان الفرعي
التقويم (Calendar)
- إزالة الخلفية الرمادية من “الأزرار”
- استخدام اللون الرمادي فقط للإشارة إلى “نشط”
- التبديل إلى نمط زر “شفاف ذو حدود”
القوائم المنسدلة (Drop downs)
- تمت إضافة مسافة بادئة إلى حاوية القائمة المنسدلة
- يتطابق الارتفاع والمسافة والفجوة الآن مع عناصر الشريط الجانبي
- توحيد “القوائم القابلة للنقر”
- يرث الحد المتغير
--d-border-radius
متغيرات جديدة (New Variables)
سيتم تقديم بعض التغييرات هنا من خلال متغيرات إضافية تمت إضافتها إلى core (الأساس).
محاذاة لافتة الترحيب
ستتمكن الآن من تغيير محاذاة لافتة الترحيب عبر:
// الافتراضي
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// مخصص
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
ارتفاع الزر
سيكون لدينا الآن ارتفاع زر محدد عبر:
// الافتراضي
--button-height: var(--space-8);
تنعيم الخط (Font smoothing)
نحن نقوم بذلك بالفعل في Horizon، ومن المنطقي إحضاره إلى foundation.
// الافتراضي الجديد
--webkit-font-smoothing: antialiased;
