المؤسسة هو واحد من اثنين من أطر HTML / CSS / JS كبيرة الأسماء لمطوري الواجهة الأمامية. لم يحدث ذلك عن طريق الصدفة. اليوم ، نحن هنا لنقول لك كل شيء عن سبب استخدامك لها.

الآن أولاً ، بالنسبة لأولئك الذين ربما يكتبون HTML الخاص بهم ، ولكنهم لم يسبق لهم العمل مع إطار عمل من قبل ، فإليك تفسيرًا:

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

لا يُقصد استخدامها كقوالب أو موضوعات موقع كاملة ، ولكن كمجموعة من وحدات البناء. فأنت تأخذ ما تحتاجه ، وتعديله ليتناسب مع المشروع ، وعمومًا تواصل عملك (وحياتك ، يفترض). من المفترض أن تكون مخصصة ، وعبث بها.

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

ومع ذلك ، بمجرد أن تعتاد على إطار عمل ، يمكن أن تقلل من الوقت الذي تقضيه في كتابة العلامات ورسم CSS إلى حد كبير.

بعض التاريخ

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

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

منذ صدورها في 18 أكتوبر 2011 ، و معهد ماساتشوستس للتكنولوجيا مرخصة أصبح الإطار واحدًا من "الأثرياء" ، وشهد استخدامه على الآلاف من مواقع الويب.

وتتحدث شعبيتها عن فائدتها وتعدد استخداماتها على حد سواء. إذا قررت أن المؤسسة مناسبة لك ، فلن تخذلك.

الميزات

كانت المؤسسة تحت التطوير النشط منذ ما يقرب من ثلاث سنوات حتى الآن. ليس من المستغرب إذن أن تكون قائمة الميزات واسعة النطاق.

في جوهره ، يتكون الإطار من ملفات CSS (تم إنشاؤها من ملفات SASS ، وهي متوفرة أيضًا للتنزيل) ، والعديد من المكونات الإضافية jQuery. لا يوجد HTML مدرج في التحميل الرئيسي (باستثناء صفحة تجريبية أساسية ، يمكنك كتابة ذلك بنفسك.

ومع ذلك ، هناك وثائق مفصلة حول كل عنصر. يأتي كل قسم من الوثائق مع مثال HTML لتستخدمه وتخصيصه حسب الحاجة. إذا كنت تريد الغوص مباشرة ، تحقق من كابل بيانات.

إذا كنت تريد تخصيص إطار العمل من الألف إلى الياء ، فهناك شيئان يمكنك القيام بهما:

الخيار 1

يمكنك اختيار تنزيل المكونات التي تريدها فقط على صفحة التحميل الرئيسية. إذا كان كل ما تريده هو الشبكة و CSS للملاحة ومكوّن jQuery أو اثنين ، فهذا أمر سهل. فقط ألغِ تحديد جميع الأشياء التي لا تريد تضمينها ، وانتقل!

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

الخيار 2

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

وبالمصدر ، أعني ملفات ساس. مع تلك ، يمكنك الدخول وتخصيص كل متغير حسب رغبتك ، مما يجعل إطار العمل الخاص بك حقاً.

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

يمكنك إجراء بحث على Google عن شيء مثل "Sass compiler for [your operating system here]" ، وستجد ما تحتاج إليه. أنا شخصياً ، لا أستطيع أن أوصي بالمنصة المشتركة كوالا التطبيق كافية.)

بمجرد تجميع ملفات Sass في ملف CSS عادي واحد ، ما عليك سوى الارتباط بها في قسمك كما تفعل مع أي ملف CSS آخر. سيقوم تطبيق كوالا ، على سبيل المثال ، بتجميع ملفات Sass تلقائيًا في كل مرة تقوم بحفظها ، لذلك سيشاهد متصفحك دائمًا أحدث التغييرات.

بناء

الشبكة

