مؤسسة ZURB: إطار عمل CSS لواجهة المستخدم لواجهة أمامية سريعة الاستجابة

في عام 2010 ، أنشأت وكالة التصميم ZURB إطار عمل CSS بهدف بدء خدمة لـ تسهيل إنشاء النماذج الأولية e تقصير أوقات التطوير. للقيام بذلك ، تم اختيار أفضل المقتطفات والأنماط والقوالب لتجميعها معًا في Foundation ، وهو إطار العمل الذي تم نشره كمشروع مفتوح المصدر في عام 2011 والذي لا يزال منذ ذلك الحين متاحًا للجمهور مجانًا.

الأساس هو إطار أمامي سريع الاستجابة ، يتكون من مكونات HTML و CSS فعالة لتكوين واجهة المستخدم (واجهة المستخدم) ومقتطفات وقوالب مختلفة ولكن أيضًا العديد من امتدادات JavaScript الاختيارية. يحتوي إطار عمل الويب على ملف هيكل الوحدة وقد تم تصميمه لتكوين مشاريع يمكن الوصول إليها من أجهزة مختلفة ؛ يتم توزيعها مع رخصة معهد ماساتشوستس للتكنولوجيا ويمكن تنزيلها من كليهما الصفحة الرئيسية الرسمية كلا GitHub جيثب:. من الإصدار 4.0 الأساسي يتم تطبيق فرضية العمل "الجوال أولاً"، لذلك منذ ذلك الحين ونحن نعمل بمساعدة العديد من الوحدات الجديدة لتحسين الأداء وتقليل حجم الملفات داخل إطار العمل. بالإضافة إلى الإصدار القياسي من Foundation ، نشر ZURB أيضًا متغيرات أخرى لتطوير الرسائل الإخبارية عبر البريد الإلكتروني (مؤسسة رسائل البريد الإلكتروني) ومواقع صفحة واحدة (مؤسسة التطبيقات).

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

بالنسبة إلى Foundation 6.0 لديك خيار أكثر مكونات 40 تنتمي إلى القطاعات السبعة التالية:

• شبكة: العنصر الحاسم لتصميم الويب سريع الاستجابة هو التخطيط المرن للشبكة ، بعرض متوافق مع المعايير يبلغ 1200 بكسل. يمكنك أيضًا إلغاء تحديد هذه الوحدة ، إلا أن النظام يشكل الأساس لتصميم مشروع ويب يمكن الوصول إليه من أجهزة مختلفة ومتوافق مع مقاييس دقة مختلفة. بالإضافة إلى ذلك ، بدءًا من الإصدار 6.0 ، هناك أيضًا إمكانية اختيار وحدة "Flex Grid" ، والتي تتيح تحديد موضع العناصر بشكل أكثر مرونة من خلال التشغيل على أساس نموذج CSS flexbox (مثل الوضع الأفقي أو الرأسي تنظيم الأشياء).

• العلاجات العامة: من بين الوحدات العامة (التي تعد الشبكة أيضًا جزءًا منها رسميًا) ، توجد الفئات أولاً وقبل كل شيء الطفو e رؤية، بفضل ذلك يمكنك defiتحديد قواعد السلوك فيما يتعلق بتحديد المواقع ورؤية العناصر الفردية ؛ بالإضافة إلى ذلك ، ستجد في هذا المجال أيضًا مكونًا لإنشاء النماذج ، بالإضافة إلى وحدة الطباعة التي تحتوي على التنسيقات الأساسية للكتابة والنص.

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

• قائمة الإختيارات: في تكوين الواجهة الأمامية ، لا يمكن بالتأكيد أن تكون عناصر التنقل مفقودة ، لذلك حتى بالنسبة لمشروعك الذي سيتم تنفيذه مع مؤسسة ZURB ، لديك مجموعة كبيرة ومتنوعة من الوحدات التي يمكنك تعيينها أشرطة القوائم والقوائم (قائمة منسدلة ، قائمة منسدلة ، تنقل لأسفل) ، أضف مسارات تنقل (فتات الخبز) أو أضف الرقم إلى الصفحات.

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

• الوسائط: داخل قسم "الوسائط" ستجد وحدات إطار العمل التي ستكون مفيدة لدمج عناصر الوسائط المتعددة. عنصر "Flex Video" ، على سبيل المثال ، يدعمك فيإدخال مقاطع الفيديو ويتأكد من أن المحتوى يتلاءم مع أحجام وأنواع دقة العرض المختلفة. بالإضافة إلى ذلك ، هناك أيضًا مكونات لمعاينة الصور بالإضافة إلى نصائح مفيدة لاستخدام الأدوات.

• توصيل في: أخيرًا يمكنك اختيار بعض الإضافات المفيدة جدًا لمؤسسة ZURB والتي تسهل عليك العمل مع إطار عمل الويب. مع مكتبة "Motion UI" ، على سبيل المثال ، لديك إمكانية تنزيل مكتبة مفيدة للغاية ، حتى لو كانت متاحة فقط لمتغير Sass ، مما يجعل إنشاء ممرات واجهة المستخدم والرسوم المتحركة أمرًا سهلاً.

