Skip to main content

Drupal के लिए ZURB फाउंडेशन थीम का उपयोग करना

Drupal 8 + फाउंडेशन 6: बिल्कुल सही संयोजन (जून 2026)

Drupal 8 + फाउंडेशन 6: बिल्कुल सही संयोजन (जून 2026)
Anonim

ट्विटर बूटस्ट्रैप होने से पहले, वहां (और है) ज़ुरब फाउंडेशन था, एक ढांचा जो आपको सुंदर बटन, ब्लॉक ग्रिड, प्रोग्रेस बार, मूल्य निर्धारण टेबल और कुछ अच्छी तरह से स्थापित सीएसएस कक्षाओं के साथ बहुत कुछ जोड़ने देता है। ड्रूपल के लिए ज़ुरब फाउंडेशन थीम के साथ, आप घातक आसानी से अपने ड्रूपल साइट पर इस ब्लिंग को उजागर कर सकते हैं।

ज़ुरब फाउंडेशन फ्रेमवर्क क्या है?

ZURB फाउंडेशन ढांचा सीएसएस और जावास्क्रिप्ट कोड का एक संग्रह है जो आप शायद अपनी वेबसाइट पर चाहते हैं। इसमें उपरोक्त बटनों की तरह न केवल क्लिक करने योग्य आंख कैंडी शामिल है बल्कि कुछ वास्तव में अद्भुत उत्तरदायी शक्ति भी शामिल है।

आप विशेष सीएसएस कक्षाओं को जोड़कर इनमें से अधिकतर सुविधाओं का उपयोग करते हैं। उदाहरण के लिए:

यहां है बटन.

और यहाँ एक है छोटा बटन.

ज़ुरब फाउंडेशन ढांचा ड्रूपल से बिल्कुल अलग है। लोग इसे वर्डप्रेस, जूमला और यहां तक ​​कि स्थिर एचटीएमएल साइट्स पर भी इस्तेमाल करते हैं।

ZURB फाउंडेशन Drupal थीम क्या है?

Drupal ZURB फाउंडेशन विषय आपको थीम को डाउनलोड करने और सक्षम करने (और दस्तावेज़ीकरण पढ़ने और निश्चित रूप से कुछ अतिरिक्त कदम उठाने) द्वारा इस ज़ुरबिश शक्ति को मुक्त करने की अनुमति देता है।

उदाहरण के लिए, ZURB फाउंडेशन jQuery जावास्क्रिप्ट लाइब्रेरी पर निर्भर करता है, इसलिए आपको शायद jQuery अपडेट इंस्टॉल करना होगा। जांचें कि क्या आप jQuery पर निर्भर किसी अन्य मॉड्यूल का उपयोग कर रहे हैं या नहीं। यदि आप jQuery के संस्करण का बहुत नया उपयोग करते हैं, तो ये मॉड्यूल काम करना बंद कर सकते हैं।

साथ ही, आप शायद इस विषय का उपयोग अपनी खुद की कस्टम थीम के लिए आधार विषय के रूप में करना चाहेंगे। अनुकूलन वह जगह है जहां ज़ुरब फाउंडेशन वास्तव में चमकता है।

क्या आपको ड्रूपल में ज़ुरब फाउंडेशन का उपयोग करने के लिए इस थीम की आवश्यकता है?

आप नहीं करते जरुरत ZURB फाउंडेशन ढांचे का उपयोग करने के लिए इस विषय। इसकी सबसे सरलता में, यह थीम सिर्फ आपकी साइट पर ज़ुरब फाउंडेशन सीएसएस और जावास्क्रिप्ट जोड़ती है, और आप इसे मैन्युअल रूप से कर सकते हैं।

लेकिन यह विषय इतना आसान बनाता है, और इसमें ड्रूपल के साथ कुछ और एकीकरण भी शामिल है।

इसके अलावा, आप आगे एकीकरण के लिए छोटे अतिरिक्त मॉड्यूल जोड़ सकते हैं। उदाहरण के लिए, ZURB ऑर्बिट मॉड्यूल आपको छवि फ़ील्ड के साथ एक कक्षा स्लाइड शो बनाने देता है। ZURB क्लियरिंग मॉड्यूल आपको मीडिया छवियों के साथ उत्तरदायी लाइटबॉक्स बनाने देता है।

नोट: मैंने अभी तक इन छोटे मॉड्यूल का उपयोग नहीं किया है, इसलिए वे खतरे से भरे हुए हो सकते हैं। इस लेखन के अनुसार, ZURB क्लियरिंग की आवश्यकता है

मीडिया-2.x-देव, यदि आप वर्तमान में मीडिया 1.x का उपयोग कर रहे हैं तो यह एक खतरनाक अपग्रेड हो सकता है। और मॉड्यूल के विकास संस्करण के लिए एक आवश्यकता हमेशा एक विराम देना चाहिए। फिर भी, ये और अन्य ZURB मॉड्यूल देखने लायक हैं।

ZURB फाउंडेशन का उपयोग करने के लिए कौन सा संस्करण चुनें

ZURB फाउंडेशन थीम डाउनलोड करने से पहले, जांचें कि आपको किस संस्करण का उपयोग करना चाहिए। ज़ुरब फाउंडेशन फ्रेमवर्क के विभिन्न प्रमुख संस्करण हैं, और थीम के लिए प्रमुख संस्करण संख्या उस फ्रेमवर्क से मेल खाती है जो इसके साथ काम करती है। ऐसा

7.x-3।एक्स फाउंडेशन के साथ थीम काम के संस्करण 3, द

