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

एक Drupal थीम में ZURB फाउंडेशन फ्रेमवर्क की शक्ति प्राप्त करें

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

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

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

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

यहां एक बटन है।

और यहां एक छोटा बटन है।

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

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

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

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

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

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

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

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

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

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

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

ZURB फाउंडेशन थीम डाउनलोड करने से पहले, जांचें कि आपको किस संस्करण का उपयोग करना चाहिए। ज़ुरब फाउंडेशन फ्रेमवर्क के विभिन्न प्रमुख संस्करण हैं, और थीम के लिए प्रमुख संस्करण संख्या उस फ्रेमवर्क से मेल खाती है जो इसके साथ काम करती है। तो, फाउंडेशन 3 के साथ थीम काम के 7.x- 3 .x संस्करण, 7.x- 4 .x संस्करण फाउंडेशन 4 के साथ काम करते हैं, और 7.x- 5 .x संस्करण फाउंडेशन 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, कम्पास, और # 34; _variables.scss & # 34 ;!

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

_variables.scss फ़ाइल स्वचालित रूप से ड्रश fst द्वारा बनाई गई है। इस एकल फ़ाइल में आपके विषय सीएसएस में लगभग किसी भी चीज के लिए चर शामिल हैं। यह आश्चर्यजनक है! सब एक ही स्थान पर, आप डिफ़ॉल्ट फ़ॉन्ट से स्क्रीन चौड़ाई तक ब्रेडक्रंब पर सीमा तक सेट कर सकते हैं।

बेशक, आप हमेशा अतिरिक्त फाइलें भी सेट कर सकते हैं। लेकिन _variables.scss शुरू करने के लिए एक शानदार जगह है।

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

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

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

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

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

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