لا أستطيع أن أقول على وجه اليقين أن جميع أطر HTML تأتي مع نظام شبكة للتخطيط ، ولكن معظمها. شبكة المؤسسة ، بدون أي تخصيص ، هي عبارة عن عمود كلاسيكي مكون من اثنا عشر عمودًا ، ومحترس ، ومتجاوب.

الترميز والفئات بسيطة ، بما في ذلك فئات لتخصيص التنسيق حسب حجم الشاشة. إذا كنت قد عملت مع أنظمة الشبكة من قبل ، مثل نظام الشبكة 960 ، فلن تجد شبكة المؤسسة صعبة الإمتلاك.

ملاحظة: يتم ترميزها وفقًا لأسلوب الجوّال أولاً ، لذلك يجب أن تضع ذلك في اعتبارك أثناء قيامك بتخطيط موقعك.

الشبكة كتلة

فكر في هذا على أنه "شبكة صغيرة". تم تصميمه للحفاظ على عدد محدد من العناصر بالتساوي والمسافة بغض النظر عن حجم الشاشة.

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

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

الاشياء المستجيبة

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

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

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

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

باستخدام هذه المكتبة ، يمكنك حفظ بعض المستخدمين وبعض البيانات من ذاكرة الوصول العشوائي. ما عليك سوى التأكد من تنفيذ التراجع لأولئك المستخدمين الذين تم تعطيل جافا سكريبت لديهم.

التنقل

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

هناك مكونان للملاحة ، على الرغم من ذلك ، مما يجعل المؤسسة متميزة عن غيرها من الأطر.

ماجلان

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

Offcanvas

والثاني هو Offcanvas، وهو شريط تنقل عمودي مخفي بشكل افتراضي. اضغط على زر القائمة ، وشرائح القائمة على الصفحة لمتعة التصفح الخاصة بك.

ضع في اعتبارك أنه ، مثل جميع مكونات المؤسسة ، يمكن تنفيذها باستخدام الحد الأدنى من الترميز. لقد وضع الرجال في ZURB الكثير من العمل في جعل عناصر واجهة المستخدم المتقدمة هذه سهلة التنفيذ ، ويظهر ذلك.

وسائل الإعلام

غالباً ما تكون المكونات المرتبطة بالإعلام في أي إطار هي حيث يميل صناع الإطارات إلى الظهور قليلاً ، وليس الأساس استثناءً.

على سبيل المثال ، يتم تضمينها بشكل افتراضي تطهير Lightbox. انها معرض الصور المبسط ميت ، حقا. ما عليك سوى إلقاء بعض الصور المصغرة ، وتضمين الفئات ذات الصلة ، ولديك معرض صور قادر على اللمس يتعامل مع صور ذات ارتفاع متغير دون مشاكل على الإطلاق.

آخر هو فيديو مرن والتي يمكن ، من الناحية النظرية ، أن تستخدم فقط عن أي كائن قابل للتضمين. فقط قم بتغليف div بفئة الفيديو المرن حول فيديو Youtube ، أو iframe ، أو embed ، أو عنصر الكائن ، وأنت على استعداد للذهاب. لن يتم قياس تلك الكائنات تلقائيًا بحجم المتصفح.

وأخيرًا ، هناك أنماط مضمنة لصور الصورة المصغرة. لا شيء يتوهم أو خاص لرؤية هنا ... انهم فقط لطفاء.

لكن ماذا عن أوربت؟

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

ومع ذلك ، في حين أنه لا يزال في الإطار ، لم يعد مدعومًا من قبل ZURB ، ولا هو قيد التطوير النشط.

يوصي مبدعو المؤسسة أنفسهم بالبحث عن بدائل ، مثل بومة دائري ، أو البقعة.

إستمارات

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

يتطلب الأمر مهارة لجعل شيء ما مملاً حيث تبدو النماذج عامة وجميلة في آنٍ واحد. لا عجب أن العديد من الأطر التي جربتها قد قلدت أسلوب المؤسسة.

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

