الدرس الأول : اعداد الملفات و شرح Visibility classes- دورة Foundation 5

فى هذا الدرس اتحدث عن تحميل Foundation 5 Framework من الموقع الرئيسي الخاص بهم

ثم كيفية ربط ملفت الفريم ورك بملف HTML الخاص بمشروعنا كما يفضل اضافة الثلاث سطور التالية قبل نهاية وسم body :

<script> $(document).foundation();

</script>

 ثم ابدأ بشرح اول خصائص Foundation Framework و هو Visibility classes و الذي من خلاله استطيع اظهار اي عنصر فى ملف html عند حجم معين للمتصفح.
كمثال:
لنقل اني املك فى اعلي الصفحة عارض صور متحرك (Slider) و انا اريد اظهاره فقط فى الشاشات ذات الحجم المتوسط و الكبير و لا اريده ان يظهر فى حجم المتصفحات الصغيرة مثل متصفحات الهواتف الذكية (Smart Phones) كل ما عليا فعله هنا هو فقط اعطاء قيمة معينة لـلـ Class الخاص بالـ div المحتوي علي slider. هذه القيمة فى مثالنا هذا هي "show-for-medium-up"
ليصبح شكل العنصر الخاص بنا فى ملف html علي هذا النحو:

<div class="show-for-medium-up">

            your slider code here

</div>

فى هذه الحالة سيظهر slider فى الشاشات ذات الحجم المتوسط و الكبير فقط و يختفي فى المتصفحات الصغيرة , سهل و رائع أليس كذلك !

فيما يلي الـ classes المختلفة الخاصة بدرسنا هذا مع نبذة بسيطة عن كل منها :

"show-for-small-only": يظهر فى المتصفحات الصغيرة فقط

"show-for-medium-up": يظهر فى المتصفحات المتوسطة الحجم و كل المتصفحات الاكبر منها

"show-for-medium-only": يظهر فى المتصفحات ذات الحجم المتوسط فقط

"show-for-large-up": يظهر فى المتصفحات الكبيرة و المتصفحات الكبيرة جدا ايضا

"show-for-large-only": يظهر فى المتصفحات الكبيرة فقط

"show-for-xlarge-up": يظهر فى المتصفحات الكبيرة جدا جميعها

يوجد ايضا قيمتين اخرين و هما "show-for-xlarge-only" و "show-for-xxlarge-up" ولا اعتقد انك فى حاجة لاستعمالهم فى مشارعيك :)

يمكنك مشاهدة الدرس من هنا :

يمكنك تحميل الملفات النهائية للدرس من هنا 
تحديث: يمكنك مشاهدة الدرس الثاني من خلال هذا الرابط

يمكنك ايضا اضافة اي اسئلة او تعليقات هنا او فى صفحة الفيديو و سأقوم بالرد عليك بإذن الله تعالي فى اقرب وقت ^_^