البحث في الموقع
المحتوى عن 'foundation 101'.
تم العثور على 4 نتائج
-
المُقدّمة Foundation هو إطار عمل مُتجاوب (responsive) لجهة العميل (client-side)، أنشأتهُ شركة Zurb عام 2011 لتسهيل إنشاء المواقع، يُمكّنك Foundation من بناء موقعك بشكل سريع ممّا يزيد من إنتاجية التطوير، حيث يُقدم الإطار نصوص CSS جاهزة وقابلة للتعديل لتناسب أغلب المشاريع. تُقدم شركة Zurb حلولًا للمطوّرين بجانب إطار العمل Foundation، حيث هناك العديد من الإضافات التي تختبرها Foundation في مختبراتها والتي تطلق عليها اسم playground والتي تحتوي على خطوط الأيقونات (Icon Fonts)، وأيقونات الشبكات الاجتماعية (Social Web Icons)، والرسوم البيانية، ومخططات لإنشاء نماذج بدئيّة (prototypes)، وقوالب البريد الالكتروني، والعديد منها بإمكانك أن تجده هنا، كما تُقدم شركة Zurb حزمة تطبيقات ويب مجانية ومدفوعة. أصبح Foundation في الإصدار الخامس أسرع وأسهل استخدامًا، وإن كنتَ قد تعاملت مع الإطار في إصداره الرابع فأنت مع الإصدار الخامس وكأنك تنظر إلى إطار مختلف تمامًا، إذ قدّم Foundation في الإصدار الخامس الكثير من التحسينات على مستوى الأداء والمظهر، فانتقل من استخدام مكتبة Zepto إلى jQuery، وهذا الانتقال من شأنه أن يقدمَ أداءً أفضل، والتحسينات طالت حتى التوثيق الرسميّ حيثُ أصبح سهل القراءة وأكثر تنظيمًا. يَدعم Foundation جميع المُتصفحات ما عدا IE في إصداره السابع والثامن، والصورة التّالية من التوثيق الرسميّ تُوضّح توافق الإطار مع مُختلف المُتصفحات. Foundation أم Bootstrap؟ دائمًا هناك مقارنات وحروب لاختيار الأفضل وهذه المُقارنات قائمة منذ الأزل ولن يَربح بها أحد فدائمًا ما تجد أسئلة من نوع: هل متصفح فيرفُكس أفضل أم Chrome؟، هل لغة Ruby أفضل أم PHP؟ (Ruby طبعًا :))، والقائمة تطول، والإجابة تختلف من مجال لآخر، ولكنّ القاعدة العامة أنّه ما من شيء أفضل بالمُطلق، أمّا للإجابة على سؤال هل Foundation أفضل أم Bootsrap؟ فأقول: الإجابة ليست بنعم أو لا، الأفضل هو الأفضل للمشروع، ويجب على المُطوّر الاطلاع على الإطارين معًا والابتعاد عن الاعتماد المُطلق على أحدهما، فالإطاران يَملُكان شهرةً واسعةً تجعل منهما لاعبين قويّين في عالم تطوير الويب، ناهيك على أنّ الإطارين يتشابهان في الكثير من المفاهيم والأفكار، ممّا يجعل تعلّمهما أمرًا يسيرًا، ولكن تذكّر عند اختيار أيّ إطار عمل يجب على الإطار أن يملك توثيقًا رسميًا جيدًا ووجودًا قويًّا على الويب. إن كنت من مُحبي الأرقام، الترتيب التالي يُوضح أشهر أُطر العمل تقييمًا على موقع GitHub: Bootstrap: أكثر من 78000 نجمة. Foundation: أكثر من 19000 نجمة. Semantic UI: أكثر من 15000 نجمة. Pure: أكثر من 10000 نجمة. Skeleton: أكثر من 7000 نجمة. UIkit: أكثر من 4000 نجمة. التحميل بإمكانك تحميل الإطار من هنا بنسخته الكاملة أو تخصيص التحميل حسب الحاجة، في حالتنا سوف نستخدم النسخة الكاملة من الإصدار ذي الرقم 5.5.0. في حال اخترت تخصيص التحميل، وهو أمرٌ قد تفعله لتصغير حجم ملف الإطار، فعليك الانتباه عند تحميل النسخة الأحدث أن تختار ذات التخصيصات التي اخترتها سابقًا. في المجلد المُسمى css يوجد ثلاثة ملفات CSS، وهي foundation.css ويحتوي نسخة كاملة مقروءة من أنماط الإطار، والملف foundation.min.css والذي يحتوي على نسخة كاملة مُقلّصة (minified) من أنماط الإطار، حيث تم حذف جميع الفراغات والتعليقات لتصبح أصغر حجمًا، والملف الثّالث هو normalize.css ويُستخدم عادةً لتسوية المتصفحات على سوية واحدة، وهو ليس خاصًّا بـFoundation. في المجلد js سوف تجد ملفّ JavaScript يحمل الاسم foundation.min.js وهو بشكل مُقلّص، أي غير مقروء، ويحتوي كافّة خصائص الإطار، أمّا المجلد foundation ففيه كافّة مُحتويات المَلفّ السابق ولكن بشكل مُجزّأ، بحيث يكون لكل إضافة ملف مُستقل، وكلّ من هذه الملفّات مقروء وبإمكانك استخدام أيٍّ من هذه الملفات دون الآخر، أمّا المجلد vendor فيحتوي ملفات المكتبات المستخدمة في الإطار مثل مكتبة jQuery ومكتبة Modernizr والتي تُستخدم في استكشاف ميزات HTML5 وCSS التي يَدعمها المتصفح. المتجر سوف نعمل طيلة السلسلة على مشروع متجر بسيط لبيع الصور الفوتوغرافية نُسمّيه "صوّرها"، نستعرض من خلاله ميزات هذا الإطار، والميزات التي يُمكننا تطبيقها عليه، لا تتطرق السلسلة إلى أساسيات CSS ولا JavaScript، وسيقتصر التركيز الإطار نفسه. سنستدعي ملف الإطار والمكتبات المُساعدة في أعلى مُستند HTML في الوسم <head> بالشكل التالي: الإطار مُقلّصًا، لنحصل على أصغر حجم مُمكن. ملفّ CSS الخاصّ بالتعديلات والتي سوف تكون مُستقلة عن الإطار لنُحافظ عليها في حال تحديث الإطار. ملف JavaScript الخاص بمكتبة Modernizr. سنستدعي ملفّ الإطار الكامل وبالحجم المُصغر ومكتبة jQuery في أسفل مُستند HTML، لتحميل الصفحة بشكل أسرع دون انتظار ملفات JavaScript. <link rel="stylesheet" href="css/foundation.min.css"/> <link rel="stylesheet" href="css/mycss.css"/> <script src="js/vendor/modernizr.js"></script> ... <!--أسفل الصفحة--> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> لست مُقيدًا بتحميل كافة ملفّ الإضافات الخاصّ بـJavaScript، بل بإمكانك اختيار إضافة دون أُخرى، فلا حاجة لتحميل ملف الإطار بحجمه الكامل بل يُمكنك اختيار الإضافة التي تريدها لتناسب احتياجات الموقع. <script src="/js/foundation.dropdown.js"></script> <script src="/js/foundation.tab.js"></script> يتكوّن المتجرالذي سوف نعمل عليه خلال هذه السلسلة من خمسِ صفحات هي: الصفحة الرئيسة وتحتوي على عرض بسيط لمزايا المتجر والصور الأكثر مبيعًا. صفحة المعرض التي تحتوي على عرضٍ لجميع صور المعرض. صفحة التسجيل والتي تحتوي على النماذج (forms). صفحة الخطط والأسعار والتي تحتوي على ثلاثة جداول تُمثل الخطط المتوفرة للاشتراك. صفحة المنتج وهي عبارة عن عرض للصورة المُختارة مع بيانات المُصور والتعليقات والتقييم الخاصّ بها. الهدف من المتجر هو عرض ميزات إطار العمل Foundation وليس تصميم المتجر بحد ذاته، فالمتجر مُصمّمٌ بأبسط الإمكانيات وللتوضيح فقط. سوف نستخدم متصفح Chrome طوال السلسلة ولك حريّةُ استخدام متصفحك المُفضل (أقصد Chrome :)) والصور التّالية هي لبعض الصفحات التي سوف نحصل عليها بعد انتهاء السلسلة. تعرّفنا من خلال هذه المُقدمة البسيطة على إطار العمل Foundation بشكل عام، ولما عليك اختياره، وشرحنا التحميل وطريقة الإعداد، وأخذنا فكرة عامّة عن المتجر الذي سوف نتعامل معه طيلة السلسلة. في المقالة الثّانية سوف نبدأ بالدخول في التفاصيل والشرح الفعليّ لميزات الإطار، وسوف نبدأ بالنظام الشبكي وكل ما يتعلق به وكيفيّة التطبيق على متجرنا مع عرضٍ للأمثلة من شيفرةٍ برمجية وصورٍ توضيحية.-
- 1
-
-
- zurb
- foundation
- (و 1 أكثر)
-
قد وصلت إلى الجزء الرابع، وهذا يعني أنّ السلسلة قد راقت لك -أرجو الله ذلك- في الجزء السابق تعرفنا على نظام التنقل الخاص بالإطار، وفي هذا الجزء سوف نتعرف على الأزرار وأنواعها، والنماذج وملحقاتها، وكيف سوف نستفيد منها في متجرنا. الأزرار (Buttons) يَملك Foundation مجموعة من الأزرار الجذابة، لإنشاء زر كل ما عليك فعله هو إضافة الصنف button إلى الوسم <a> أو المُدخل <input> من نوع submit لتحصل على الزر الافتراضي وبالحجم المُتوسط مع اللون الأساسي للإطار ومع تأثير المرور (hover)، ولتخصيص حجم الزر لديك أصناف عدّة:"صغير جدًا" tiny، و"صغير" small، و"كبير" large، و"مُوسّع" expanded. الزر بشكله الافتراضي حاد الحواف، ولتغيير ذلك بإمكانك استخدام أحد الصنفين round أو radius، أمّا لتغيير الألوان فيُقدم Foundation خمسة أصناف باستثناء اللون الأساسي، ويُشير إلى هذه الألوان على أساس دلالتها اللونية، فاللون الأحمر ستجده باسم الصنف alert واللون الأخضر ستجده بالصنف success. أزرار ضمن مجموعة (Button Groups)كما يُمَكنك Foundation من إنشاء مجموعة أزرار مُترابطة مع بعضها البعض، وذلك باستخدام "قائمة غير مرتبة" <ul> مع الصنف button-group، ولتنسيق هذا النوع من الأزرار سوف نستخدم الأصناف round وradius لتظهر على أول وآخر زر من المجموعة، أمّا الصنف "مُتساوي" even فهو يُوزع مجموعة الأزرار على عرض المساحة الممنوحة لهذه الأزرار. كما يُقدم Foundation الصنف "اصطفاف" stack والذي يجعل من الأزرار مصفوفةً فوق بعضها البعض، والصنف stack-for-small الذي يَجعل من الأزرار متوافقةً مع الشاشات الصغيرة. <!-- أبسط شكل من أشكال أزرار ضمن مجموعة وبدون أي تنسيق --> <ul class="button-group"> <li><a href="#" class="button">Button 1</a></li> <li><a href="#" class="button">Button 2</a></li> <li><a href="#" class="button">Button 3</a></li> </ul> <ul class="button-group even-3"> <!-- أزرار ضمن مجموعة مع تقسيم المساحة الكلية على ثلاثة أزرار --> <li><a href="#" class="button secondary">Button 1</a></li> <li><a href="#" class="button secondary">Button 2</a></li> <li><a href="#" class="button secondary">Button 3</a></li> </ul> <ul class="button-group round even-6"> <!-- أزرار ضمن مجموعة مع تقسيم المساحة الكلية على الأزرار الستّة وتنسيق بحواف دائرية --> <li><a href="#" class="button">Button 1</a></li> <li><a href="#" class="button">Button 2</a></li> <li><a href="#" class="button">Button 3</a></li> <li><a href="#" class="button">Button 4</a></li> <li><a href="#" class="button">Button 5</a></li> <li><a href="#" class="button">Button 6</a></li> </ul> مثال حي http://codepen.io/anon/pen/zxZrVa أزرار مع قائمة منسدلة (Dropdown Buttons) في الإصدارات الأخيرة من إطار العمل Foundation تم تبسيط التعامل مع هذا النوع من الأزرار، كل ما تحتاج إليه العنصران <button> و<ul>، الزر سوف يأخذ الصنفين button وdropdown وخاصية المعلومات data-dropdown والتي تحمل قيمة بأيّ اسم معبّر لكي نعرّف به القائمة غير المرتبة، أمّا القائمة غير مرتبة ذاتها فتأخذ المعرّف المُسبق عبر قيمة الخاصية id، وبالإضافة إلى "خاصية المعلومات" data-dropdown-content والصنف f-dropdown، بهذا نحصل على زر مع قائمة مُنسدلة بأبسط شكلٍ ممكن. <!-- زر مع قائمة مُنسدلة وبحواف دائرية ولون أحمر وكبير الحجم --> <button data-dropdown="drop" class="large alert round button dropdown">Dropdown Button</button><br> <ul id="drop" data-dropdown-content class="f-dropdown"> <!-- القائمة المُنسدلة مع عناصرها --> <li><a href="#">This is a link</a></li> <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li> </ul> مثال حي http://codepen.io/anon/pen/GgWZRJ الأزرار المُنقسمة (Split Buttons) يُنشئ "زر منقسم" عن طريق الربط بين الوسوم الثلاثة<a>و <span> و <ul>، الوسم <a> سوف يأخذ الصنفين button وsplit، أمّا الصنف <span> سوف يأخذ "خاصية المعلومات" data-dropdown مع قيمة مناسبة لتعريف "القائمة غير المرتبة" <ul>، أمّا القائمة <ul> سوف نُضيف لها الخاصية id مع القيمة المُعرفة في خاصية المعلومات data-dropdown في الصنف <span>، وبالإضافة إلى الصنف f-dropdown و"خاصية المعلومات" data-dropdown-content. لنستخدم بعض هذه الأزرار في متجرنا، في الصفحة الرئيسة لدينا الصور الأكثر مبيعًا سوف نحول زر الشراء العادي إلى زر مُنقسم (split button)، وذلك عبر إضافة الصنفين button وsplit ولنجعله صغير الحجم عبر الصنف tiny، وللقائمة المُنسدلة سوف نقوم بإنشاء "قائمة غير مُرتبة" للخيارات الإضافية، كما في الشيفرة التالية: <!-- زر مُنقسم صغير جدًا مع قائمة مُنسدلة --> <a href="#" class="button split tiny">Buy<span data-dropdown="drop"></span></a> <ul id="drop" class="f-dropdown" data-dropdown-content> <!-- القائمة المُنسدلة وعناصرها --> <li><a href="#">Add to favorites</a></li> <li><a href="#">Add to cart</a></li> </ul> في صفحة المُنتج سوف نجعل زر "أضف إلى السلة" مصقول الحواف بالصنف radius، مع لون خفيف بالصنف Info. <a href="#" class="button info radius">Add to Cart</a> في صفحة التسجيل سوف نقوم بالتعديل على المُدخل input من نوع "إرسال" submit وتنسيقه على أنّه غير مفعل بالصنف disabled وبحواف دائرية بالصنف round. <input type="submit" value="Submit" class="button round disabled">الجداول والنماذج (Tables and Forms)الجداول (Tables)يتفوّق Foundation على Bootstrap بتوفير "جداول الأسعار" (pricing tables)، ومع الاتجاه الكبير نحو تطبيقات الويب، وظهور العديد من الشركات الناشئة، تزايد الطلب على هذا النوع من الجداول. Foundation كما في كل الميزات التي يُقدمها، جعل من إنشاء "جدول أسعار" أمرًا يسيرًا، فالإنشاء "جدول أسعار" كل ما عليك فعله هو إضافة الصنف pricing-table إلى "قائمة غير مرتبة" (<ul>)، أمّا "عناصر القائمة" <li> فلديها الأصناف "عنوان" title، "سعر" price، "وصف" description، "عنصر دائري" bullet-item، وأخيرًا "الزر" cta-button. في صفحة الأسعار الخاصة بالمتجر سوف نحدد ثلاثة خطط للاشتراك وهي "أساسية" و "قياسية" و "مُحترف"، الشيفرة التالية هي للخطة "مُحترف" والتي تُوضح العناصر مع الأصناف المناسبة لكل عنصر. <ul class="pricing-table"> <li class="title">Pro</li> <li class="price">$99.99</li> <li class="description">We do every thing for you, just upload your photos</li> <li class="bullet-item">Unlimited photos per week</li> <li class="bullet-item">24/7 Support</li> <li class="bullet-item">We change bad comments and rating to good ones</li> <li class="cta-button"><a class="button" href="#">Enroll Now</a></li> </ul>النماذج (Forms)يَعتير البعض التعامل مع النماذج (forms) من الأمور المعقدة نوعًا ما في HTML، لما لها من تفاصيل، لم يشأ Foundation أن يزيد من هذا التعقيد، وحاول قدر الإمكان التسهيل من مُهمة المطوّر في التعامل معها وجعلها مرنةً في التخصيص، بُنيت النماذج في Foundation من دمج عناصر النماذج الأساسية في HTML مع النظام الشبكي، ويتحدد تَنسيق عناصر النموذج عن طريق الخاصية type بدلاً من استخدام الأصناف، ويُمكن جعل النماذج مُتجاوبة باستخدام النظام الشبكي في Foundation وذلك بتعريف الصنف row داخل الوسم <form> واستخدام الأصناف الثلاثة الخاصة بالنظام الشبكي smallوmedium وlarge، لتحصل على نماذج متجاوبة وبأقل قدر مُمكن من الكتابة. ملحقات النماذج (Pre/Postfix Labels & Actions)يُقدم Foundation النماذج بشكل مرنٍ للغاية حيثُ بإمكانك ربط المُدخل (input) مع زر أو مع لاحقة أو بادئة نصية (pre/postfix label)، والتي تُقدم طريقة سريعة للمُستخدم لإدخال المدخلات الخاصة بالنماذج، وأيضًا تعطيه تلميحًا عن ما هو مطلوب منه في تعبئة النماذج. يُقدم Foundation طريقة سريعة للتحكم بحجم هذه الملحقات، وذلك باستخدام النظام الشبكي، ولربط مُدخل مع زر نستخدم الوسم <input> من النوع نص (text) مع الوسم <a> بالإضافة إلى الصنفين button وpostfix، ونَستخدم الوسم <span> مع الصنف prefix لإنشاء "بادئة نصية" prefix label، والصنف postfix لإنشاء "لاحقة نصية" postfix label. أما للتنسيق فعليك استخدامُ الصنف collapse لإزالة الحشو (padding) بين المُدخل من جهة والبادئة أو اللاحقة والزر من جهة أخرى. <form> <div class="row"> <!-- الصفّ الأول ويحتوي على مُدخلين --> <div class="large-6 columns"> <input type="text" placeholder="First name" /> </div> <div class="large-6 columns"> <input type="text" placeholder="last name" /> </div> </div> <div class="row"> <!-- الصفّ الثاني ويحتوي على مُدخل واحد --> <div class="large-12 columns"> <input type="text" placeholder="Email" /> </div> </div> <div class="row"> <!-- الصفّ الثالث ويحتوي على مُدخل واحد --> <div class="large-12 columns"> <input type="text" placeholder="Re-enter email" /> </div> </div> <div class="row"> <!-- الصفّ الرابع --> <div class="large-12 columns"> <input type="text" placeholder="Password" /> </div> </div> <div class="row"> <!-- الصفّ الخامس --> <div class="large-6 columns"> <input type="radio" name="radioname" value="Male" id="thisidformale"><label for="thisidformale">Male</label> <input type="radio" name="radioname" value="Female" id="thisidforfemale"><label for="thisidforfemale">Female</label> </div> </div> <div class="row collapse"> <!-- لإزالة الحشو بين البادئة والمُدخل --> <div class="small-2 columns"> <!-- البادئة بعمودين --> <span class="prefix">http://</span> <!-- تعريف البادئة --> </div> <div class="small-10 columns"> <!-- المُدخل --> <input type="text" placeholder="Enter your URL..."> </div> </div> <div class="row"> <div class="large-12 columns"> <label>What is your favorite brand? <select> <option value="Canon">Canon</option> <option value="Nikon">Nikon</option> <option value="Panasonic">Panasonic</option> <option value="Sony">Sony</option> </select> </label> </div> </div> <div class="row"> <!-- الصفّ الأخير --> <div class="large-12 columns"> <div class="row"> <div class="large-6 columns"> <div class="row collapse prefix-radius"> <!-- بادئة بحواف مصقولة --> <div class="small-3 columns"> <span class="prefix">@</span> <!-- البادئة للإشارة إلى ادخال اسم العضوية فقط --> </div> <div class="small-9 columns"> <input type="text" placeholder="Twitter Account"> </div> </div> </div> <div class="large-6 columns"> <div class="row collapse prefix-radius"> <!-- بادئة بحواف مصقولة --> <div class="small-3 columns"> <span class="prefix">photos/</span> <!-- البادئة للإشارة إلى ادخال اسم العضوية فقط --> </div> <div class="small-9 columns"> <input type="text" placeholder="Flickr account"> </div> </div> </div> </div> </div> </div> </form> مثال حي http://codepen.io/anon/pen/ZYeOzZ في صفحة المعرض الخاصة بالمتجر سوف نُوفر إمكانية البحث عن الصور باستخدام المُدخل <input> مع زرٍ مُلحق، سوف نُزيل الحشو (padding) بين المُدخل والزر باستخدام الصنف collapse، ولتنسيق الزر سوف نستخدم الصنف expand، والصنف postfix والذي سيجعل من الزر مُتناسقًا مع المُدخل. <div class="large-12 columns"> <div class="radius panel"> <form> <div class="row collapse"> <div class="large-10 small-8 columns"> <input type="text"/> </div> <div class="large-2 small-4 columns"> <a href="#" class="postfix button expand">Search</a> </div> </div> </form> </div> </div> تعرفنا في هذا الجزء على النماذج والأزرار وتطبيقاتها في متجرنا، وفي الجزء الخامس سوف نتحدث عن أمور عدّة منها "المدار" (orbit) وعارض الصور (lightbox) وغيره من المواضيع المُهمة جدًا في الإطار. -
لم نشرح الكثير في الجزء الأول من هذه السلسلة، ولكن في هذا الجزء سنشرح النظام الشبكي وآليّة استخدامه وكافّة التفاصيل المُتعلقة به وبالأمثلة الحيّة، وسوف نتعرّف على النظام الشبكي العام والنظام الشبكي باستخدام الرزم والإزاحة ومفهوم "ترتيب المصدر" وأخيرًا سوف نتعرف على أصناف الظهور. النّظام الشبكي في Foundationيُمَكّنك Foundation من إنشاء تصاميم صفحات إنترنت مُتجاوبة مع جميع الشاشات والأجهزة بسرعة عالية، وذلك باستخدام نظامٍ شبكي يَعتمد على اثني عشر عمودًا بشكل مبدئيّ قابلة للتعديل، وهذه الشبكات يُمكن أن تكون مُتداخلة (nestable)، أي اثنا عشر عمودًا داخل اثني عشر عمودًا آخر. يُعرَّف كل صفّ بإضافة الصنف row إلى <div>، وداخل كل صفّ يُحدَّد توزع الأعمدة باستخدام الأصناف small-x وmedium-x وlarge-x حيث x هي من 1 حتى 12، وهي دائمًا تُعرف داخل صفّ (row)، وبعد تحديد توزّع الأعمدة في الصفّ عليك إضافة الصنف column (عمود) أو columns، لا فرقَ بين الصنفين ولكنّ صيغة الجمع هي الشائعة، ومُهمة هذا الصنف هي إضافة الطوفان (float) والحشو (padding). يُعرّف Foundation نقاط الفصل (breakpoints) الّتي تُحدّد كل قياس من قياسات النظام الشبكي كما يلي: الشاشات الصغيرة small تبدأ من 0 بكسل إلى 640 بكسلًا.الشاشات المتوسطة medium تبدأ من 641 بكسلًا إلى 1024 بكسلًا.الشاشات الكبيرة large تبدأ من 1025 بكسلًا إلى 1440 بكسلًا.عند حدود هذه النقاط تتغير استجابة المُتصفّح في عرضه لمُحتويات الموقع لتبدو بأفضل صورةٍ مُمكنة. بُني إطار العمل Foundation ليستهدف شاشات الأجهزة المحمولة أوّلًا ومنها إلى الأجهزة ذات الشاشات الكبيرة ويَستخدم في ذلك الصنف (class) المُسمى small، عند استخدام هذا الصنف، فإنّ تَوزع الأعمدة في الصفحة لن يختلف أبدًا مهما كانت قياس شاشة العرض، بمعنى أنّه في حال وجود عمودين في الصفحة سيبقى هذان العمودان مهما كان حجم الشاشة سواءٌ كانت متوسطة أو كبيرة، وعند استخدام الصنف المتوسط medium، والذي أُضيف في الإصدار الخامس، فإنّ توزع الأعمدة المُحدد على هذا الصنف سوف يتم استخدامه مع الشاشات الكبيرة أيضًا، ولكن في حالة الشاشات الصغيرة فسوف تصطف العناصر بعضها فوق بعض. يجب أن يحتوي كل صفّ row اثني عشر عمودًا دومًا، في صفحة التسجيل في المتجر تتضمّن الصفحة صفًّا رئيسيًّا باثني عشر عمودًا داخل اثني عشر عمودًا آخر، حيث تكون النماذج (forms) ثمانية أعمدة والشريط الجانبي أربعة أعمدة، وعند تعريف النماذج يتم التعامل مع كل صفّ على أساس اثني عشر عمودًا داخل اثني عشر عمود، حيث يتم تعريف المُدخل الخاص بالاسم الأوّل على أنّه ستّة أعمدة والمُدخل الخاص بالاسم الأخير على أنه ستّة أعمدة. <div class="row"> <!--صفّ رئيسي--> <div class="medium-4 columns"> <!--أربعة أعمدة للشريط الجانبي--> <aside> <div class="panel"> <h5>Features</h5> <a href="#">Read More →</a> </div> </aside> </div> <div class="medium-8 columns"> <!--ثمانية أعمدة للنماذج--> <form> <div class="row"> <!--صفّ داخل الصف الرئيسي--> <div class="large-6 columns"> <input type="text" placeholder="First name" /> </div> <div class="large-6 columns"> <input type="text" placeholder="last name" /> </div> </div> <!-- بقية النماذج --> </form> </div> </div> الإزاحة (Offset)يُقدم Foundation مفهوم "الإزاحة" لزيادة المرونة في استخدام النظام الشبكي، حيث بإمكانك تحريك أي عمود إلى جهة اليمين مستهدفًا أي حجم شاشة دون الآخر، وذلك عن طريق الأصناف small-offset-x وmedium-offset-x وlarge-offset-x حيث x هي رقمٌ من 1 حتى 11، ومن المُمكن الجمع بين جميع القياسات الثالثة السابقة ولكن من واقع الخبرة العمليّة، الأكثر استخدامًا إمّا الصنف small مع medium أو small مع large. يُطوّف Foundation العمود الأخير إلى جهة اليمين، على عكس ما يفعل إطار العمل Bootstrap عند إنشاء صفّ بأعمدة لا تُجمع إلى اثني عشر، ولكن بإمكانك إضافة الصنف end إلى العمود المُطوّف لجعله يصطف بجانب العمود السابق. يُنسّق النظام الشبكي الأعمدةَ بإضافة حشو (padding) بينها، ولكن هناك حالات لاترغب بظهور هذا الحشو في قياس شاشة مُعين، ولذلك يُقدم لك Foundation أصنافًا مثلَ large-collapse لإزالة هذا الحشو من الشاشات الكبيرة على سبيل المثال. يُقدم لك Foundation أصنافًا خاصة لتوسيط العمود في منتصف الصف، ولتوسيط العمود في الشاشات الصغيرة بإمكاننا استخدام الصنف small-centered، ويَشمل تأثير هذا الصنف الشاشات المتوسطة والكبيرة، ولكن بالإمكان استخدام صنف معاكس لتغيير هذا السلوك، حيث يَقومُ الصنف large-uncentered والصنف medium-uncentered بإلغاء تأثير الصنف small-centered في الشاشات الكبيرة والمتوسطة. في الصفحة الرئيسة في المتجر لدينا صفّ يحتوي على ثلاثة عناصر، في الشاشات الصغيرة نريد لهذه العناصر أن يصطف بعضها فوق بعض وكلُ عنصر يأخُذ عرضَ الصفحة بالكامل ولذلك يجب أنّ نستخدم الصنف small-12، أمّا في الشاشات المتوسطة والكبيرة نُريد من العناصر الثلاثة أن تُعرض بجانب بعضها البعض وبالتّالي كل عنصرٍ سيكونُ له أربعة أعمدة (12/3) من أصلِ اثني عشر عمودًا لتظهر الصناديق الثلاثة على مُستوى واحد وعلى عرض الصفحة بالكامل ولذلك سوف نستخدم الصنف medium-4 الذي يقوم بترتيب العناصر على مستوى الشاشات المُتوسطة والكبيرة. <div class="row"> <div class="small-12 medium-4 columns"> <div class="panel"> <h3>Shoot</h3> <p>...</p> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel"> <h3>Upload</h3> <p>...</p> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel"> <h3>Sell</h3> <p>...</p> </div> </div> </div> لاحظ أنّ الصناديق ليست على سويّةٍ واحدة ويعود ذلك إلى المُحتوى الخاص بها. يُقدم Foundation مفهوم المُسوّي لحل هذه المُشكلة والذي سيجعل من هذه الصناديق على سويّة واحدة مهما اختلف المُحتوى بينها، والذي سوف نتحدث عنه بمزيد من التفصيل في الجزء الأخير من السلسلة. http://codepen.io/anon/pen/ogBQao أيضًا في الصفحةِ الرئيسة لدينا صفّ يَعرض الصور الأكثر مبيعًا في المتجر، نُريد عرض ثلاثة صورٍ في الصف الواحد في الشاشات الكبيرة ولذلك سوف نستخدم الصنف large-4 وفي الشاشات الصغيرة والمتوسطة نريد عرض صورتين فقط في الصفّ الواحد ولذلك سوف نستخدم الصنف small-6. <code class="lang-html"> </code> <div class="row"> <div class="small-6 large-4 columns"> ... </div> <div class="small-6 large-4 columns"> ... </div> <div class="small-6 large-4 columns"> ... </div> </div>الصورة التّالية لتوزع الأعمدة في الشاشات الكبيرة: أمّا في الشاشات المُتوسطة والصغيرة سوف تتوزع الصور كما في الصورة التّالية مع ملاحظة طوفان الصورة الأخيرة إلى جهة اليمين، ويُمكنك استخدام الصنف end لجعل الصورة تطوف إلى جهة اليسار. ويستخدم Foundation في ذلك الطوفان "الصّنف الزّائف" (pseudo-class) المُسمى "العنصر الأخير" last-child. أيضًا في الصفحة الرئيسة لدينا الشيفرة التّالية والّتي تتضمّن صفّين: الأول يحتوي على اقتباسين (blockquote) كل منهما ستة أعمدة، أمّا في الصف الثاني لدينا اقتباس وحيد سنجعله يتوسط الصفّ الذي ينتمي إليه في الشاشات الكبيرة والمتوسطة دون الشاشات الصغيرة باستخدام أصناف الإزاحة medium-offset-3 و الصنف large-offset-3. <div class="row"> <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote> <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote> </div> <div class="row"> <blockquote class="large-6 medium-6 medium-offset-3 large-offset-3 columns">...<cite>..</cite></blockquote> </div> http://codepen.io/anon/pen/rayBgg ترتيب المصدر (Source Ordering)من خلالِ تعامُلك مع النظام الشبكي لا بدَّ أن المشكلة التّالية واجهتك: تُريد ظُهور المُحتوى على المُتصفح بترتيب معين عند عرضه، وبترتيب آخر مُختلفٍ في نصّ مُستند HTML، رُبما لأسبابٍ تتعلقُ بالتحسينِ لمُحركات البحث (SEO)، أو أنّك تُريد عرضَ المُحتوى بترتيبٍ مُعين في شاشات سطح المكتب وبترتيبٍ مُغاير في الأجهزة المحمولة، ولهذا يُقدم Foundation حلًا لتلك المشكلة وذلك باستخدام أصناف الدفع والسحب (push and pull)، حيثُ يقوم الصنف large-push-4 بدفع العنصر أربعة أعمدةٍ باتجاه اليمين، ويَسحب الصنف large-pull-8 العُنصر ثمانية أعمدةٍ إلى اليسار. في صفحةِ التسجيل الخاصة بالمتجر عمودان رئيسيان في الصفحة، فيهما ثمانية أعمدة للنماذج وأربعة أعمدة خاصة بعرض مزايا التسجيل في الموقع، التصميم يبدو مقبولًا على الشاشات المتوسطة والكبيرة ولكن عندَ عرض الصفحة على أجهزة الشاشات الصغيرة ستُعرض النماذج قبل العمود الخاص بالمزايا (features)، وهذا ما لا نُريده. <div class="row"> <div class="medium-8 columns"> <!--عمود النماذج يُعرض أولًا في الشاشات الصغيرة وعلى يسار الصفحة في الشاشات المُتوسطة والكبيرة--> <form> <div class="row"> <div class="large-6 columns"> <input type="text" placeholder="First name" /> </div> <div class="large-6 columns"> <input type="text" placeholder="last name" /> </div> </div> <!-- بقية النماذج --> </form> </div> <div class="medium-4 columns"> <!--عمود المزايا يُعرض بعد النماذج في الشاشات الصغيرة وعلى يمين الصفحة في الشاشات المُتوسطة والكبيرة--> <aside> <div class="panel"> <h5>Features</h5> <a href="#">Read More →</a> </div> </aside> </div> </div> سنُعيدُ تصميم الصفحة لتكونَ مُتوافقة مع الهاتف المحمول أولًا، حيثُ يتمُ عرضُ المحتوى الخاص بالمزايا ثم النماذج لاستكمالِ التسجيل. <div class="row"> <div class="medium-4 columns"> <!--عمود المزايا يُعرض أولًا وعلى يسار الصفحة--> <aside> <div class="panel"> <h5>Features</h5> <a href="#">Read More →</a> </div> </aside> </div> <div class="medium-8 columns"> <!-- عمود النماذج يُعرض بعد عمود المزايا وعلى يمين الصفحة--> <form> <div class="row"> <div class="large-6 columns"> <input type="text" placeholder="First name" /> </div> <div class="large-6 columns"> <input type="text" placeholder="last name" /> </div> </div> <!-- بقية النماذج --> </form> </div> </div> والآن بعد أن تمّ تعديل التصميم ليكون مُناسبًا لأجهزة الشاشات الصغيرة، أصبح التصميم على الشاشات الكبيرة والمتوسطة مُغايرًا تمامًا لما نُريده، حيثُ النماذج إلى جِهة اليمين والعمود الجانبي إلى اليسار. لتصحيحِ العرض على الشاشات الكبيرة والمُوسطة سوف نستخدام أصناف السحب والدفع، سنقوم بدفع عمود المزايا ثمانية أعمدة إلى اليمين باستخدام الصنف medium-push-8، وسحب عمود النماذج أربعة أعمدة إلى اليسار باستخدام الصنف medium-pull-4، وذلك يجعلُ من التصميم كما كان سابقًا على الشاشات الكبيرة والمتوسطة. <div class="row"> <div class="medium-4 columns medium-push-8"> <!-- أيها الشريط الجانبي الرجاء التكرّم بالانتقال ثمانية أعمدة إلى اليمين في الشاشات المتوسطة والكبيرة --> <aside> <div class="panel"> <h5>Features</h5> <p>Registration is free</p> <p><span data-tooltip class="has-tip" title="Just important notifications">No spam</span></p> <a href="#">Read More →</a> </div> </aside> </div> <div class="medium-8 columns medium-pull-4"> <!-- أيتها النماذج الرجاء التكرّم بالانتقال أربعة أعمدة إلى اليسار في الشاشات المتوسطة والكبيرة--> <form> ... </form> </div> لم نستطع استخدام أصناف السحب والدفع من البداية، بل كان علينا ترتيب المُحتوى كما نريده على أجهزة الشاشات الصغيرة أولًا (تذكّر أنّ Foundation يستهدف أجهزة الهاتف المحمول أولًا (mobile-first)) ثم استخدام أصناف السحب والدفع ثانيًا. النظام الشبكي باستخدام القِطَع Block Gridوهو نظامٌ شبكيٌ آخر يُقدمه Foundation للتعامل مع توزع الأعمدة بأقلِ قدر مُمكن من الكتابة، وهو شائع الاستخدام مع الصّور المُصغّرة (thumbnails)، ويقوم هذا النظام الشبكي بتوزيع عناصر القوائم (<li>) بشكل مُتساوي على عرض الصفحة مهما كان حجم الشاشة، على عكسِ ما يفعل النظام الافتراضي باستخدام max-width لكل صفّ، حيث يُوزع الصنف large-block-grid-3 ثلاثة عناصر على عرض الصفحة في الشاشات الكبيرة، ويُمَكنك هذا النظام من تحديد عدد العناصر كيفما تشاء في الصفّ الواحد والجمع بين الأصناف الثلاثة small وmedium وlarge، والأصناف تُطبق على قائمة غير مرتبة <ul>. المثالُ التّالي يُوضح استخدام نظام Block Grid في صفحة المعرض الخاصة بالمتجر، لاحظ أنه ما زال علينا استخدام نظام الأعمدة وذلك فقط لكي لا يأخذ النظام عرض الصفحة وليكون التنسيق مُتجانسًا مع بقيّة عناصر الصفحة. عرض الصور في الشاشات الكبيرة والمتوسطة والصغيرة سوف يظهر كما في الصور اللاحقة وهي على الترتيب، أما بالنسبة للشيفرة فسوف نستخدم ثلاثة أصناف هي كالتّالي: الصنف large-block-grid-4 يعرض أربعة عناصر بجانب بعضها البعض في الشاشات الكبيرة.الصنف medium-block-grid-3 يعرض ثلاثة عناصر بجانب بعضها البعض في الشاشات المتوسطة.وأخيرًا الصنف small-block-grid-2 يعرض عنصرين فقط بجانب بعضهم البعض في الشاشات الصغيرة.الشيفرة بشكلها الأخير المُستخدمة في صفحة المعرض ستكون على النحو التّالي: <div class="row"> <div class="large-12 columns"> <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> <li><a href="img/th1.jpg" class="th"><img src="img/th1.jpg"></a></li> <li><a href="img/th2.jpg" class="th"><img src="img/th2.jpg"></a></li> <li><a href="img/th3.jpg" class="th"><img src="img/th3.jpg"></a></li> <li><a href="img/th4.jpg" class="th"><img src="img/th4.jpg"></a></li> <li><a href="img/th5.jpg" class="th"><img src="img/th5.jpg"></a></li> <li><a href="img/th6.jpg" class="th"><img src="img/th6.jpg"></a></li> <li><a href="img/th7.jpg" class="th"><img src="img/th7.jpg"></a></li> <li><a href="img/th8.jpg" class="th"><img src="img/th8.jpg"></a></li> </ul> </div> </div> أصناف الظهور Visibility Classesتُقدم أصناف الظهور إمكانية إظهار أو إخفاء مُحتوى مُعين بناءً على معايير عدّة مثل حجم الشاشة واتجاه الجهاز هل هو في الوضع العموديّ (portrait) أم الأفقيّ (landscape) وهل تعمل شاشة الجهاز باللمس أم لا. الأصناف المُستخدمة في التحكم بالظهور سهلة الحفظ والاستخدام، فلإظهار المُحتوى للشاشات الصغيرة سوف نستخدم الصنف show-for-small-only، ولإظهار المُحتوى للشاشات المُتوسطة والأكبر سنستخدم الصنف show-for-medium-up، وللإخفاء استخدم الكلمة show بدل hide، حيثُ سيُخفي الصنف hide-for-small-only المُحتوى للشاشات الصغيرة فقط. وللتحكم بالظهور بناءً على اتجاه الشاشة نستخدم الصنفين show-for-landscape وshow-for-portrait، وللشاشات اللمسية نستخدم الصنفين show-for-touch وhide-for-touch. في متجرنا وفي صفحة المُنتج بالتحديد، لدينا نُبذة عن المُصور ووسائل الاتصال الخاصة به، من بريد الكتروني ورقم هاتف. ما نريده هو عدم ظهور رقم الهاتف في الأجهزة اللوحية وأجهزة سطح المكتب، والابقاء على الرقم في أجهزة الجوّال، ولتحقيقِ ذلك سوف نستخدم الصنف hide-for-medium-up. <h2>About the photographer</h2> <p>Mohamad Abras is the best photographer on earth.</p> <p><a href="mailto:mohamad.abras@sawrha.com">Email me</a></p> <p class="hide-for-medium-up"><a href="tel:+33333333">Call me</a></p> http://codepen.io/anon/pen/PwWXZv أصناف الظهور ملائمة جدًا للتحكم بالمُحتوى الكتابي، ولكنها ليست مناسبة للتحكم بالصور، فعلى الرّغم من أنّك تستطيع استخدام الصنف hide-for-small-only مع صورة ما، فإنّ هذه الصورة سوف تُنزّل في الخلفيّة وستُحسب تكلفة حجمها المستخدم رغم عدم ظهورها على المتصفح، قد يُغريك سهولة التعامل مع هذه الأصناف ولكن المُطوّر المُحترف سوف يتعاملُ مع هذه المُشكلة باستخدام مفهوم "التبادل" (Interchange) والذي قدّمه Foundation في الإصدار الخامس والذي سوف نتحدث عنه في الجزء الأخير من السلسلة. مُلاحظة بإمكانك اختبار اتجاه الجهاز وشاشة اللمس باستخدام محاكي أدوات المُطوّرين الخاص بالمتصفح Chrome. تعرفنا من خلال الجزء الثاني من السلسلة على كل ما يتعلق بالنظام الشبكي، بعد الانتهاء من هذا الجزء وتطبيق بعض الأمثلة العمليّة من المُفترض أن تكون على درايةٍ كاملةٍ بالنظام الشبكي في Foundation، وفي الجزء الثالث من السلسلة سوف نتعرف على كل ما بتعلق بنظام التنقل (navigation)، بدءًا من الشريط العلوي وانتهاءً بتجزئة المحتوى على صفحات (pagination). -
تعرّفنا على النظام الشبكي في الجزء السابق والذي هو أساس وجوهر أيّ إطار عمل ولابدّ من التعامل معه بأريحية تامّة فهو من المواضيع التي سوف تتعامل معها مع أيّ مشروع. في هذا الجزء سوف نتحدّث عن نظام التنقل الخاص بإطار العمل Foundation، من خلال التعامل مع الشريط العلوي والشريط الجانبي والتبويبات وغيره من الإضافات التي يُقدمها Foundation لتسهيل عمل المطوّر. التنقل Navigationشريط التنقل الرئيسي والقوائم المُنسدلة Navigation Menus and Dropdownsالشريط العلوي من الأمور الأساسية في أي صفحة ويب، ولذلك سَهل Foundation إنشاءه، مستخدمًا JavaScript في ذلك، وجعله متجاوبًا وقدمه مع أصناف تُسهل عمل المطوّر. يَستخدم Foundation الصنف top-bar مع خاصية المعلومات data-topbar للوسم <nav> لإنشاء الشريط، والصنف top-bar مسؤولٌ عن تحديدِ حجم وموقع الشريط أعلى الصفحة وإضافة خلفية سوداء له، ويتألف بناء الشريط العلوي من قائمة غير مُرتبة <ul> و قسم <section>، وتحتوي القائمة على عنصر خاص لعنوان الموقع والأصناف الخاصة بالشريط في الوضع المُصغر وهو toggle-topbar الذي يُخفي كلمة Menu في الوضع العادي وإظهارها في الوضع المُصغر، والصنف menu-icon وهو من أجل ما يُعرف برمز الهامبرغر (الخطوط الأفقية الثلاثة) في الوضع المُصغر، ولك حرية استخدامه أو حذفه. أما القسم <section> ففيه يتم إنشاء القوائم الرئيسة والقوائم المُنسدلة، وله الصنف top-bar-section، والذي يُعطي عناوين القوائم اللون الأبيض، وتُنشئ القوائم عبر العنصر <ul>، ويُمكن التحكم بموضع القائمة بالصنفين right وleft، وللإشارة إلى الصفحة الحالية نستخدم الصنف active لعناصر القائمة <li>، ويُمكن أن تحتوي كل قائمة رئيسة قائمة مُنسدلة، وكل قائمة مُنسدلة قائمة منسدلة داخلية، ولإنشاء قائمة مُنسدلة نضيف الصنف has-dropdown إلى القائمة الرئيسة، وذلك من شأنه أن يضيف مثلثًا صغيرًا يشير إلى أنّ القائمة مُنسدلة، ولكل قائمة مُنسدلة سوف نُضيف لها الصنف dropdown الذي يقوم بإخفاء العناصر <li> من العرض وإظهارها عند المرور (hover) فقط، ويمكنك الفصل بين العناصر عن طريق الصنف divider. يأخذ الشريط العلوي عرض المتصفح بالكامل بشكل افتراضي، ويُستخدم الصنف contain-to-grid لجعل عناصر الشريط العلوي متجانسةً مع النظام الشبكي، حيث العرض هو 1000 بكسل، والصنف fixed يُثبت الشريط العلوي أعلى الصفحة مهما تم التدرّج إلى أسفلها. في متجرنا لدينا الشريط العلوي مُعرف كالتالي: <div class="contain-to-grid fixed"> <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <li class="name"> <h1><a href="#">Sawrha</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul class="right"> <!--القوائم يمين الصفحة--> <li class="active"><a href="#">Home</a></li> <!--الصنف "نشطّ للإشارة إلى الصفحة الحالية--> <li class="has-dropdown"> <a href="#">Pages</a> <ul class="dropdown"> <li><a href="#">Regiseration</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Gallery</a></li> </ul> </li> </ul> </section> </nav> </div>لاحظ أننا استخدمنا الصنف contain-to-grid لتسوية عناصر الشريط مع النظام الشبكي، والصنف fixed لتثبيت الشريط أعلى الصفحة بشكل دائم والفرق بين استخدام الصنف contain-to-grid وعدم استخدامه موضّح في الصور التالية. الشريط كما سوف يظهر على الشاشات المتوسطة والكبيرة. يَسدل الشريط العلوي القوائم المُنسدلة عند المرور عليها (hover) بشكل افتراضي، وبإمكانك تغيير هذا السلوك عن طريق "خاصية المعلومات" data-options مُعطاةً القيمة "is_hover: false"، الذي سوف يجعل من القائمة تُنسدل بعد الضغط عليها. يُتيح أيضًا الشريط العلوي إمكانية إضافة أزرار وعناصر إدخال <input> وذلك عبر الصنف has-form، ويُمكن الفصل بين العناصر باستخدام الصنف divider، ولإزالة الحشو (padding) بين المُدخل (input) والزر بإمكاننا استخدام الصنف collapse. في متجر صوّرها سوف نضيف خانة بحث للصورة في الشريط العلوي. <li class="divider"></li> <!-- فاصل بين القوائم وخانة البحث --> <li class="has-form right"> <!-- عنصر قائمة لخانة البحث وعلى يمين الصفحة --> <div class="row collapse"> <!-- لإزالة المسافة بين المُدخل والزر --> <div class="large-8 small-9 columns"> <input type="text" placeholder="Find photo"> </div> <div class="large-4 small-3 columns"> <a href="#" class="button expand">Search</a> </div> </div> </li> لاحظ المسافة بين الزر وخانة البحث في حال عدم استخدامنا للصنف collapse. الفاصل بين القوائم. مثال حي http://codepen.io/anon/pen/zxZXZw يُوضح المسافة بين الزر وخانة البحث. الشريط العلوي بشكله النهائي سيكون كالتالي. مثال حي http://codepen.io/anon/pen/OPWavB شريط التّنقل الجانبي (Side Nav)يُقدم Foundation الصنف side-nav لإنشاء "شريط تنقّل جانبي" باستخدام قائمة غير مرتبة (<ul>)، ويَستخدم Foundation هذا الشريط في التوثيق الرسمي الخاص به، ويُمكنك استخدام الصنف active للوسم<li> للإشارة إلى الصفحة الحالية، والصنف divider لعمل فاصل بين القوائم. <h5>Categories</h5> <ul class="side-nav"> <li><a href="#">Snow</a></li> <li><a href="#">Green</a></li> <li><a href="#">Sky</a></li> <li><a href="#">Rainbow</a></li> <li><a href="#">Misc</a></li> </ul> مثال حي http://codepen.io/anon/pen/azpPBE التبويبات والتبويبات القابلة للطيّ (Tabs and Accordions)يُمكنك Foundation من إنشاء تبويبات أُفقية وعمودية، وهي عناصر تُساعدك على تنظيم وعرض أكثر من مُستند داخل حاوية واحدة والتبديل/التنقل فيما بينها، ولإنشاء تبويبات أفقية نستخدم عنصر قائمة وصف (<dl>) مع الصنف tabs والخاصية data-tab، ويُظهر الصنف vertical التبويبات بشكل عمودي، حيث أنها أفقية بشكل افتراضي. كما تدعم هذه التبويبات ميزة الربط العميق (deep linking)، والتي تُتيح لك إنشاء رابط لأحد التبويبات وتَدرّج (scroll) المتصفح إلى التبويب المُختار. في صفحة المنتج الخاصة بمتجرنا، وبعد عرض الصورة المختارة سوف نعرض معلومات عن المُصور والتعليقات الخاصة بالصورة والتقييم الخاص بها باستخدام التبويبات الأفقية. <div class="row"> <div class="large-12 columns"> <dl class="tabs" data-tab> <!--التبويبات سوف تكون أفقية لأننا لم نستخدم الصنف عمودي--> <dd class="active"><a href="#panel1">Info</a></dd> <!--الصنف "نشط" للدلالة على أن هذا التبويب هو التبويب الحالي--> <dd><a href="#panel2">Comments</a></dd> <!--ربط هذا التبويب مع المحتوى الموافق له --> <dd><a href="#panel3">Rating</a></dd> <!--ربط هذا التبويب مع المحتوى الموافق له --> </dl> <div class="tabs-content"> <!--يحتوي هذا القسم جميع محتويات التبويبات الثلاثة --> <div class="content active" id="panel1"> <!--التبويب الأول--> <h2>About the photographer</h2> <p>Mohamad Abras is the best photographer on earth.</p> <p><a href="mailto:mohamad.abras@live.com">Email me</a></p> <p class="hide-for-medium-up"><a href="tel:+33333333">Call me</a></p> </div> <div class="content" id="panel2"> <!--التبويب الثاني--> <p>Wow! Its the best photo I have ever seen.</p> </div> <div class="content" id="panel3"> <!--التبويب الثالث--> <p>Five star</p> </div> </div> </div> </div> بإمكاننا تحسين النّص السابق بشكل أفضل من ذلك، حيث أنها الآن لا تسمح لك بإنشاء روابط عميقة للتبويبات، أي أنك لا تستطيع إنشاء رابط مُباشر للتعليقات الخاصة بالصورة مثلًا، والتبويب Info هو الذي سيُعرض دائمًا بعد تحميل الصفحة، ولكن بعد إضافة خاصية المعلومات data-options والقيمة "deep_linking:true"، ستتمكن من إنشاء رابط مُباشر لأحد التبويبات وفي حال كان هذا التبويب أسفل الصفحة سيقوم المتصفح بالتدرّج (scroll) إلى التبويب المُختار. <dl class="tabs" data-tab data-options="deep_linking:true">مثال حي http://codepen.io/anon/pen/jEyXyq يُقدم Foundation "التبويبات القابلة للطي" (accordions) وهي تُشبه التبويبات التقليديّة (tabs)، ولكن الاختلاف بينها هو على مُستوى تجربة المُستخدم User Experience، حيث أن محتويات التبويب القابل للطيّ يجب أن تكون ضئيلة الحجم ولا تستدعي من المُستخدم النزول والصعود في المتصفح (scroll down/up) على عكس التبويبات التقليدية التي من المُمكن أن يكون المحتوى الخاص بها على طول الصفحة دون التأثير على تجربة المُستخدم، أيضًا التبويبات القابلة للطيّ مناسبة جدًا للشاشات الصغيرة وبطبيعة الحال أجهزة الهاتف المحمول، يُمكن قراءة المزيد عن الفروقات هنا .يَستخدم Foundation في اعداد هذه التبويبات الصنف accordion وخاصية المعلومات data-accordion مع قائمة غير مرتبة (<ul>)، والصنف accordion-navigation لكل عنصر من عناصر القائمة (<li>). <dl class="accordion" data-accordion> <dd class="accordion-navigation"> <a href="#panel1b">Accordion 1</a> <div id="panel1b" class="content active"> ... </div> </dd> <dd class="accordion-navigation"> <a href="#panel2b">Accordion 2</a> <div id="panel2b" class="content"> ... </div> </dd> <dd class="accordion-navigation"> <a href="#panel3b">Accordion 3</a> <div id="panel3b" class="content"> ... </div> </dd> </dl>مثال حي http://codepen.io/anon/pen/ogZbyQ مسار التنقل (Breadcrumbs)يُستخدم "مسار التنقل" (breadcrumbs) كثيرًا في أنظمة إدارة المُحتوى مثل WordPress، وخاصةً عندما يكون تسلسل الصفحات طويلًا ومتشعبًا، ويُقدم Foundation الصنف breadcrumbs والذي يُضاف إلى قائمة غير مرتبة (<ul>) والصنفين current وunavailable لتحديد حالة عناصر القائمة. كما يُتيح Foundation إضافة الصنف breadcrumbs إلى العنصر nav أيضًا. <ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li class="unavailable"><a href="#">Last Photos</a></li> <!-- الصنف "غير مُتوفر للإشارة إلى أن المسار غير مُتوفر --> <li class="current"><a href="#">High Rating</a></li> <!-- الصنف "الحالي" للإشارة إلى المسار الحالي --> </ul>سوف نحصل على نفس النتيجة في حال استخدامنا الوسم <nav> <nav class="breadcrumbs"> <a href="#">Home</a> <a href="#">Features</a> <a class="unavailable" href="#">Last Photos</a> <a class="current" href="#">High Rating</a> </nav> شريط التنقل الفرعي (Sub Nav)يُستخدم "شريط التنقل الفرعي" بشكل شائع مع تصفية مُحتوى، ويُنشئ باستخدام الصنف sub-nav مُضافًا إلى "قائمة وصف" (<dl>)، والصنف active للدلالة على الاختيار الحالي. في متجرنا وفي صفحة المعرض لدينا عرض لجميع الصور المُتوفرة في المتجر، مانريده هو "شريط تنقل فرعي" لاستخدامه لتصفية الصور بناءً على المُميز منها أو الجديد وبطبيعة الحال كل الصور. <div class="row"> <div class="large-12 columns"> <dl class="sub-nav"> <dt>Filter:</dt> <dd><a href="#">All</a></dd> <dd><a href="#">New</a></dd> <dd class="active"><a href="#">Feature</a></dd> </dl> </div> </div>ترقيم الصفحات (Pagination)يُستخدم "ترقيم الصفحات" (pagination) بشكل شائع على الرغم من انتشار تقنية AJAX والتحميل التلقائي، ويُقدم Foundation الصنف pagination للعنصر <ul> والصنف unavailable لإزالة تأثير المرور (hover) لعناصر القائمة <li> وجعلِها غير قابلة للنقر (unclickable)، أمّا الصنف pagination-centered فهو يُظهر "ترقيم الصفحات" في منتصف الصفحة. بإمكاننا استخدام "ترقيم الصفحات" مع صور المعرض الخاصة بالمتجر وذلك من أجل استكشافها جميعًا. <div class="row"> <div class="pagination-centered"> <!-- ترقيم الصفحات في المُنتصف --> <ul class="pagination"> <li class="arrow unavailable"><a href="">«</a></li> <li class="current"><a href="">1</a></li> <!-- الصفحة الأولى هي الصفحة الحالية --> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">…</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">»</a></li> </ul> </div> </div> مثال حي http://codepen.io/anon/pen/wBJdRr وصلنا إلى نهاية الجزء الثالث والذي تعرفنا من خلاله على نظام التنقل الخاص بـFoundation، وذلك من خلال التعرف على الشريط العلوي والقوائم المُنسدلة، وشريط التنقل الفرعي والجانبي والتبويبات ومسار التنقل وأخيرًا ترقيم الصفحات، وفي الجزء الرابع من السلسلة سوف نتعرف على الأزرار والنماذج.