خذ المكون المنزلق ، على سبيل المثال: يمكنك تنفيذ منزلقات النطاق مع HTML5 ، ولكنها مملة ، واستخدام المظهر الافتراضي لنظام التشغيل الذي تستخدمه. مؤسسة ، من ناحية أخرى ، يتضمن المنزلقات التي يمكن نصبها مع CSS لمتعة التخصيص الخاص بك.

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

وصفت

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

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

غيّر الترميز أكثر من ذلك بقليل ، ويمكن أن تعطيك المؤسسة أيضًا أزرار القائمة المنسدلة ، وتلك أزرار الانقسام . أنت تعرف ، في الغالب زر ، القائمة المنسدلة جزء؟

ويستخدم هذان المكونان الأخيران المكون الإضافي المدمج الخاص بالمؤسسة. هذا يعني ، من بين أمور أخرى ، أنها تعتمد على جافا سكريبت. ومع ذلك ، فهي سهلة التنفيذ. كل شيء عن الطبقات.

طباعة

تستخدم المؤسسة إعدادًا مطبوعًا بسيطًا جدًا من نوع sans-serif حتى تبدأ. انها بسيطة وسهلة لتخصيص مع بعض المتغيرات Sass الأساسية ، وكلها الحجم نسبيا. هذا صحيح ، تستخدم مؤسسة ريم .

بما أن مبدعي المؤسسة يؤمنون بقابلية الاستخدام ، فإن كل شيء كبير بما فيه الكفاية ليتم قراءته بسهولة على الشاشات الصغيرة. القراءة على مسافة معتدلة على شاشات الكمبيوتر المحمول / سطح المكتب العادية لا تعطيني أي مشكلة أيضا.

تتضمن الميزات المطبعية الإضافية ما يلي:

قوائم مضمنة

هل تريد قائمة نصية أفقية؟ أنت تعرف ، النوع الذي قد تضعه في موقع تذييل الصفحة؟ أنت مغطى وفقًا لمنشئي المحتوى ، يجب عليك:

انهم على حق.   تمتص للتحكم المكاني.

تسميات

هذه هي أجزاء صغيرة جدًا من النص مع خلفيات ملونة. ما الذي قد تستخدمه من أجله؟ العلامات والبيانات الوصفية الأخرى ، أو كما يوحي اسمها ، قد تستخدمها لتسمية الأشياء ، أي. حقول النموذج.

وشملت تسميات العادية ، تسميات التنبيه ، ملصقات التحذير. إنها مجرد واحدة من تلك الأشياء الصغيرة المفيدة التي أحبها في المؤسسة.

أنظر أيضا: المفاتيح

وسائل الشرح والمطالبات

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

إذا كنت شريراً ، فقد تفعل ذلك لتشغيل الإعلانات ... بالصوت.

هل يمكن أن تفعل ذلك مع نافذة مشروطة. المؤسسة لديها نوافذ مشروطة كبيرة مع خيارات سلوكية واسعة ، خيارات تغيير الحجم ، ربط الأحداث ... حتى خيار لإزالة الخلفية.

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

ثم لدينا tooltips. يمكن تطبيق ذلك على أي عنصر ، وتعيينه على الشاشات الكبيرة فقط ، أو جميع الشاشات. (على أجهزة الجوال ، سيكون عليك النقر على العنصر المعني لرؤية تلميح الأدوات.) ويمكن أيضًا وضعه على أي جانب من العنصر.

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

يحتوى

توفر لك أطر HTML / CSS الأساسية طريقة لتنظيم المحتوى الخاص بك على الصفحة ، ومنحها القليل من التصميم. هذا هو واحد من الأطر الكبيرة ، على الرغم من ذلك ، مما يعني مكونات إضافية ، حتى بالنسبة للمحتوى.

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

التالي ، أشرطة التقدم . لن أتحدث عن هذه الأمور. إنها بالضبط ما تتوقعه.

