البحث في الموقع
المحتوى عن 'zurb'.
تم العثور على 5 نتائج
-
المُقدّمة 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 أكثر)
-
في الجزء السادس والأخير سوف نتحدّث عن مواضيع مُكمّلة للإطار نوعًا ما، والّتي رُبما تستطيع الاستغناء عنها، ولكنّك صدّقني لن تفعل، لأنّ هذه الكماليّات هي ما تُميز إطار العمل Foundation عن غيره من أُطر العمل. المُسوّي (Equalizer)المُسوّي هو إضافة JavaScript صغيرة تُساعدك في تسوية التنسيق بين حاويتين (containers) فيما بينهما عندما يحتويان على مُحتويين مُختلفين، في الصفحة الرئيسة الخاصة بالمتجر لدينا ثلاثة أعمدة على سويّة مختلفة، كذلك الأمر في صفحة الخطط والأسعار لدينا "جداول الأسعار"، لنستخدم المُسوّي للتصحيح من تنسيقهما. لتنسيق هذه الصناديق بشكل مُتساوي، كل ما عليك فعله هو إضافة خاصيّة المعلومات data-equalizer إلى العنصر الأب الخاص بهذه الصناديق، وخاصيّة المعلومات data-equalizer-watch لكل عُنصرٍ تُريد تسويته على نفس الارتفاع. <div class="row" data-equalizer> <div class="small-12 medium-4 columns"> <div class="panel" data-equalizer-watch> <h3>...</h3> <p>...</p> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel" data-equalizer-watch> <h3>...</h3> <p>...</p> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel" data-equalizer-watch> <h3>...</h3> <p>...</p> </div> </div> </div> <div class="row" data-equalizer> <div class="large-4 columns"> <ul class="pricing-table" data-equalizer-watch> ... </ul> </div> <div class="large-4 columns"> <ul class="pricing-table" data-equalizer-watch> ... </ul> </div> <div class="large-4 columns"> <ul class="pricing-table" data-equalizer-watch> ... </ul> </div> </div> التبادل (Interchange)يُستخدم "التبادل" (interchange) في تحميل (load) جزء مُحدد من مُستند HTML بناءً على استعلامات وسائط (media queries) مُعينة، حيث أنك تستطيع تحميل مُحتوى مُعين دون الآخر على حجم شاشة مُعين دون الآخر، لاحظ أنّي قلّت تحميل وليس إظهار، وهو ما يحدث في "أصناف الظهور". تمت إضافة "التبادل" في الإصدار الخامس من Foundation، وهو من الميزات الّتي يتوفق بها Foundation على إطار العمل Bootstrap. تخيلْ أنّ يكونَ لديك صفحة تحتوي نصًّا لخرائط Google، الخرائط سوف تظهر بشكل سلس على أجهزة سطح المكتب، ولكن على أجهزة الهاتف المحمول سيكون هناك تأخيرٌ بعض الشيء في عرض الصفحة. "التبادل" يسمح لك بتحميل صورة ثابتة على أجهزة الهاتف المحمول بدلًا من تضمين خريطة تفاعليّة، الأمر الذي يزيد من سرعة عرض الصفحة وبالتّالي تجربة استخدام أفضل للمُستخدم. تُستخدم JavaScript لتطبيق مفهوم "التبادل" لذلك عليك ضمان عرض مُحتوى ما على الصفحة في حال عدم توفرها على المُتصفح، وذلك باستخدام الوسم <noscript>. يَستخدم Foundation خاصيّة المعلومات data-interchange للتحكم بتحميل المُحتوى، بحيث كل جزء نريد عرضه سوف نوفر له قيمتان، القيمة الأولى هي مسار المُحتوى، والقيمة الثانية هي استعلام وسائط (media query)، ويُوفر Foundation مجموعة من استعلامات الوسائط منها "مبدئي" default و"صغير" small و"كبير" large ولوضعية اتجاه الجهاز عمودي portrait وأفقي landscape. عند عرض الصفحة يتمّ اختبار كل استعلام على الترتيب، والاستعلامات الّتي تُحقق الشرط يتمّ تحميل المَسار الخاصّ بها، حيثُ يتمّ تحميلُ مُحتوى آخر استعلام تُحقق الدلالة الخاصة بها، مع الانتباه أنّه عليك دائمًا التصريح عن الاستعلام المُسمى "مبدئي" default. في صفحة المُنتج الخاصّة بالمتجر لدينا صورة تُعرض بحجمها الكامل على جميع الأجهزة، مانُريده هو تخصيص حجم الصورة لكل قياس شاشة: <img data-interchange="[img/green-default.jpg, (default)], [img/green-small.jpg, (small)], [img/green-medium.jpg, (medium)], [img/green-large.jpg, (large)]">لاحظ أن أبعاد الصورة المُحملة في الشاشات الكبيرة هو 960 * 1600: أما أبعاد الصورة في الشاشات المتوسطة هو 480 * 800: وأخيرًا الصورة في الشاشات الصغيرة ستظهر بأصغر حجم: النّصّ البرمجيّ السابق يعرض المُحتوى بشكل ممتاز طالما أن JavaScript مُفعلة على المُتصفح، ولضمان عرض المُحتوى في حال أنها مُعطلة علينا إضافة السطر التّالي إلى النّصّ: <noscript><img src="img/green-default.jpg"></noscript>كما أنّه بإمكانك كتابةُ الاستعلامات الخاصّة بك، حيثُ أنّ النّصّ السابق كان من المُمكن كتابته على الشكل التّالي لتحصل على نفس النتيجة: <img data-interchange="[img/green-default.jpg, (only screen and (min-width: 1px))], [img/green-small.jpg, (only screen and (max-width: 640px))], [img/green-medium.jpg, (only screen and (max-width: 1024px))], [img/green-large.jpg, (only screen and (min-width: 1024px))]">"التبادل" من الميزات الّتي سوف تستخدمها بكثرة إنّ كنتَ مطوّرًا مُحترفًا، طبعًا بإمكانك دائمًا الاستعانة بحلولٍ من جهة الخادم (server-side)، ولكن مع المواقع الصغيرة "التبادل" يأتي كحلٍ مثالي على جهة العميل (client-side) ولا يتطلب الكثير من الإعداد، لذلك أنصحك بالاعتماد على هذه الإضافة في مشاريعك. الجولة (Joyride)من الإضافات المُميزة جدًا في Foundation، والّتي يَفتقد لها إطار العمل Bootstrap، تُتيح "الجولة" joyride أخذ المستخدم في جولة لاستعراض الموقع وميزاته، أو الإشارة إلى ميزة جديدة قُمت بإضافتها مؤخرًا إلى الموقع، أو حتّى شرح كيفية إجراء مهمة (task) في الموقع عبر شرح خطوات التنفيذ. الإعداد سيكون عبر إنشاء "قائمة مُرتبة" <ol>، أو "قائمة غير مُرتبة" <ul>، في أسفل صفحة HTML وإضافة الخاصيّة data-joyride، هذه القائمة سوف تحتوي مكان التوقف في كل خطوة من خطوات الجولة ومُحتوى الرسالة الخاص بكل نقطة وقوف، سوف نستخدم الصنف joyride-list لإخفاء القائمة من الظهور في المتصفح، وخاصيّة المعلومات data-joyride ستكون مسؤولة عن النصّ الخاص بـِHTML. لكل عنصر قائمة <li>، والّتي من المُمكن أن تحتوي على عنوان ورسالة مناسبة، سنُعرف محطات الوقوف بخاصيّة المعلومات data-id مُعطاةً قيمةً مُناسبة، والخاصيّة data-text ستكون مسؤولة عن الانتقال إلى نقطة الوقوف التّالية، والخاصيّة data-prev-text ستكون مسؤولة عن الانتقال إلى محطة وقوف سابقة، أما القائمة الأخيرة ستكون مسؤولة عن إنهاء الجولة وذلك بالخاصيّة data-button. في صفحة المعرض الخاص بالمتجر سوف نُشير إلى الخيارات المتوفرة لاستعراض الصور، سوف نقوم بتحديد id لكل عنصر نريد الوقوف عنده، ومحطات الوقوف لدينا هي كالتّالي: stop1 للإشارة إلى إمكانيّة البحث وstop2 للإشارة إلى إمكانيّة تصفية المُحتوى و أخيرًا stop3 للإشارة إلى إمكانيّة استعراض الصور عبر "ترقيم الصفحات" (pagination)، وبعد تحديد محطات الوقوف علينا كتابة النصّ البرمجيّ الخاص بالجولة: <ol class="joyride-list" data-joyride> <li data-id="1stop" data-text="Next"> <!-- محتوى التوقف الأول --> <h4>Search</h4> <p>You can search for photo.</p> </li> <li data-id="2stop" data-text="Next" data-prev-text="Prev"> <!-- محتوى التوقف الثاني --> <h4>Filter</h4> <p>You can filter the content.</p> </li> <li data-id="3stop" data-text="Next" data-prev-text="Prev"> <!-- محتوى التوقف الثالث --> <h4>Explore</h4> <p>Or explore our gallery.</p> </li> <li data-button="End" data-prev-text="Prev"> <!-- محتوى رسالة الانتهاء من الجولة --> <h4>The end</h4> <p>Happy shooting</p> </li> </ol> لا تعمل "الجولة" عند انتهاء تحميل الصفحة كما في الإضافات السابقة، ولذلك عليك استدعاء الدالة start باستخدام JavaScript: $(document).foundation('joyride', 'start');بإمكانك تخصيص طريقة العرض كما ترغب، سرعة الانتقال من نقطة إلى أخرى، أو طريقة الانتقال، أو حتّى إلغاء إمكانيّة التحكم "بالجولة" باستخدام لوحة المفاتيح، حيث بشكل افتراضي يُمكنك استخدام الأسهم للانتقال خطوة للأمام وخطوة للخلف وإنهاء "الجولة" بزر الهروب (Esc)، ولتعطيل هذه الأزرار بإمكانك استخدام خاصية المعلومات data-options والخيار keyboard والقيمة false، وللمزيد من التخصيص يُمكنك مراجعة التوثيق الرسمي الأيقونات الاجتماعيّة وخطوط الأيقوناتالأيقونات الاجتماعيّةيُوفر Foundation حزمة من الأيقونات الاجتماعيّة يصل عددها إلى 76 أيقونة، وهي بصيغة SVG والّتي تجعل من عرضها على شاشات Retina مثاليًا. بإمكانك تحميل الحزمة من هنا لتحصل على ملف مضغوط، يحتوي على الأيقونات بصيغتين، SVG للمتصفحات الّتي تدعم هذه اللاحقة، وPNG للمتصفحات الّتي لا تدعم SVG. قم بفك الضغط عن الملفات وضعها في ملف CSS الخاص بالمشروع، ومن ثُمّ قم باستدعاء ملف CSS الخاصّ بالحزمة في الوسم <head> بإضافة السطر التّالي: <link rel="stylesheet" href="css/webicons.css" /> في متجرنا سوف نقوم بإضافة ثلاث أيقونات في ذيل الصفحة footer، وذلك باستخدام الصنف webicon ومن ثم اسم الأيقونة لتظهر بالحجم المتوسط، ولتخصيص الحجم يُمكننا استخدام الصنفين small و large. <div class="row"> <footer class="text-center"> <a href="#" class="webicon facebook large"></a> <a href="#" class="webicon flickr large"></a> <a href="#" class="webicon twitter large"></a> </footer> </div>خطوط الأيقوناتيُوفر Foundation حزمة من خطوط الأيقونات وعددها 283، ويُمكنك الحصول عليها من هنا، وبعد التحميل وفك الضغط، قُم باستدعاء ملف CSS الخاص بالأيقونات في الوسم <head> بإضافة السطر التّالي: <link rel="stylesheet" href="css/foundation-icons.css" /> في متجرنا سوف نضيف "سلة التسوق" shopping-cart في الشريط العلوي، وذلك باستخدام اسم الأيقونة مسبوقًا بـِ fi كصنف للوسم <i> <li class="right"><a href="#"><i class="fi-shopping-cart"></i></a></li> أيضًا في الصفحة الرئيسة بإمكاننا استخدام الأيقونات التّالية: <i class="fi-camera"></i> ... <i class="fi-upload"></i> ... <i class="fi-dollar"></i> أُقصوصاتيُوفر Foundation أقصوصات (snippets) للمحرر Sublime Text وهي مساعدة جدًا في عملية التطوير وتزيد من إنتاجيّة المُطوّر، وبإمكانك تحميلها عن طريق مُدير الحزم الخاص بالمُحرر، ولكن لا أنصح بتحميلها في بداية تعاملك مع الإطار وإنمّا عليك في البداية التعامل مع الإطار بشكل مباشر لتحفظ الصياغة الخاصة به. إنّ كنت لا تملك مُدير الحزم فيُمكنك تحميله من هنا بعد التحميل كل ما عليك فعله هو كتابة اسم الأقصوصات. أو بإمكانك تحميل الأقصوصات بشكل مُباشر من المستودع الخاص بها على موقع GitHub، وبعد تحميلها يمكن وضعها في المُجلد الخاص بالإضافات. في نظام التشغيل Windows يُمكن تنفيذ السطر التّالي في موجه الأوامر لتحصل عليها مباشرةً. cd "%AppData%\Sublime Text 3\Packages\User" git clone https://github.com/zurb/foundation-5-sublime-snippets.git لاحظ عند كتابة zf-topbar في المُحرر ثم الضغط على Tab سينتج النّصّ البرمجيّ التّالي، وهي عبارة عن الشريط العلوي (topbar). وعند كتابة zf-pagination في المُحرر ثم الضغط على Tab سينتج النّصّ البرمجيّ الخاصّ بـ"ترقيم الصفحات" (pagination). تُقدم لك الأقصوصات أيضًا تعليق للإشارة إلى الأصناف المتوفرة لبعض العناصر، فعند كتابة zf-button والضغط على Tab النّص التّالي سيوضح لك إلى الأصناف المتوفرة والّتي يُمكنك استخدامها مع الصنف button. كما تلاحظ أنّ هذه الأقصوصات تُوفر عليك الكثيرَ من الكتابة والوقت، لذلك أنصحك بالإطلاع عليها وتجربتها. ما الذي عليك فعله بعد انتهاء السلسلة؟بعد قراءتك لهذه السلسلة بشكلٍ كامل ستكون جاهزًا لبناء موقعك الأول باستخدام Foundation، وليكن التوثيق الرسميّ هو مرجعك الدائم فهو مُنظّم ومُنسّق بشكل أكثر من رائع ومع الأمثلة العمليّة وبلغة إنكليزية مُبسّطة تُسهل عليك التعامل مع الإطار حتّى لو كانت لغتك الإنكليزية ضعيفة، وأهم شيء هو التطبيق العمليّ واختبار ما تمّ التّطرقُ له في هذه السلسلة، وأرجو أن تكون هذه السلسلة قد نالت إعجابك وإلى اللقاء مع مواضيع أُخرى. -
قد وصلت إلى الجزء الرابع، وهذا يعني أنّ السلسلة قد راقت لك -أرجو الله ذلك- في الجزء السابق تعرفنا على نظام التنقل الخاص بالإطار، وفي هذا الجزء سوف نتعرف على الأزرار وأنواعها، والنماذج وملحقاتها، وكيف سوف نستفيد منها في متجرنا. الأزرار (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 وغيره من المواضيع. الصور والفيديو (Images and Videos)المدار (Orbit)"المدار" وهو ما يقابل "carousel" في إطار العمل Bootstrap، قدم Foundation "المدار" بشكل مُبسطٍ وسريع الإعداد كل ما عليك فعله هو إضافة خاصية المعلومات data-orbit "للقائمة الغير مرتبة" (<ul>) وستتكفّل JavaScript بما بقي لإنشاء "المدار"، ومُحتوى "المدار" يُمكن أنّ يكون نصّيًا أو صورًا والتي يُمكن أن يُضاف لها "شرح صورة" (caption)، ويدعم "المدار" ميزة المسح بالإصبع (swiping) في الأجهزة التي تُوفر شاشات لمسية، وخاصية الربط العميق (deep linking)، والتي تُتيح لك إنشاء رابط لأحد عناصر "المدار". في صفحة المعرض قمنا باختيار ثلاث صور لعرضها باستخدام "المدار"، لاحظ أنّ الشيفرة بسيطة جدًا ولا تحتاج إلى الكثير من الإعداد. <div class="row"> <ul data-orbit> <li> <img src="img/1.jpg"> </li> <li> <img src="img/2.jpg"> </li> <li> <img src="img/3.jpg"> </li> </ul> </div> في الصفحة الرئيسة الخاصة بالمتجر قمنا بإنشاء "المدار" باستخدام مُحتوى نصّي فقط. <div class="row panel"> <ul class="text-center" data-orbit> <li> <div> <h2>Start make money by selling you photos</h2> <p>We have connection with big clients looking for you photos</p> </div> </li> <li> <div> <h2>We are fair</h2> <p>We take 95% and the rest is for you</p> </div> </li> <li> <div> <h2>We have subscription plans</h2> <p>Three bussnies plans for all sizes</p> </div> </li> </ul> </div> مثال حي http://codepen.io/anon/pen/NPpRqQ: للأسف توقف Foundation عن دعم "المدار" بعد أكثر من أربعة أعوام على إصداره، تنصح Zurb باستخدام أحد الحلول البديلة وهي إضافة slick. الأمر الجيد أنّه مازال بالإمكان متابعة استخدام "المدار" وبكامل ميزاته، ولكن بدون تحديثات مستقبلية. عارض الصور (Lightbox)قام Foundation بتوفير إضافة عرض الصور (lightbox)، حيثُ أنّ "المدار" لا يستطيع التعامل مع الصور ذات الارتفاع المختلف، ولإنشاء عارض الصور كل ماعليك فعله هو تجميع الصور في "قائمة غير مرتبة" وإضافة الصنف clearing-thumbs والخاصيةdata-clearing، لتحصل على معرض صور بأبسط الخيارات، حيث تُعرض جميع الصور على الصفحة وعند الضغط على أحدها يتم الانتقال إلى صفحة جديدة لتُعرض الصورة بحجم كبير مع إمكانية التّنقل بين الصور الأُخرى بشكل مُصغّرات (thumbnails)، ولإضافة شيء من الجمالية للصور بإمكانك استخدام الصنف th للوسم <img>، الذي يضيف إطارًا و"تأثير مرور" (hover) للصور، كما يُقدم Foundation أسلوبًا آخرًا للعرض حيثُ بإمكانك اختيار إحدى الصور وعرضها في الصفحة بشكل منفرد وبعد الضغط عليها يُنتقل إلى صفحة أُخرى تعرض الصورة المُختارة بحجمها الكبير وباقي الصور بشكل مُصغّر، ولتطبيق هذا الأسلوب عليك إضافة الصنف clearing-feature "للقائمة غير المرتبة" والصنف clearing-featured-img للصورة المُختارة، ولإضافة "شرح صورة" (caption) نستخدم "خاصية المعلومات" data-caption. <div class="row"> <div class="large-12 columns"> <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 clearing-thumbs" data-clearing> <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>الفيديو المرن (Flex Video)التعامل مع تجاوبيّة الفيديو من الأمور المزعجة في CSS، وهي في نفس الوقت مطلبٌ أساسيٌ في أي موقع. يُقدم Foundation الصنف flex-video للتعامل مع الفيديو المُضمّن (embedded) في الصفحة، حيث يقوم هذا الصنف بالحفاظ على أبعاد الفيديو مُتناسقة على مُختلف قياسات الشاشات. للاستفادة من "الفيديو المرن" Flex Video كل ما عليك فعله هو إحاطة الوسم <iframe> بالوسم <div> مع الصنف flex-video، لتحصل على تجاوبية على أي حجم شاشة، ويُمكن استخدام الصنف widescreen لتوسيع عرض الفيديو. كما يُقدم Foundation صنفًا خاصًا لموقع Vimeo وبنفس الاسم وذلك لتنسيقه بشكل أفضل في الصفحة. <div class="flex-video"> <iframe width="560" height="315" src="//www.youtube.com/embed/ExAmPl3" frameborder="0" allowfullscreen></iframe> </div>دائمًا لدمج فيديو في الصفحة يجب استخدام الرابط المسمى Embed المُلحق بالفيديو، في YouTube يُمكن الحصول على الرابط أسفل الفيديو. الهيئة والظهور (Formatting and Visibility)تنسيق العناوين والنّصوصيَهتم Foundation بمظهر العناوين والنصوص (typography)، حيث يُقدم Foundation "للقائمة غير مرتبة" <ul> الأصناف "قرص" disc لجعل جميع عناصر القائمة مسبوقًا بدائرة مُطمسة وحتى المتداخل منها (nested)، ,الصنف "دائري" circle يَسبق جميع العناصر بدائرة مُفرغة، والصنف "مربع" square يسبق العناصر بمُربع صغير مُطمس، ويعرض الصنف no-bullet القوائم مُجردة من أيّ شكل. <ul class="no-bullet"> <!-- القائمة سوف تظهر من دون أيّ شكل --> <li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ul> <li>Nested List Item</li> <li>Nested List Item</li> <li>Nested List Item</li> </ul> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> لاحظ الفرق في الاقتباسات الموجودة في الصفحة الرئيسة في المتجر قبل وبعد استخدامنا لـFoundation. لاحظ التنسيق الخاص بالعناوين (headings) في مُتصفح Chrome والتنسيق الخاص بـFoundation. يُقدم Foundation الصنف vcard "لقائمة غير مرتبة" <ul> لعرض العناصر <li> على شكل بطاقة عمل، حيث يُحيط العناصر بحدود (border) لتبدو كالصندوق لتُستخدم كبطاقة عرض لبيانات الاتصال. <ul class="vcard"> <li class="fn">Mohamad Abras</li> <li class="street-address">Address: its private.</li> <li class="locality">City: One of the city</li> <li class="email"><a href="#">mohamad.abras@sawrha.com</a></li> <li>Phone: 111111111</li> </ul> يُقدم Foundation الصنفين show-for-print لإظهار المُحتوى في صفحة الطباعة، والصنف hide-for-print لإخفاء المُحتوى في صفحة الطباعة. يُقدم Foundation الصنف "علامة" label لتنسيق المُحتوى النصي ليكون ظاهرًا للعيان للإشارة إلى أهمية المُحتوى. <li class="label">Its not my real number!......My number has 2 in the end.</li> يُقدم Foundatin تنسيقًا خاصًا للوسم <kbd> لجعله بارزًا وأكثر وضوحًا في النص. لابُدْ أنّك لاحظت أيضًا الصنف panel الذي قمنا باستخدامه في المتجر أكثر من مرّة والذي يُضيف حدود واضحة مع خلفية تحمل لونًا بالقيمة f2f2f2 للمُحتوى الداخلي، ويُمكن تخصيص الصنف panel بالصنف callout ليُضيف لونًا يحمل القيمة ecfaff، والصنف radius لجعل الحواف مصقولة. في صفحة الخطط والأسعار الخاصة بالمتجر سوف نستخدم الصنف panel مع الصنف callout والصنف radius. <h1 class="panel callout radius">Plans and Pricing</h1> صناديق التحذير والتنبيه (Alert Boxes)وهي من الإضافات المُساعدة التي بإمكانك أن تستخدمها مع النماذج، أو كوسيلة عرض للإشارة إلى نجاح أو فشل عملية ما على الموقع، أو حتى لعرض معلومات مُساعدة للمستخدم. تأخذ الصناديق عرض الحاوية الخاصة بها بشكل كامل، ولإنشاء صندوق كل ما تحتاجه هو خاصية المعلومات data-alert والصنف alert-box. ولتخصيص الصناديق بإمكانك استخدام الأصناف "نجاح" success، "حواف مصقولة" radius، "تحذير" warning، "حواف دائرية" round، "تحذير" alert، و"معلومة" info. في صفحة التسجيل الخاصة بالمتجر سوف نقوم بإنشاء صندوق تنبيه للإشارة إلى أننا نقوم بحماية معلومات المُستخدم، سوف نستخدم الصنفين radius لجعل الحواف مصقولة وinfo من أجل اللون. <div data-alert class="alert-box info radius"> We protect your information. <a href="#" class="close">×</a> </div> معلومة جانبية (Tooltip)"المعلومة الجانبية" (tooltip) هي طريقة سريعة لعرض معلومات لمصطلح مُعين أو حدث (action) عند وقوف المؤشر على كلمة ما على الصفحة. للتطبيق كل ماعليك فعله هو إحاطة المصطلح المُراد إضافة "معلومة جانبية" له بالوسم <span> مع الصنف has-tip، الذي يجعل من المصطلح عريضًا (bold)، بالإضافة إلى خاصية المعلومات data-tooltip، والرسالة المُراد عرضها سوف نضعها في الخاصية title. في متجرنا سوف نستفيد من هذه الخاصية في صفحة التسجيل وفي عمود المزايا تحديدًا للإشارة إلى أنّ الرسائل الخاصة بالمتجر هي رسائل تنبيه فقط. <p><span data-tooltip class="has-tip" title="Just important notifications">No spam</span></p>حوار مُنبثق (Reveal Modal)وهو نوع من أنواع النوافذ المُنبثقة، حيث النافذة تظهر لعرض مُحتوى معين مع تعتيم للخلفية في الصفحة الحالية، يَستخدم Foundation مكتبة jQuery لتوفير إضافة الحوار المنبثق، ولإنشائها نقوم بإنشاء "قسم" <div> وإضافة تعريف id باسم مناسب، والصنف reveal-modal، وخاصية المعلومات data-reveal. داخل القسم بإمكانك وضع ما تريد من مُحتوى سواءً أكان كتابيًا أو صورًا أو فيديو أو نماذج، وحتى إنّه بالإمكان ربط حوار منبثق بآخر، وللتحكم بحجم الحوار بإمكانك استخدام خمسة أصناف، وهي بالتدريج من صغير جدًا tiny إلى كبير جدًا xlarge، بالإضافة إلى الصنف ملء الشاشة full، وبعد إنشاء modal بإمكانك استدعائه عبر خاصية المعلومات data-reveal-id. في الصفحة الرئيسة بالمتجر سوف نقوم بإنشاء حوار منبثق للصور الأكثر مبيعًا، حيث عند الضغط على أحد الصور سوف يتم ظهور نافذة تعرض الصورة بنافذة مُستقلة مع إمكانية إغلاقها سواءً بالضغط على إشارة الإغلاق أو بالضغط على أي مكان في الصفحة. <!-- Any where in the HTML document --> <a href="#" data-reveal-id="myModal"><img class="th" src="img/th2.jpg"></a> <!-- At the bottom of HTML document --> <div id="myModal" class="reveal-modal small" data-reveal> <img src="img/th2.jpg"> <a class="close-reveal-modal">×</a> </div> إلى هنا نكون قد وصلنا إلى نهاية الجزء الخامس من السلسلة، والذي من خلاله تحدثنا فيه عن أمور عدّة، وبعد هذا الجزء من المُفترض أن تكون قد ألفت التعامل مع الإطار وتوضحت الفلسفة التي يسير عليها، وفي الجزء السادس والأخير سوف نتحدّث عن أمور مُكملة للإطار وهي في نفس الوقت تُميز الإطار عن غيره من أُطر العمل. -
تعرّفنا على النظام الشبكي في الجزء السابق والذي هو أساس وجوهر أيّ إطار عمل ولابدّ من التعامل معه بأريحية تامّة فهو من المواضيع التي سوف تتعامل معها مع أيّ مشروع. في هذا الجزء سوف نتحدّث عن نظام التنقل الخاص بإطار العمل 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، وذلك من خلال التعرف على الشريط العلوي والقوائم المُنسدلة، وشريط التنقل الفرعي والجانبي والتبويبات ومسار التنقل وأخيرًا ترقيم الصفحات، وفي الجزء الرابع من السلسلة سوف نتعرف على الأزرار والنماذج.