7.x-4।एक्स संस्करण फाउंडेशन के साथ काम करते हैं 4, और यह

7.x-5।एक्स संस्करण फाउंडेशन के साथ काम करते हैं 5.

इस लेखन के अनुसार, थीम का नवीनतम स्थिर संस्करण 7.x-4.x है, जो फाउंडेशन 4 के साथ काम करता है। 7.x-5.x संस्करण अभी भी विकास में है। इसलिए, हालांकि फाउंडेशन फ्रेमवर्क वेबसाइट मानती है कि आप फाउंडेशन 5 का उपयोग करेंगे, आप अब के लिए फाउंडेशन 4 के साथ रहना चाहेंगे।

यह भी ध्यान रखें कि फाउंडेशन 5 में अतिरिक्त आवश्यकताएं हैं, खासकर jQuery

1.10। फाउंडेशन 4 केवल jQuery की जरूरत है

1.7+.

जब आप ऑनलाइन दस्तावेज पढ़ते हैं तो आप जिस फाउंडेशन का उपयोग कर रहे हैं उसके बारे में जागरूक रहें। यह विशेष रूप से सच है यदि आप ढांचे के नवीनतम संस्करण का उपयोग नहीं कर रहे हैं। कहें, फाउंडेशन 5 के लिए दस्तावेज़ों को पढ़ने में फिसलना आसान है, फिर निराश हो जाएं जब आपकी सुविधा 4 फाउंडेशन 4 साइट पर काम न करे।

उदाहरण के लिए, फाउंडेशन 5 में एक पूरा सेट शामिल है

मध्यम मध्यम आकार की स्क्रीन के लिए कक्षाएं। फाउंडेशन 4 में, जब तक आप अतिरिक्त कदम नहीं उठाते हैं, तो ये रहस्यमय रूप से असफल हो जाएंगे।

SASS, कम्पास, और "_variables.scss" का प्रयोग करें!

यदि आप इस विषय के लिए सीएसएस को ट्विक करने जा रहे हैं, तो सुनिश्चित करें कि आप:

  • अपने स्वयं के कस्टम सबथीम के लिए मूल थीम के रूप में ZURB फाउंडेशन थीम का उपयोग करें
  • इस subtheme का उपयोग कर उत्पन्न करें

    Drush थीम द्वारा प्रदान किया गया आदेश। ऐशे ही:

    अपने_theme_name fush fush

  • आराम से उत्कृष्ट perus

    _variables.scss फ़ाइल

_variables.scss फ़ाइल स्वचालित रूप से बनाई गई है

ड्रश एफएसटी। इस एकल फ़ाइल में लगभग चर शामिल हैं कुछ भी आप अपने विषय सीएसएस में tweak करना चाहते हो सकता है। यह आश्चर्यजनक है! सब एक ही स्थान पर, आप डिफ़ॉल्ट फ़ॉन्ट से स्क्रीन चौड़ाई तक ब्रेडक्रंब पर सीमा तक सेट कर सकते हैं।

बेशक, आप हमेशा अतिरिक्त फाइलें भी सेट कर सकते हैं। परंतु

_variables.scss शुरू करने के लिए एक शानदार जगह है।

फ़ाइल एक्सटेंशन पर ध्यान दें:

एससीएसएस, नहीं

सीएसएस। काम में लाना

_variables.scss, आपको SASS (एक सीएसएस एक्सटेंशन भाषा) और कम्पास (एसएएसएस के साथ निर्मित एक ढांचा) स्थापित करने की आवश्यकता होगी। जब आप दौड़ते हैं

कंपास संकलन, तुंहारे

एससीएसएस फाइलें अलग-अलग फाइलों में सुंदर सीएसएस में बदल जाएंगी। (मैं पसंद करता हूं

कंपास घड़ी - यह आपके द्वारा tweak के रूप में सीएसएस को चलाने और अद्यतन करता रहता है

एससीएसएस फ़ाइलें।)

यदि आप वास्तव में, वास्तव में एसएएसएस से परेशान नहीं करना चाहते हैं, तो आप सामान्य रूप से सीएसएस फाइलें लिख सकते हैं और उन्हें अपनी थीम में सूचीबद्ध कर सकते हैं

.info फ़ाइल। लेकिन मेरा विश्वास करो - संकलन के लिए पर्याप्त सीखने के लिए छोटे समय का निवेश

_variables.scss लगभग तुरंत भुगतान किया जाएगा।

ZURB फाउंडेशन का उपयोग करने से पहले

ज़ुरब फाउंडेशन सबसे उत्कृष्ट है, लेकिन यह एकमात्र फ्रंट-एंड फ्रेमवर्क नहीं है जिसे ड्रूपल के साथ एकीकृत किया गया है। आप बूटस्ट्रैप पर विचार करना चाहेंगे, एक समान रूपरेखा जिसमें ड्रूपल थीम भी है। अभी के लिए, मैं खुद ZURB फाउंडेशन का उपयोग कर रहा हूं, लेकिन ऐसा इसलिए है क्योंकि मेरे शोध से संकेत मिलता है कि बूटस्ट्रैप से अनुकूलित करना आसान था।

इसके अलावा, जॉयराइड घटक बहुत प्यारा है।

और क्या आप ज़ुरब फाउंडेशन, बूटस्ट्रैप या कुछ अन्य ढांचे का उपयोग करते हैं, तो ड्रूपल के साथ ढांचे का उपयोग करने पर इन युक्तियों को सुनिश्चित करना सुनिश्चित करें।