تشتمل المؤسسة أيضًا على المكوّن الإضافي الأساسي للأكورديون والمكوّن الإضافي للمحتوى المبوب. أعتقد أنه من المثير للاهتمام ملاحظة أنه يمكنك وضع محتوى كلفي داخل قسم الأكورديون.

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

ما عليك سوى إضافة بعض سمات البيانات ، وستكون على ما يرام. إليك ما يبدو عند الدمج مع مكون جدول التسعير:

كيف تبدأ

والآن ، لقد مررت بقائمة الميزات الشاملة ، وترغب في الحصول عليها! حق؟ حسنًا ، إذا كنت صحيحًا ، فإليك كيفية البدء.

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

بعد هذا القسم ، سأدرج عددًا من البرامج التعليمية وموارد التدريب الأخرى لمساعدتك في رحلتك إلى أن تصبح أستاذًا أساسيًا.

انتقل تنزيل الحزمة الافتراضية على صفحة التحميل ، ودعونا نبدأ.

قم بتضمين الملفات الأساسية في مشروعك

الآن ، عند تنزيل الحزمة ، ستبدو بنية الملف الموجودة داخلها كما يلي:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

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

على سبيل المثال ، تنفذ placeholder.js سمة العنصر النائب لنماذج HTML5 للمتصفحات التي لا تدعمها.

الملفات التي وضعت عليها علامة هي الوحيدة التي تحتاج إلى ربطها في قسم صفحة الويب الخاصة بك / التطبيق. لأغراض هذا البرنامج التعليمي ، سأقوم بحذف معظم هذه الملفات ، ولن نحتفظ إلا بتلك الضروريات فقط. سأبدأ أيضًا من الصفر باستخدام index.html فارغ.

بدايةً ، ستبدو "الصفحة الرئيسية" لدينا كما يلي:

< !DOCTYPE html>

ربما لاحظت وجود ملف CSS إضافي هناك. سنحتاج ذلك للأنماط المخصصة.

قم بإنشاء تخطيط بسيط

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

لاحظ أني أتخطي بما في ذلك أي شيء مثل شريط التنقل أو عبارة تحث المستخدم على اتخاذ إجراء في هذا المثال. هذه هي الأشياء التي يجب عليك القيام بها في المشاريع الحقيقية.

رأس

وفقًا للقوانين الحالية الخاصة باتجاهات التصميم ، يجب أن نجعل رأسية ضخمة مع اسم الشركة ، والشعار ، وصورة خلفية ضخمة (غير مدرجة في هذا البرنامج التعليمي).

HTML لهذا بسيط بما فيه الكفاية:

Our Company Name
Insert a pithy slogan here

لا يحدد فصل الصفوف الحدود الخارجية لشبكتنا فحسب ، بل يميزها لنا. عنصر الرأس هناك على حد سواء لأسباب دلالية وتوفير الغرينية لإضافة صورة خلفية في وقت لاحق.

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

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

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

كما ترون ، لقد أعطيت رأس الصفحة لون الخلفية بدلاً من الصورة الفعلية ، وتمحورت رأسياً لمحتوى الرأس الخاص بنا. أنيق جدا ، هاه؟ إليك كيفية ظهور صفحتنا حتى الآن:

مقدمة والخدمات

لقد أعلنت نفسك بجرأة برأسك. حان الوقت لإخبار المستخدم عن هويتك وماذا تفعل. وصفا قليلا عن كل خدمة أو منتج ... هذه هي الطريقة التي نقوم بها في هذا العصر الحديث.

هيا بنا نبدأ.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

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

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

التباعد العمودي لأقسام المحتوى هو أمر يجب عليك القيام به لنفسك في كل إطار ، لذا احتجت إلى بعض CSS مخصص:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

لا شيء خاص هناك. بما أن كل شيء تقريبا ، بما في ذلك الشبكة ، متباعدة مع نظام الإدارة البيئية ، استخدمتها في الحشو للحفاظ على اتساق الأشياء بصريا. فكر في تباعد العناصر المستند إلى em كشبكة أساسية مدمجة يمكنك الاستفادة منها بسهولة.

