بناء مواقع الويب فائق السرعة مع Foundation 5 [دليل]
يمكن أن يؤدي استخدام إطار الواجهة الأمامية إلى تحسين سير عمل تصميم الويب الخاص بك بعدة طرق. يمكن تساعدك على اتباع مبادئ التصميم الحديثة مثل نهج المحمول أولا ، العلامات الدلالية والتصميم استجابة. يمكنك استفد من العديد من عناصر CSS و JavaScript الجاهزة للاستخدام وبشكل ملحوظ تسريع عملية التنمية الخاصة بك, تحرير المزيد من الوقت للتركيز على تصميم التجربة المرئية والمستخدم.
تعد Zurb Foundation 5 واحدة من أقوى الأطر الأمامية في السوق. إنه مصمم منطقيا ، سهل الاستخدام وخالي تماما. يتيح لك الاستفادة من شبكة CSS مرنة أن يسهل في إنشاء تصميم نظيف وسهل الاستخدام. تم اختبار إطار Foundation أيضًا بشكل كبير ، لذلك يعتني بالتوافق عبر المستعرض والتوافق عبر الأجهزة.
في هذا البرنامج التعليمي سوف أريك كيف يمكنك بناء موقع ويب فائق السرعة مع Zurb Foundation 5. يمكنك إلقاء نظرة على النتيجة النهائية على الصفحة التجريبية.
سوف أقوم بإنشاء تصميم الموقع ، مهمة إضافة عناصر تصميم خفية في انتظارك. سيحقق الموقع الذي سننشئه معًا في هذا البرنامج التعليمي حلم مصمم UX الحديث: سيكون سريع الاستجابة وسهل الاستخدام وسهل الاستخدام ودلاليًا.
نظرًا لطول هذا الدليل ، إليك الاختصارات للوصول إلى القسم الذي تريده بسرعة:
- تحميل مؤسسة 5
- فهم الشبكة
- عند استخدام الفصول الكبيرة - المتوسطة والمتوسطة والصغيرة-
- إضافة شريط القوائم العلوي
- ملء الجزء الرئيسي
- إضافة لوحة للوظائف الشعبية
- إضافة 3 المزيد من الوظائف إلى لوحة الشعبية
- التجهيز حتى المغلق
- مضيفا بعض المزيد من المحتوى
- مضيفا ترقيم الصفحات
- ملء الشريط الجانبي
- نموذج النشرة الإخبارية
- فليكس فيديو
- قائمة الشريط الجانبي
- استنتاج
1. تنزيل الأساس 5
يمكنك تنزيل Foundation 5 في 4 أشكال مختلفة:
- الرمز الكامل
- نسخة أخف وزنا مع فقط رمز أساسي
- نسخة مخصصة حيث يمكنك تخصيص ما تحتاجه وما لا
- إصدار Sass إذا كنت تريد ضبط المتغيرات والخلطات في SCSS.
في هذا البرنامج التعليمي ، سأختار الكود الكامل مع الفانيليا CSS ، لكن بالطبع يمكنك اختيار أي إصدارات أخرى إذا كنت ترغب في تبسيط موقعك واستخدام ما تحتاجه حقًا فقط.
بعد قيامك بتنزيل ملف zip وتفريغه ، افتح ملف index.html في المستعرض الخاص بك وسوف ترى شيئًا مثل هذا:
نعم ، تضمنت devs روابط مفيدة في ملف الفهرس. يمكنك ترك الأمر بهذه الطريقة وإنشاء ملف جديد للنموذج الأولي الخاص بك مع اسم home.html أو شيء مشابه ، لكن لا يلزمك الاحتفاظ به لأنه يمكنك الوصول بسهولة إلى "وثائق التأسيس" وقتما تشاء.
افتح ملف index.html في محرر الكود المفضل و حذف كل شيء داخل القسم ، ولكن قبل الختام قواعد النمط التي نضيفها إلى app.css ملف إلى حد ما النموذج الأولي لدينا هي هذه: كما يستخدم مؤسسة 5 وحدات النسبية, نحن بحاجة إلى استخدام “م”-ليالي أو “عيني”-ليالي بدلا من بكسل لمواكبة القواعد. (يمكنك أن تقرأ عن وحدات CSS: Pixels vs ems vs٪ هنا.) لقد استخدمت امتداد Firebug's Firebug لتحديد المكان الذي يجب علي فيه تجاوز قواعد CSS الخاصة بـ Foundation 5 ، يمكنك استخدام أي ملحقات أخرى لمتصفح تطوير الويب إذا كنت تريد. هنا في قصاصة CSS القصيرة هذه ، كان علينا فقط تجاوز CSS الافتراضي للمؤسسة مرة واحدة فقط ، في القاعدة الأخيرة (.row .row.popular-main). إليك ما يبدو عليه الموقع التجريبي الآن: باستخدام نفس القواعد كما كان من قبل ، سنضيف المزيد من المحتوى إلى القسم الرئيسي من الصفحة. المحتوى الذي سنضيفه الآن سيكون آخر المشاركات مع الصور المصغرة الصغيرة. يحتوي Foundation 5 على أنماط صور مصغرة تم إعدادها مسبقًا وسنستخدمها في هذه الخطوة. استخدام مصغرات الأساس فئة CSS سابقة الإنشاء تسمى “عشر” التي نحتاج إلى إضافتها إلى الصور التي نريد عرضها كصور مصغرة بالطريقة التي تراها في مقتطف الشفرة أدناه. لكل وظيفة جديدة نضيف صفًا جديدًا أسفل لوحة الشعبية من خلال موقعنا فئة CSS مخصصة تسمى “أحدث ما بعد”. على الجهاز اللوحي وحجم سطح المكتب ، سنظهر صورة مصغرة باستخدام فئة الصور المصغرة للمؤسسة على اليسار ، والعنوان ووصف مختصر على اليمين. على الهاتف المحمول ، سيكون العنوان والوصف أسفل الصورة المصغرة. الآن اعتدت على “متوسطة 3 أعمدة” و “متوسطة 9 أعمدة” الطبقات لجعلها تقسم الشاشة إلى 1: 3 ، 25 ٪ للصورة و 75 ٪ للنص أعلى من الحجم المتوسط. أدرج مقتطف الشفرة التالي أسفل لوحة الشعبية ثلاث مرات (للحصول على آخر ثلاث مشاركات). أنا هنا فقط أدرج رمز صف "آخر نشر" ، حيث يستخدم كل منهم نفس علامة HTML ، يختلف المحتوى فقط. محتوى آخر مشاركة ... تم إنشاء ملف CSS المخصص الخاص بنا في الخطوة 4.3, app.css كما يحصل على بعض قواعد أسلوب جديد للحفاظ على مظهر التجريبي مرتب. ملحوظة: إذا كنت ترغب في إضافة CSS المخصص الخاص بك إلى Foundation ، فلا تنس أبدًا التحقق ، باستخدام أداة تطوير الويب ، حيث يتعين عليك تجاوز القواعد الافتراضية. في مقتطف CSS أدناه ، نحتاج إلى تجاوزهم في القاعدة الأولى (.row .row.latest-post). في القاعدة الثانية ، يكفي استخدام محددنا المخصص (أحدث إصدار H4). نموذجنا الأولي يبدو الآن كالتالي: في هذه الخطوة ، سنقوم بإضافة ترقيم صفحات رائع أسفل أحدث المشاركات. تقدم لنا Foundation 5 يد المساعدة من خلال فصول ترقيم الصفحات المريحة والمجهزة للاستخدام. نستخدم نفس الكود في هذه الخطوة التي يمكنك العثور عليها في “المتقدمة” القسم داخل مستندات ترقيم الصفحات. فيما يلي أحدث المشاركات في قسم ترقيم الصفحات المضافة حديثًا: الآن وقد أصبحنا على استعداد للمحتوى الرئيسي لموقعنا التجريبي ، فقد حان الوقت لملء الشريط الجانبي الأيمن. سوف ينزلق الشريط الجانبي الأيمن إلى أسفل المحتوى الرئيسي على أحجام الأجهزة المحمولة والأجهزة اللوحية. تحتاج إلى إدراج جميع مقتطفات الشفرة في هذا القسم داخل سيحتوي الشريط الجانبي الأيسر على نموذج الاشتراك في النشرة الإخبارية (1) ، وآخر فيديو (2) وقائمة الشريط الجانبي على غرار الأكورديون تحت الاسم المستعار “كتاب الطبخ لدينا” (3). في نهاية هذه الخطوة ، سنكون مستعدين بعرضنا التجريبي الذي سيبدو كما يلي: لبناء نموذج في Foundation 5 ، ليس عليك القيام بأي شيء آخر ، فقط ضع الشبكة داخل علامة HTML. إذا ألقيت نظرة على مقتطف الشفرة أدناه ، فسترى أننا نضع النموذج في صف نضع فيه محددات CSS مختلفة لجميع الشبكات الثلاث: “12 الصغيرة”, “متوسطة 9”, و “واسع 12”. لقد اخترنا هذا الحل لأن نموذج رسالة إخبارية عريض بنسبة 100٪ يبدو رائعًا على حجم الهاتف المحمول ، لكنه حقًا غريب جدًا على حجم الجهاز اللوحي عندما يصبح للغاية على نطاق واسع. لحسن الحظ Foundation 5 يتيح لنا استخدام “صفوف غير كاملة”: لدينا فقط لإضافة “النهاية” الفئة إلى تعريف فئة CSS للعمود غير المكتمل. هذا ما سيحدث هنا: على حجم الهاتف المحمول ، سيتم عرض الشريط الجانبي أسفل المحتوى الرئيسي مع نموذج الاشتراك في النشرة الإخبارية التي تغطي الشاشة بأكملها. في الحجم المتوسط ، سيظل الشريط الجانبي تحت المحتوى الرئيسي ، لكن نموذج النشرة الإخبارية سيغطي فقط 75٪ من الشاشة ، والبقية 25٪ ستبقى فارغة. على حجم سطح المكتب ، سيكون الشريط الجانبي بجوار المحتوى الرئيسي مباشرةً ، وسيغطي نموذج الرسالة الإخبارية عرض الشريط الجانبي بالكامل مرة أخرى. راجع مستندات الشبكة لقراءة المزيد حول الصفوف غير المكتملة. الآن نلقي نظرة داخل header margin-bottom: 2em؛ .popular-extra h4 font-size: 1.125em؛ أعلى هامش: 0.4 م ؛ .row .row.popular-main margin-bottom: 1.5em؛
4.4 إضافة بعض المزيد من المحتوى
عنوان آخر مشاركة
.row .row.latest-post margin-bottom: 1.5em؛ .lest-post h4 margin-top: 0؛ حجم الخط: 1.125em ؛
4.5 مضيفا ترقيم الصفحات
5. ملء الشريط الجانبي
5.1 نموذج النشرة الإخبارية
الاشتراك في النشرة الإخبارية
تحتوي نماذج الأساس على العديد من خيارات التخطيط الأخرى مثل Prefix Label و Prefix Radius Label و Postfix Button و Postfix Label. اخترنا خيار Postfix Button هنا لأنه سهل الاستخدام: يمكن للمستخدمين النقر فوقه وإرسال النموذج مرة واحدة.
داخل النموذج ، سنضيف صفًا متداخلًا جديدًا يقسم الشاشة إلى 2: 1. سيحصل إدخال النص على 8 أعمدة وسيحصل الزر postfix على 4. حيث أننا نريد أن يكون هذا التنسيق حتى على شاشة الجوال ، سنقوم بتعيين “صغير 8 أعمدة” و “صغير - 4 أعمدة” محددات CSS هنا ، الشبكة الصغيرة هي أصغر حجم حيث نريد تنفيذ هذا الترميز.
يمكنك رؤية شيء جديد آخر في كود HTML أعلاه وهو “انهيار الصف” صف دراسي. هذا هو النمط المدمج في مؤسسة 5. بشكل افتراضي ، هناك مزراب بين عمودين متجاورين ، لكن إذا أضفنا “انهدام” فئة إلى صفنا ، فإن الحضيض تختفي. نفعل هذا لأننا نريد أن يكون الزر بجوار إدخال النص دون أي مسافة بينهما.
الآن حان الوقت لإدراج مقتطف الشفرة هذا في
5.2 فليكس فيديو
أسفل قسم النشرة الإخبارية ، سنضيف وصفة فيديو يومية إلى الشريط الجانبي. الأساس 5 يساعدنا اجعل مقاطع الفيديو المضمّنة سريعة الاستجابة وأجبرها على التوسع تلقائيًا مع ميزة Flex Video.
فيديو فليكس استخدام المدمج في “المرن الفيديو” الطبقة المغلق. ننشئ صفًا جديدًا لقسم الشريط الجانبي للفيديو اليومي وصفة ونضع عمودًا واسعًا به “صغيرة -12 متوسطة -9 كبيرة -12 عمود” محددات CSS لنفس السبب استخدمنا صفًا غير مكتمل في الشبكة المتوسطة في الخطوة السابقة.
إليك الكود الذي تحتاج لصقه أسفل قسم الرسائل الإخبارية. يمكنك استخدام أي فيديو من Youtube و Vimeo وما إلى ذلك.
وصفة الفيديو اليومية
5.3 قائمة الشريط الجانبي
بالنسبة لقائمة الشريط الجانبي ، سنستخدم ميزة الأكورديون في Foundation 5. الأكورديون هي عناصر على شبكة الإنترنت تعمل على توسيع المحتوى وتقسيمه إلى أقسام منطقية.
على موقع العرض التوضيحي الخاص بنا ، هذه الأقسام المنطقية هي 3 مجموعات طعام مختلفة (الأطباق الرئيسية ، الأطباق الجانبية ، الحلويات) ، وتحتوي كل مجموعة على مجموعات أصغر مثل “دواجن”, “لحم خنزير”, “لحم بقري”, “نباتي”.
نضع الأكورديون في الشريط الجانبي بالكامل في عمود واحد واسع بنفس المنطق كما في الخطوات 5.1 و 5.2 من قبل. نضع الأكورديون بداخله كقائمة غير مرتبة مع فئات CSS المضمنة المناسبة مثل “أكورديون” و “الأكورديون الملاحة”.
أثناء عمل Foundation Accordions مع JavaScript ، يمكنك تخصيص سلوكه بمساعدة متغيرات JavaScript مسبقة الصنع إذا كنت تريد ذلك. للقيام بذلك ، انظر إلى “تكوين جافا سكريبت اختياري” القسم في مستندات الأكورديون. يأتي مقتطف الشفرة التالي أسفل قسم Flex Video داخل ملف index.html.
استنتاج
الآن وقد أصبحنا مستعدين لموقعنا التجريبي ، دعونا نرى ما يمكنك إنجازه مع Foundation 5. إن العناصر التي استخدمناها في هذا العرض التوضيحي هي مجرد مجموعة صغيرة من ميزات إطار عمل Foundation. هناك العديد من الأشياء الأخرى التي يمكنك الاستفادة منها في التصميم الخاص بك ، مثل أشرطة الأيقونات القابلة للتخصيص ، فتات الخبز ، Lightboxes ، Range Sliders ، التحقق من صحة النموذج ، والعديد من الأشياء الأخرى. المستندات مكتوبة بشكل جيد وهي تساعد المطورين في العديد من أمثلة التعليمات البرمجية.
إذا كنت معتادًا على Sass ، فلديك المزيد من الخيارات ، حيث يشرح كل قسم في Docs كيف يمكنك إنشاء مزيج خاص بك ، وأي متغيرات Sass يمكنك استخدامها لتخصيص موقعك. قبل البدء في تصميم صفحة الويب الخاصة بك ، لا تنس التحقق من توافق إطار عمل Foundation للتأكد من أنه يعمل على جميع المتصفحات التي تحتاج إلى إنشاء.
- عرض تجريبي
- تحميل المصدر
