ड्रुपलका लागि ZURB फाउन्डेशन थीम प्रयोग गर्दै

एक ड्रपल थीम मा ZURB फाउंडेशन फ्रेमवर्क को पावर प्राप्त गर्नुहोस

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

ZURB फाउंडेशन के ढाँचा के हो?

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

तपाईंले यी विशेष सुविधाहरूको विशेष CSS कक्षाहरू थप्दा प्रयोग गर्नुहुन्छ। उदाहरण को रुपमा:

यहाँ एउटा बटन हो।

र यहाँ एउटा सानो बटन हो।

ZURB फाउंडेस ढाँचा डपअप बाट पुरा तरिकाले अलग छ। मानिसहरूले यसलाई WordPress, Joomla, र यहाँ स्थिर HTML साइटहरूमा प्रयोग गर्दछ।

ZURB फाउंडेशन ड्रपल विषयवस्तु के हो?

ड्रपल ZURB फाउन्डेस विषयवस्तुले तपाईंलाई यो विषयवस्तुलाई डाउनलोड र सक्षम गरेर यो सबै ZURBish पावरलाई हटाउन अनुमति दिन्छ (र कागजातहरू पढेर र केहि थप कदमहरू, निश्चित रूपमा)।

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

साथै, तपाईले यो विषयवस्तु तपाइँको आफ्नै अनुकूलन विषयवस्तुको आधार आधारको रूपमा प्रयोग गर्न चाहानुहुन्छ। अनुकूलन भनेको ZURB फाउंडेशन साँच्चै चमक हुन्छ।

ड्यूपल मा ZURB फाउंडेशन को उपयोग गर्न को लागि यो थीम को आवश्यकता छ?

तपाईंलाई ZURB फाउंडेशन ढाँचा प्रयोग गर्न यो विषयवस्तु आवश्यक छैन। यसको सरल मा, यस थिमले केवल ZURB फाउंडेशन CSS र जाभास्क्रिप्टलाई तपाईंको साइटमा थप्छ, र तपाइँ त्यस मैन्युअल रूपले गर्न सक्नुहुनेछ।

तर यो विषयवस्तुले सजिलो बनाउँछ, र यसले ड्रपलसँग केहि थप एकीकरण पनि समावेश गर्दछ।

साथै, तपाईं थप एकीकरणको लागि सानो अतिरिक्त मोड्युलहरू थप्न सक्नुहुन्छ। उदाहरणका लागि, ZURB ओभरब्य मोड्युलले तपाईंलाई छवि फिल्डको साथ एक कक्षा स्लाइड सिर्जना गर्न दिन्छ। ZURB क्लियरिंग मोड्युलले तपाईंलाई मीडिया छविहरूसँग उत्तरदायी लाइटबक्सहरू सिर्जना गर्न दिन्छ।

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

प्रयोग गर्न ZURB फाउन्डेशन को कुन संस्करण छान्नुहोस्

तपाईंले ZURB फाउंडेशन विषयवस्तु डाउनलोड गर्नुभन्दा अघि, कुन कुन संस्करण प्रयोग गर्नुपर्दछ भनेर जाँच गर्नुहोस्। ZURB फाउंडेशन ढाँचाको विभिन्न प्रमुख संस्करणहरू छन्, र विषयवस्तुको मुख्य संस्करण नम्बर ढाँचामा यसले काम गर्दछ। यसैले फाउन्डेशन 3 , 7.x- 4 .x संस्करणहरू संग विषयवस्तु कामको 7.x- 3 .x संस्करणहरू फाउन्डेशन 4 , र 7। 7- 5 .x संस्करणहरू फाउण्डेशन 5 सँग काम गर्छन्।

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

साथै ध्यान दिनुहोस् कि फाउन्डेशन 5 सँग अतिरिक्त आवश्यकताहरू छन्, विशेष गरी jQuery 1.10। फाउन्डेशन 4 मात्र jQuery 1.7+ आवश्यक छ।

तपाईं अनलाइन अनलाइन कागजात पढ्दा क्यान्सरको कुन संस्करण प्रयोग गरिरहनु भएको हो। यदि तपाईं ढाँचाको भर्खरको संस्करण प्रयोग गरिरहनुभएको छैन भने यो विशेष गरी सत्य हो। भन्नुहोस्, फाउन्डेशन 5 लाई भन्नुहोस्, यो कागजात पढ्नको लागी पर्ची गर्न सजिलो छ, त्यसपछि नयाँ फाउन्डेसनले तपाईंको फाउण्डेसन 4 साइटमा काम गर्दैन जब निराश हुन्छ।

उदाहरणका लागि, फाउन्डेशन 5 ले मध्यम आकारका पर्दाहरूको लागि माध्यमिक कक्षाहरूको सम्पूर्ण सेट समावेश गर्दछ। फाउन्डेशन 4 मा, यी रहस्यमयी रूपमा असफल हुनेछ जबसम्म तपाईं थप कदमहरू लिनुहुन्न।

प्रयोग गर्नुहोस् SASS, कम्पास, र # 34; _ भिवार्ड्स .सीएसएस & # 34 ;!

यदि तपाईं यो विषयवस्तुको लागि CSS को tweak जाँदै हुनुहुन्छ भने, सुनिश्चित गर्नुहोस् कि तपाईं:

  • तपाईंको आफ्नै अनुकूल सबमेन्टको लागि ZURB फाउन्डेसन विषयवस्तु आधार विषयको रूपमा प्रयोग गर्नुहोस्
  • विषय द्वारा उपलब्ध ड्रश आदेश प्रयोग गरी यो सबमेन्ट उत्पन्न गर्नुहोस्। यो जस्तै: ड्रश fst your_theme_name
  • आराम देखि उत्कृष्ट _variables.scss फाईल को उपयोग गर्नुहोस

_variables.scss फाइल स्वचालित रूपमा ड्रश fst द्वारा बनाईएको छ। यो एकल फाइलले तपाईंको विषयवस्तु CSS मा tweak गर्न चाहानु भएको लगभग केहि पनि चर समावेश गर्दछ। याे अास्चर्यजनक छ! सबै एकै ठाउँमा, तपाइँ सबै भन्दा पूर्वनिर्धारित फन्टबाट स्क्रिन चौडाईमा ब्रेडक्रम्बमा सीमामा सेट गर्न सक्नुहुनेछ।

निस्सन्देह, तपाई सँधै अतिरिक्त फाईलहरू सेट गर्न सक्नुहुनेछ। तर _variables.scss सुरू गर्न एक शानदार स्थान हो।

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

यदि तपाई साँच्चिकै, वास्तवमा SASS सँग परेशान गर्न चाहनुहुन्न, तपाई सामान्य रूपमा CSS फाईलहरू लेख्न सक्नुहुन्छ र उनीहरूको विषयवस्तुको .info फाइलमा सूचीबद्ध गर्न सक्नुहुनेछ। तर मलाई भरोसा गर्नुहोस् - _variables.scss कम्पाइल गर्न पर्याप्त सिक्न सानो समय लगानी लगभग तुरुन्तै भुक्तानी गरिनेछ।

तपाईंले ZURB फाउण्डेसन प्रयोग गर्नु अघि

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

साथै, Joyride घटक धेरै मीठो छ।

र चाहे तपाईं ZURB फाउंडेशन, बूटस्ट्रैप, वा अन्य कुनै ढाँचा प्रयोग गर्नुहोला, यो ड्रिपल संग एक ढाँचा प्रयोग गरेर यी सुझावहरू प्राप्त गर्न निश्चित हुनुहोस्।