फाउंडेशन 5 [ए गाइड] के साथ वेबसाइट सुपरफास्ट बनाएँ
फ्रंटएंड फ्रेमवर्क का उपयोग करने से आपके वेब डिज़ाइन वर्कफ़्लो में कई तरह से सुधार हो सकता है। यह आधुनिक डिजाइन सिद्धांतों का पालन करने में आपकी सहायता करता है जैसे कि मोबाइल-पहला दृष्टिकोण, सिमेंटिक मार्कअप और उत्तरदायी डिजाइन। आप ऐसा कर सकते हैं कई तैयार-से-उपयोग सीएसएस और जावास्क्रिप्ट तत्वों का लाभ उठाएं और काफी अपनी विकास प्रक्रिया को गति दें, दृश्य और उपयोगकर्ता अनुभव डिजाइन पर ध्यान केंद्रित करने के लिए अधिक समय मुक्त करना.
ज़र्ब फाउंडेशन 5 बाजार में सबसे शक्तिशाली फ्रंटेंड फ्रेमवर्क में से एक है। यह तार्किक रूप से निर्मित, उपयोग में आसान और पूरी तरह से मुक्त है। यह आपको एक का उपयोग करने देता है लचीला सीएसएस ग्रिड उस एक स्वच्छ, उपयोगकर्ता के अनुकूल लेआउट के निर्माण में सुविधा. फाउंडेशन फ्रेमवर्क का भी भारी परीक्षण किया जाता है, इसलिए यह क्रॉस-ब्राउज़र और क्रॉस-डिवाइस संगतता का ख्याल रखता है.
इस ट्यूटोरियल में मैं आपको दिखाऊंगा आप Zurb Foundation 5 के साथ वेबसाइट सुपरफास्ट कैसे बना सकते हैं. आप डेमो पृष्ठ पर अंतिम परिणाम पर एक नज़र डाल सकते हैं.
मैं वेबसाइट का लेआउट बनाऊंगा, सूक्ष्म डिजाइन तत्वों को जोड़ने का कार्य आपकी प्रतीक्षा कर रहा है। इस ट्यूटोरियल में हम जिस वेबसाइट को एक साथ बनाएंगे, वह आधुनिक UX डिज़ाइनर के सपने को पूरा करेगी: यह उत्तरदायी, मोबाइल-पहले, उपयोगकर्ता के अनुकूल और शब्दार्थ होगा।.
इस गाइड की लंबाई के कारण, यहां उस अनुभाग को प्राप्त करने के लिए शॉर्टकट हैं जो आप जल्दी चाहते हैं:
- फाउंडेशन 5 को डाउनलोड करना
- ग्रिड को समझना
- लार्ज-एन, मीडियम-एन और स्मॉल-एन क्लासेस का उपयोग कब करें
- टॉप मेनू बार को जोड़ना
- मुख्य भाग को आबाद करना
- लोकप्रिय पोस्ट के लिए एक पैनल जोड़ना
- लोकप्रिय पैनल में 3 और पोस्ट जोड़ना
- सीएसएस ऊपर सुंदर
- कुछ और सामग्री जोड़ना
- पेजिंग जोड़ना
- साइडबार आबाद करना
- न्यूज़लेटर फॉर्म
- फ्लेक्स वीडियो
- साइडबार मेनू
- निष्कर्ष
1. फाउंडेशन 5 डाउनलोड करना
आप फाउंडेशन 5 को 4 अलग-अलग रूपों में डाउनलोड कर सकते हैं:
- पूरा कोड
- केवल आवश्यक कोड के साथ एक हल्का संस्करण
- एक कस्टम संस्करण जहाँ आप अनुकूलित कर सकते हैं कि आपको क्या चाहिए और क्या नहीं
- यदि आप SCSS में अपने चर और मिश्रण को सेट करना चाहते हैं तो एक सैस संस्करण.
इस ट्यूटोरियल में मैं वैनिला सीएसएस के साथ पूरा कोड चुनूंगा, लेकिन यदि आप अपनी साइट को स्ट्रीमलाइन करना चाहते हैं तो केवल कोई अन्य संस्करण चुन सकते हैं और केवल उसी चीज का उपयोग कर सकते हैं जिसकी आपको वास्तव में आवश्यकता है.
आपके द्वारा ज़िप फ़ाइल को डाउनलोड करने और अनपैक करने के बाद, अपने ब्राउज़र में index.html फ़ाइल खोलें और आपको कुछ इस तरह दिखाई देगा:
हां, देवताओं ने इंडेक्स फाइल में आसान लिंक शामिल किए। आप इसे इस तरह छोड़ सकते हैं और अपने प्रोटोटाइप के लिए एक नई फ़ाइल बना सकते हैं, जिसका नाम home.html या कुछ इसी तरह है, लेकिन आपको इसे तब तक रखने की आवश्यकता नहीं है जब आप आसानी से फाउंडेशन डॉक्यूमेंटेशन तक पहुँच सकते हैं।.
अपने पसंदीदा कोड संपादक में index.html फ़ाइल खोलें और अंदर सब कुछ हटा दें खंड, लेकिन समापन से पहले स्टाइल नियम जो हम जोड़ते हैं app.css हमारे प्रोटोटाइप के लिए फ़ाइल ये हैं: जैसा कि फाउंडेशन 5 रिश्तेदार इकाइयों का उपयोग करता है, हमें उपयोग करने की आवश्यकता है “एम”-s या “रेम”-पिक्सल के बजाय नियमों का पालन करना। (आप सीएसएस इकाइयों के बारे में पढ़ सकते हैं: पिक्सेल बनाम ईएमएस बनाम% यहां।) मैंने यह निर्धारित करने के लिए फ़ायरफ़ॉक्स के फ़ायरबग एक्सटेंशन का उपयोग किया, जहां मुझे फाउंडेशन 5 के सीएसएस नियमों को ओवरराइड करना है, आप चाहें तो किसी अन्य वेब डेवलपमेंट ब्राउज़र एक्सटेंशन का उपयोग कर सकते हैं।. यहाँ इस छोटे सीएसएस स्निपेट में हमें केवल पिछले नियम (.row.popular-main) में केवल एक बार फाउंडेशन के डिफ़ॉल्ट सीएसएस को ओवरराइड करना था। यहाँ डेमो साइट अब कैसी दिखती है: पहले के नियमों का उपयोग करते हुए हम पृष्ठ के मुख्य भाग में कुछ और सामग्री जोड़ेंगे। अब हम जो सामग्री जोड़ेंगे वह होगी नवीनतम पोस्ट छोटे थंबनेल के साथ. फाउंडेशन 5 वास्तव में पूर्व-तैयार थंबनेल शैलियों को शांत करता है जिसे हम इस चरण में उपयोग करेंगे। फाउंडेशन थंबनेल एक का उपयोग करें पूर्व-निर्मित सीएसएस वर्ग कहा जाता है “वें” हमें उन छवियों को जोड़ना होगा जिन्हें हम उस तरह से थंबनेल के रूप में प्रदर्शित करना चाहते हैं जैसे आप इसे नीचे दिए गए कोड स्निपेट में देख सकते हैं. प्रत्येक नवीनतम पोस्ट के लिए हम अपने साथ लोकप्रिय पैनल के नीचे एक नई पंक्ति जोड़ते हैं कस्टम सीएसएस वर्ग कहा जाता है “नवीनतम लेख”. टैबलेट और डेस्कटॉप आकार पर हम बाईं ओर फाउंडेशन के थंबनेल वर्ग और शीर्षक और दाईं ओर एक संक्षिप्त विवरण का उपयोग करके एक छोटा थंबनेल दिखाएंगे। मोबाइल पर, शीर्षक और विवरण थंबनेल के नीचे जाएगा. अब मैंने इस्तेमाल किया “मध्यम -3 कॉलम” तथा “मध्यम -9 कॉलम” कक्षाएं उन्हें 1: 3 में स्क्रीन को विभाजित करने के लिए बनाती हैं, छवि के लिए 25% और मध्यम आकार से पाठ के लिए 75%. पॉपुलर पैनल के नीचे तीन बार (तीन नवीनतम पोस्ट के लिए) निम्न कोड स्निपेट डालें। यहां मैं सिर्फ एक नवीनतम पोस्ट पंक्ति का कोड शामिल करता हूं, क्योंकि उनमें से सभी एक ही HTML मार्कअप का उपयोग करते हैं, केवल सामग्री भिन्न होती है. नवीनतम पोस्ट की सामग्री ... हमारी कस्टम CSS फ़ाइल 4.3 चरण में बनाई गई है, app.css डेमो के लुक को बनाए रखने के लिए कुछ नए स्टाइल रूल्स भी मिलते हैं. ध्यान दें: यदि आप अपने स्वयं के कस्टम सीएसएस को फाउन्डेशन में जोड़ना चाहते हैं, तो वेब डे टूल के साथ जांचना न भूलें, जहां आपको डिफ़ॉल्ट नियमों को ओवरराइड करना होगा. नीचे सीएसएस स्निपेट में हमें उन्हें पहले नियम (.row .latest-post) में ओवरराइड करने की आवश्यकता है। दूसरे नियम में केवल अपने स्वयं के कस्टम चयनकर्ता (.latest-post h4) का उपयोग करना पर्याप्त है. हमारा प्रोटोटाइप अब इस तरह दिखता है: इस चरण में हम नवीनतम पोस्ट के नीचे एक शांत पृष्ठ पर जोड़ देंगे। फाउंडेशन 5 हमें अपने सुविधाजनक, रेडी-टू-यूज़ पेजिंग क्लासेस द्वारा मदद करता है। हम इस चरण में उसी कोड का उपयोग करते हैं जिसे आप खोज सकते हैं “उन्नत” पेजेशन डॉक्स के अंदर का सेक्शन. यहां नए जोड़े गए पेजेशन सेक्शन के साथ नवीनतम पोस्ट हैं: अब जब हम अपनी डेमो साइट की मुख्य सामग्री के साथ तैयार हैं, तो सही साइडबार को आबाद करने का समय है। सही साइडबार मोबाइल और टैबलेट के आकारों पर मुख्य सामग्री के नीचे खिसक जाएगा. आपको इस अनुभाग में सभी कोड स्निपेट सम्मिलित करने होंगे बाएं साइडबार में न्यूज़लेटर साइन अप फॉर्म (1), एक नवीनतम वीडियो (2) और एक अकॉर्डियन-शैली साइडबार मेनू होगा। “हमारी रसोई की किताब” (3). इस चरण के अंत में हम अपने डेमो के साथ तैयार होंगे जो इस तरह दिखाई देगा: नींव 5 में एक फार्म बनाने के लिए, आपको कुछ और करने की ज़रूरत नहीं है, बस ग्रिड को अंदर रखें HTML टैग. यदि आप नीचे दिए गए कोड स्निपेट पर एक नज़र डालते हैं, तो आप देखेंगे कि हमने एक पंक्ति में फॉर्म रखा है जिसमें हम सभी 3 ग्रिडों के लिए अलग-अलग CSS चयनकर्ताओं को सेट करते हैं: “छोटे-12”, “मध्यम 9”, तथा “बड़े-12”. हमने इस समाधान को चुना क्योंकि 100% चौड़ा न्यूज़लैटर फॉर्म मोबाइल आकार में अच्छा लगता है, लेकिन यह वास्तव में टैबलेट के आकार पर अजीब है क्योंकि यह बन जाता है बहुत विस्तृत। सौभाग्य से फाउंडेशन 5 हमें उपयोग करने देता है “अपूर्ण पंक्तियाँ”: हमें बस जोड़ना है “समाप्त” अपूर्ण कॉलम की CSS वर्ग परिभाषा के लिए वर्ग. तो यह यहाँ क्या होने जा रहा है: मोबाइल आकार पर साइडबार मुख्य सामग्री के नीचे एक न्यूज़लेटर साइन अप फॉर्म के साथ प्रदर्शित होगा जो पूरी स्क्रीन को कवर करता है. मध्यम आकार पर साइडबार मुख्य सामग्री के नीचे रहेगा, लेकिन न्यूज़लेटर फॉर्म सिर्फ 75% स्क्रीन को कवर करेगा, और शेष 25% खाली रहेगा. डेस्कटॉप आकार पर साइडबार मुख्य सामग्री के ठीक बगल में होगा, और न्यूज़लैटर फॉर्म साइडबार की पूरी चौड़ाई को फिर से कवर करेगा. अपूर्ण पंक्तियों के बारे में अधिक पढ़ने के लिए ग्रिड डॉक्स देखें. अब अंदर एक नजर डालते हैं हेडर मार्जिन-बॉटम: 2em; । पॉपुलर-अतिरिक्त h4 फ़ॉन्ट-आकार: 1.125em; मार्जिन-टॉप: 0.4em; .row .row.popular-main मार्जिन-बॉटम: 1.5em;
4.4 कुछ और सामग्री जोड़ना
नवीनतम पोस्ट का शीर्षक
.row .row.latest-post मार्जिन-बॉटम: 1.5em; .Latest-post h4 मार्जिन-टॉप: 0; फ़ॉन्ट-आकार: 1.125em;
४.५ पेजिंग जोड़ना
5. साइडबार को आबाद करना
5.1 न्यूज़लैटर फॉर्म
हमारे न्यूज़लेटर के लिए साइनअप करें
फाउंडेशन फॉर्म में कई अन्य लेआउट विकल्प जैसे कि प्रीफिक्स लेबल, प्रीफ़िक्स रेडियस लेबल, पोस्टफ़िक्स बटन और पोस्टफ़िक्स लेबल होते हैं। हमने यहां पोस्टफिक्स बटन विकल्प को चुना क्योंकि यह अधिक उपयोगकर्ता के अनुकूल है: उपयोगकर्ता इस पर क्लिक कर सकते हैं और एक ही बार में फॉर्म भेज सकते हैं.
प्रपत्र के अंदर हम एक नई नेस्टेड पंक्ति जोड़ेंगे जो स्क्रीन को 2: 1 में विभाजित करती है। टेक्स्ट इनपुट में 8 कॉलम मिलेंगे और पोस्टफ़िक्स बटन मिलेगा 4. जैसा कि हम चाहते हैं कि यह लेआउट मोबाइल स्क्रीन पर भी हो, हम सेट करेंगे “छोटे -8 कॉलम” तथा “छोटे -4 कॉलम” यहाँ CSS-selectors, Small Grid सबसे छोटा आकार है जहाँ हम इस मार्कअप को लागू करना चाहते हैं.
आप ऊपर दिए गए HTML कोड में एक और नई चीज देख सकते हैं “पंक्ति ढहना” कक्षा। यह फाउंडेशन 5 की निर्मित शैली है। डिफ़ॉल्ट रूप से दो आसन्न स्तंभों के बीच एक नाली है, लेकिन अगर हम जोड़ते हैं “गिरावट” हमारी पंक्ति के लिए, नाली गायब हो जाएगी. हम ऐसा इसलिए करते हैं क्योंकि हम चाहते हैं कि बटन टेक्स्ट इनपुट के ठीक बगल में हो और उनके बीच कोई जगह न हो.
अब इस कोड को स्निपेट में डालने का समय आ गया है
5.2 फ्लेक्स वीडियो
न्यूज़लैटर सेक्शन के नीचे हम अपने साइडबार में एक डेली वीडियो रेसिपी जोड़ेंगे। फाउंडेशन 5 हमारी मदद करता है एम्बेडेड वीडियो को उत्तरदायी बनाएं और उन्हें स्वचालित रूप से स्केल करने के लिए मजबूर करें इसकी फ्लेक्स वीडियो सुविधा के साथ.
फ्लेक्स वीडियो बिल्ट-इन का उपयोग करते हैं “फ्लेक्स-वीडियो” सीएसएस वर्ग। हम डेली वीडियो रेसिपी साइडबार सेक्शन के लिए एक नई पंक्ति बनाते हैं और इसमें एक विस्तृत कॉलम को नए के साथ रखते हैं “छोटे -12 मध्यम-९ बड़े -१२ स्तंभ समाप्त होते हैं” उसी कारण से सीएसएस चयनकर्ताओं ने पिछले चरण में मध्यम ग्रिड में एक अपूर्ण पंक्ति का उपयोग किया.
यहां वह कोड है जिसे आपको न्यूज़लैटर सेक्शन के नीचे पेस्ट करना है। आप Youtube, Vimeo आदि से किसी भी वीडियो का उपयोग कर सकते हैं.
डेली वीडियो रेसिपी
5.3 साइडबार मेनू
साइडबार मेनू के लिए हम फाउंडेशन के अकॉर्डियन फ़ीचर का उपयोग करेंगे। Accordions वेब तत्व हैं जो सामग्री को तार्किक वर्गों में विस्तारित और संक्षिप्त करते हैं.
हमारे डेमो साइट पर ये तार्किक खंड 3 अलग-अलग खाद्य समूह (मुख्य व्यंजन, साइड डिश, डेसर्ट) हैं, और प्रत्येक समूह में अधिक छोटे समूह हैं जैसे कि “मुर्गी पालन”, “सुअर का मांस”, “गाय का मांस”, “शाकाहारी”.
हम पूरे साइडबार अकॉर्डियन को पहले वाले 5.1 और 5.2 स्टेप्स में एक ही लॉजिक वाले एक चौड़े कॉलम में रखते हैं। हम इसके अंदर एक उचित सूची के रूप में इस तरह के रूप में उपयुक्त सीएसएस वर्गों के साथ एक अनियंत्रित सूची के रूप में समझौते डाल दिया “अकॉर्डियन” तथा “अकॉर्डियन-नेविगेशन”.
जैसा कि Foundation Accordions JavaScript के साथ काम करता है, यदि आप चाहें तो आप अपने व्यवहार को पूर्व-निर्मित जावास्क्रिप्ट चर की मदद से अनुकूलित कर सकते हैं। ऐसा करने के लिए, को देखें “वैकल्पिक जावास्क्रिप्ट विन्यास” अकॉर्डियन डॉक्स में अनुभाग। निम्न कोड स्निपेट index.html फ़ाइल के अंदर फ्लेक्स वीडियो अनुभाग के नीचे आता है.
निष्कर्ष
अब जब हम अपनी डेमो साइट के साथ तैयार हैं, तो आइए देखें कि आप फाउंडेशन 5 के साथ और क्या पूरा कर सकते हैं। इस डेमो में हमने जिन तत्वों का इस्तेमाल किया है, वे फाउंडेशन फ्रेमवर्क की सुविधाओं का एक छोटा सा सेट हैं। कई अन्य चीजें हैं जो आप अपने डिजाइन में उपयोग कर सकते हैं, जैसे कि अनुकूलन चिह्न बार्स, ब्रेडक्रंब, लाइटबॉक्स, रेंज स्लाइडर, फॉर्म सत्यापन, और कई अन्य। डॉक्स बहुत अच्छी तरह से लिखे गए हैं और वे कई कोड उदाहरणों के साथ डेवलपर्स की मदद करते हैं.
यदि आप Sass से परिचित हैं तो आपके पास और भी विकल्प हैं क्योंकि डॉक्स में प्रत्येक अनुभाग बताता है कि आप अपने स्वयं के मिश्रण कैसे बना सकते हैं, और कौन-से Sass-variables का उपयोग करके आप अपनी साइट को कस्टमाइज़ कर सकते हैं। इससे पहले कि आप अपना वेबपेज डिजाइन करना शुरू करें, यह सुनिश्चित करने के लिए फाउंडेशन फ्रेमवर्क की अनुकूलता की जांच करना न भूलें कि यह उन सभी ब्राउज़रों पर काम करता है, जिनकी आपको जरूरत है।.
- डेमो देखें
- स्रोत डाउनलोड करें