إليك كيف يبدو الأمر برمته الآن:

التذييل

دعونا نعطي أنفسنا تذييلًا ميتًا بسيطًا ، مع وجود عدد من روابط التنقل ، وإشعار حقوق الطبع والنشر ، فلماذا لا؟

هنا ، قمت بتضمين قائمة مضمّنة (انظر أعلاه) لارتباطات التذييل هذه ، وعمودين يعملان في وضع عمودي بحجم الهاتف. هذا هو CSS الذي استخدمته:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

و voilà! صفحة هبوط عظام عارية لتخصيصها لمحتوى قلبك. إليك ما يبدو عليه الأمر كله:

أمسك بالملف المضغوط إن شئت ، واللعب بالرمز الموجود بالفعل. ابدأ من الصفر ، وألقِ نظرة على المصدر. أو ، يمكنك فقط إلقاء نظرة أدناه على المواد التدريبية التي قام بها الآخرون ...

البرامج التعليمية والتدريب

المواد التدريبية من قبل ZURB

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

يوفر ZURB أيضًا دروسًا تدريبية مدفوعة يمكن تناولها عبر الإنترنت. يمكنك العثور على مزيد من المعلومات حول هذا على موقعه على الانترنت .

Screencasts بواسطة Webdesigner مستودع

صحيح! لقد قمنا بعمل بعض مقاطع الفيديو التدريبية الخاصة بنا ، مع التركيز بشكل خاص على مؤسسة 5. تحقق لهم على يوتيوب: مؤسسة 5 مقدمة و استخدام الميزات المتقدمة للمؤسسة

الشروع في العمل مع ZURB Foundation 5 Grid

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

زورب 5 دروس إطار العمل

الرجال في ieatcss.com ذهب وكتب كتاب إلكتروني كامل عن مؤسسة 5. يمكنك العثور على دروسهم المبتدئين هنا. إذا كنت تريد شيئًا أكثر تقدمًا ، يمكنك تنزيل الكتاب الإلكتروني الخاص به مقابل 29 دولارًا أمريكيًا.

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

إتقان مؤسسة زرب. البرامج التعليمية من الألف إلى الياء

هذا هو آخر مجموعة من البرامج التعليمية ، يتبعها كتاب إلكتروني اختياري. يتم توفير هذه من قبل MonsterPost، مدونة TemplateMonster.

وأوضح أساليب وقح المؤسسة

إذا كنت تتوق إلى برنامج تعليمي أكثر تعمقاً ها انت ! في هذا المنصب ، أصدقائنا في TUTS + وصف بالتفصيل ، كيفية تخصيص FOundation من ملفات Sass.

إذا لم تكن قد عملت مع ملفات Sass من قبل ، ابدأ من هنا.

كيفية إنشاء الجداول استجابة في الأساس

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

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

فوركس

جمبى - شوكة مؤسسة

شيء واحد جميل حول أطر المصدر المفتوح مثل المؤسسة هو أن تراخيصهم تسمح للناس بأخذها ، وتغييرها ، وحتى الاتصال بهم. المصممين والمطورين في الجراحون الرقمية فعلت ذلك بالضبط.

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

حيث تم تصميم مؤسسة لتكون مرنة ، وتناسب كل من المواقع على شبكة الإنترنت وتطبيقات الويب ، Gumby أكثر تخصصاً. إنها تركز على شيء واحد: مواقع الويب التي تعتمد على المحتوى ، وسهولة إنشاء المحتوى.

واجهة المستخدم المسطحة تقريبًا

التغييرات على المؤسسة في هذه الشوكة هي دقيقة جدا لدرجة أنني لست متأكدا مما إذا كان يمكن أن نسميها شوكة أو موضوع. هو ، في الأساس ، مؤسسة 5.2.2 مع عدد قليل فقط من التغييرات الجمالية الصغيرة.

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

