باستخدام موضوع ZURB Foundation لدروبال

احصل على قوة إطار عمل ZURB في موضوع دروبال

قبل وجود Bootstrap على Twitter ، كان هناك (و) مؤسسة ZURB ، وهي إطار يتيح لك إضافة أزرار جميلة ، وشبكات حظر ، وأشرطة تقدم ، وجداول تسعير ، وأكثر بكثير مع عدد قليل من طبقات CSS المناسبة. مع موضوع ZURB Foundation لـ Drupal ، يمكنك إطلاق العنان لكل هذا bling على موقع Drupal الخاص بك مع سهولة قاتلة.

ما هو الإطار مؤسسة ZURB؟

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

يمكنك استخدام معظم هذه الميزات عن طريق إضافة فئات CSS خاصة. على سبيل المثال:

في ما يلي زر .

وهنا > زر صغير .

إطار مؤسسة ZURB منفصل تمامًا عن دروبال. يستخدمه الأشخاص على WordPress و Joomla وحتى مواقع HTML الثابتة .

ما هو موضوع ZURB دروبال الموضوع؟

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

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

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

هل تحتاج هذا الموضوع لاستخدام مؤسسة ZURB في دروبال؟

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

لكن هذا الموضوع يجعل ذلك أسهل ، كما أنه يتضمن المزيد من التكامل مع دروبال.

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

ملاحظة: لم أستخدم هذه الوحدات الصغيرة بعد ، لذا فقد تكون محفوفة بالمخاطر. حتى كتابة هذه السطور ، يتطلب ZURB Clearing Media-2.x-dev ، والذي قد يكون ترقية خطرة إذا كنت تستخدم حاليًا Media 1.x. ويجب أن يمنح مطلب إصدار تطوير الوحدة النمطية دائمًا فترة توقف واحدة. لا يزال ، هذه الوحدات وغيرها من ZURB تستحق النظر فيها.

اختر أي إصدار من مؤسسة ZURB يستخدم

قبل تنزيل موضوع ZURB Foundation ، تحقق من الإصدار الذي يجب استخدامه. هناك إصدارات رئيسية مختلفة من إطار مؤسسة ZURB ، ويتوافق رقم الإصدار الرئيسي للموضوع مع الإطار الذي يعمل به. لذلك ، تعمل الإصدارات 7.x- 3 .x من السمة مع Foundation 3 ، الإصدارات 7.x- 4 .x مع Foundation 4 ، وتعمل الإصدارات 7.x- 5 .x مع Foundation 5 .

حتى كتابة هذه السطور ، فإن أحدث إصدار مستقر للموضوع هو 7.x-4.x ، والذي يعمل مع الإصدار 4. ولا يزال الإصدار 7.x-5.x قيد التطوير. لذا ، على الرغم من أن موقع الإطار الأساسي يفترض أنك ستستخدم مؤسسة 5 ، فقد ترغب في الالتزام بالمؤسسة 4 في الوقت الحالي.

لاحظ أيضًا أن مؤسسة 5 لديها متطلبات إضافية ، وخاصة jQuery 1.10. مؤسسة 4 تحتاج فقط إلى jQuery 1.7+.

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

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

استخدم SASS و البوصلة و & # 34؛ _variables.scss & # 34 ؛!

إذا كنت تريد تعديل CSS لهذا المظهر على الإطلاق ، فتأكد من:

• استخدم شعار ZURB Foundation كموضوع أساسي للموضوع الفرعي المخصص الخاص بك
• قم بإنشاء هذا الموضوع الفرعي باستخدام الأمر drush الذي يوفره السمة. مثل هذا: drush fst your_theme_name
• يطلع على مهل ملف _variables.scss الممتاز

يتم إنشاء ملف _variables.scss تلقائيًا بواسطة drush fst. يحتوي هذا الملف المفرد على متغيرات لأي شيء تقريبًا قد ترغب في تعديله في CSS الخاص بك. شيء مذهل! في مكان واحد ، يمكنك تعيين كل شيء من الخط الافتراضي إلى عرض الشاشة إلى الحد على فتات الخبز.

بالطبع ، يمكنك دائمًا إعداد ملفات إضافية أيضًا. لكن _variables.scss هو مكان رائع للبدء.

لاحظ ملحق الملف: scss ، وليس css. لاستخدام _variables.scss ، ستحتاج إلى إعداد SASS (لغة ملحق CSS) و Compass (إطار تم إنشاؤه باستخدام SASS). عند تشغيل ترجمة بوصلة ، ستتحول ملفات scss إلى CSS جميل في ملفات منفصلة. (أنا أفضل مشاهدة البوصلة - وهذا يحافظ على تشغيل وتحديث CSS أثناء قيامك بتعديل ملفات scss.)

إذا كنت حقاً لا تريد أن تزعج SASS ، فيمكنك كتابة ملفات CSS كالمعتاد وإدراجها في ملف .info الخاص بموضوعك. ولكن ثق بي - سوف يتم استرداد الاستثمار الوقت الصغير لتعلم ما يكفي لتجميع _variables.scss مرة أخرى على الفور تقريبا.

قبل أن تستخدم مؤسسة ZURB

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

أيضا ، مكون Joyride حلوة جدا.

وسواء كنت تستخدم مؤسسة ZURB ، أو Bootstrap ، أو أي إطار عمل آخر ، فتأكد من الحصول على هذه النصائح حول استخدام إطار عمل مع Drupal .