أيضًا ، قبل التنزيل ، يمكنك اختيار ما إذا كان defiإنهاء بعض الإعدادات القياسية للإطار. يتضمن ذلك خيارات لتغيير عدد الأعمدة أو سمكها والحد الأقصى لعرض نظام الشبكة ، بالإضافة إلى إعدادات الألوان المختلفة وتحديد اتجاه النص (من اليسار إلى اليمين أو من اليمين إلى اليسار). إذا كنت تريد أولاً اختبار إطار العمل دون دراسة أداء الوحدات الفردية ، فيمكنك أيضًا تنزيل Foundation كإصدار كامل (كامل) أو بدلاً من ذلك كمتغير أساسي أخف (اسينشال).

إذا كنت راضيًا عن الفرص التي توفرها CSS ثم قم ببساطة بنسخ الأنماط الموجودة في ملف CSS الذي تم تنزيله ، فمن المؤكد أنك اتخذت القرار الصحيح. ومع ذلك ، فإن إطار العمل الأساسي له ميزة خاصة أخرى: أساس كود CSS مكتوب بلغة ورقة نمط Sass (أوراق أنماط رائعة نحويًا) ، وهو ما يسمى المعالج المسبق لـ CSS. يتيح لك Sass العمل على أوراق الأنماط .scss والتي يمكن بعد ذلك تجميعها أو نسخها إلى ملفات .css شائعة ثم يتم قراءتها وتفسيرها بواسطة المتصفحات.

إذا كنت تستخدم متغير Sass لإطار عمل ZURB ، فستتمتع بالمزايا التالية:

• بناء الجملة المبسط (Sass أو CSS) ، مما يسهل كتابة أوراق الأنماط

• امكانية defiينهي من النماذج (Mixins) لحفظ التنسيقات المتكررة مركزيًا ودمجها حسب الرغبة

• مزيج بسيط من أوراق الأنماط المختلفة لتقليل طلبات HTTP

• استخدام المتغيرات والوظائف لتبادل الألوان والمسافات والخطوط وما إلى ذلك بشكل مركزي

• يمكن تنظيم الكود ببساطة بفضل التعشيش بترتيب هرمي ، مما يسمح لك بالعمل بشكل أنظف بدون الكثير من سلاسل التعليمات البرمجية

تمت كتابة مترجم Sass في الأصل بلغة Ruby. ومع ذلك ، إذا لم تستخدم لغة البرمجة هذه ، فلن تضطر إلى تثبيتها لـ Sass لأنه مع LibSass سيكون لديك بديل مكتوب بلغة C. يعمل LibSass مع جميع أنظمة التشغيل المستخدمة ويمكن تثبيته بسهولة على Node.js سير العمل ، أي لإجراء تغييرات على الكود في Sass وترجمتها تلقائيًا إلى CSS.

مع الانتقال من الإصدار 5 إلى Foundation 6.0 ، خفضت ZURB مرة أخرى حجم ملف الإطار بأكمله: بفضل 60 كيلوبايت من CSS و 84 كيلوبايت من JavaScript ، تتمتع المؤسسة بسمعة كونها أحد أكثر منصات التطوير انسيابية وقراءة أن هناك. بفضل الهيكل المعياري المذكور أعلاه وحرية تخصيص معينة ، يمكنك حتى تقليل حجم الإطار بشكل أكبر. بالاقتران مع الشبكة المرنة والمختلفة سماتARIA (على سبيل المثال لنقل التنقل الفعال باستخدام لوحة المفاتيح) الذي تم تنفيذه بواسطة ZURB ، يمكن اعتبار الشروط الأساسية ، التي لا غنى عنها لتحقيق مشروع ويب متوافق مع الأنظمة الأساسية والأجهزة المختلفة ، راضية تمامًا. من الأفضل توثيق سمات ARIA وتكون متاحة حيث تنوي تحسين إمكانية الوصول إلى موقع الويب الخاص بك بشكل كبير.

إذا كنت تعمل باستخدام إصدار Sass من إطار العمل ، فتأكد من توسيع خياراتك لتكوين عناصر التصميم والتخطيطات التي تقوم بإدراجها. استخدام أوراق الأنماط الخاصة هذه ليس سهلاً بأي حال من الأحوال للمبتدئين ويتطلب فترة معينة من التعلم ، وهذا ينطبق بشكل عام على النظام الأساسي أيضًا. أنا أيضاً'تكامل المكونات الخارجية، وكذلك الوحدات النمطية والمشاريع التأسيسية في إطار آخر أو في CMS معقدة للغاية. نقاط الضعف الصغيرة التي تظهرها ZURB Foundation مقارنة بأطر CSS الأخرى ، مثل Twitter Bootstrap ، هي التنوع المحدود للقوالب ونقص الدعم للإصدارات الأقدم من Internet Explorer.

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

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