إنه تصميم عديم الحركة ، وأعتقد أنه يمكن أن يحسن الاستخدام. حسنا ، بالنسبة لبعض المستخدمين ، على أي حال.

موارد وأدوات متنوعة

في ما يلي بعض الأدوات والأشياء ذات الصلة بالمؤسسة والتي لا تتناسب تمامًا مع أي فئة أخرى:

بناء كتل من قبل ZURB

ال اللبنات هي مقتطفات من شفرة مبنية و / أو للمؤسسة. تشمل هذه المكونات الجديدة مكونات واجهة المستخدم ، وتنسيقات المحتوى القابلة لإعادة الاستخدام وأكثر من ذلك.

مقتطفات نصية سامية

نص سامي هو محرر نص رائع يستخدمه المبرمجون في جميع أنحاء العالم. هذه المقتطفات (المقصود من أجزاء من التعليمات البرمجية التي يقصد بها الإدراج السهل في أي ملف) هو أساسًا جعل تخطيطات المبنى باستخدام الأساس أسرع بكثير. فهي متوافقة مع كل من Sublime Text 2 & 3.

مولد الشبكة التجريبية

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

ضع في اعتبارك ، يبدو أن CSS يعتمد على إصدار قديم من المؤسسة ، لذا قد تحتاج إلى تكييفه مع أسماء الفئات الأحدث والفئات التفاعلية. ومع ذلك ، فإنه يفعل كل الحسابات الصعبة بالنسبة لك.

أوامر المفضلة

Bookmarklets هي أدوات صغيرة ، عادة ما تكون مبنية مع JavaScript ، والتي يمكن وضعها في شريط الإشارات المرجعية. بمجرد تشغيلهم ، يمكنهم مشاركة الصفحة الحالية وعرض معلومات مفيدة في تراكب والعديد من الأشياء المفيدة الأخرى.

ال شبكة العرض بواسطة Antoine Lefeuvre يمكن استخدامه لتراكب الشبكة البصرية في أعلى الصفحة التي تعمل عليها في الوقت الحالي. الشبكة قابلة للتخصيص ، ولكن يمكنك ضبطها على الإعدادات الافتراضية للمؤسسة بسهولة.

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

ستقوم [فاكتوري ديزاين ديستركتلكم] التي قام بها فيكتور كولون بإعادة تحميل الصفحة الحالية الموجودة داخل أداة تسمح لك بمعاينة تصاميمك بسرعة بقرارات مختلفة.

نظرة على ما هو قادم

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

مؤسسة لتطبيقات

يقوم ZURB بإنشاء نسخة جديدة من المؤسسة والتي لن تحل محل مؤسسة 5 ، ولكنها تعمل جنبًا إلى جنب. وسيتضمن ميزات خاصة بالتصميم ، والنماذج ، وبناء تطبيقات الويب.

ستتضمن الميزات شبكة جديدة ، والتكامل مع Angular.js ، وميزات جديدة مصممة خصيصًا للنماذج وأكثر من ذلك. لقراءة المزيد حول ما يفعلونه ، راجع ما يقولونه لنفسك: مؤسسة التالي .

Motion UI

من الناحية الفنية ، ستشكل واجهة المستخدم في Motion UI جزءًا من هذا الإصدار الجديد من المؤسسة ، ولكن أتصور أنه سيكون متاحًا كمكون منفصل للاستخدام في أي مكان. (هذا تخمين متعلم ، لا شيء أكثر ...) ما هو؟ انها مكتبة الرسوم المتحركة.

تستخدم التطبيقات الحديثة الاستخدام المكثف للرسوم المتحركة ، ليس فقط لإثارة إعجاب المستخدمين ، بل لتحسين إمكانية الاستخدام. تم تصميم Motion UI لتسهيل ذلك على الأشخاص الذين يقومون ببناء واجهات معقدة.

وفقا لزوّار ZURB أنفسهم:

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

استنتاج

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

هل هو مناسب لك وللمشاريع الخاصة بك؟ إلقاء نظرة في الداخل ومعرفة.