फ्लेक्सबॉक्स के साथ रिस्पॉन्सिव वेबसाइट लेआउट बनाएं (चरण-दर-चरण गाइड)

वेबसाइट लेआउट के लिए वायरफ्रेमिंग

वायरफ्रेम आपकी वेबसाइट के सभी संगठनात्मक भागों के आरेख होते हैं। वे सुपर डिटेल्ड हो सकते हैं, लगभग डिज़ाइन की तरह, या वे बुनियादी हो सकते हैं और केवल मुख्य पहलुओं को दस्तावेज़ कर सकते हैं।

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

हम जिन खंडों का निर्माण करेंगे उनमें हेडर, हीरो, कंटेंट सेक्शन, साइडबार और फूटर शामिल हैं।

मैं अपने बुनियादी वायरफ्रेम बनाने के लिए मॉकफ्लो नामक एक ऑनलाइन टूल का उपयोग करता हूं।

मोबाइल लेआउट

आप देख सकते हैं कि सभी खंड मूल रूप से एक लंबे कॉलम में एक के ऊपर एक स्टैक होते हैं, जिसमें साइडबार भी शामिल है।

स्टैकिंग मोबाइल फोन जैसे संकीर्ण डिवाइस पर सामग्री को कुशलतापूर्वक फिट करने का सबसे बुनियादी तरीका है।

साइडबार को नियमित कंटेंट के बगल में रखने का कोई मतलब नहीं होगा, क्योंकि फोन दोनों को साइड-बाय-साइड फिट करने के लिए पर्याप्त चौड़े नहीं होते।

टैबलेट लेआउट

चौड़ाई में आगे बढ़ते हुए - यहाँ टैबलेट लेआउट है:

मुख्य अंतर यह है कि चूंकि टैबलेट फोन से काफी चौड़े होते हैं, हम अब साइडबार को मुख्य कंटेंट सेक्शन के बगल में फिट कर सकते हैं। और सभी खंड टैबलेट की पूरी चौड़ाई लेते हैं।

डेस्कटॉप लेआउट

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

अगर हम वेबसाइट कंटेंट को बड़े मॉनिटर पर फुल-विड्थ फैलाने दें, तो कंटेंट को पढ़ना और स्कैन करना मुश्किल हो जाएगा।

कल्पना करें कि आपकी आंखों को बाएं से दाएं तक पूरा ट्रैवल करना पड़े। यह बहुत अधिक काम है, और यह आपके उपयोगकर्ताओं को दूर भगा देगा।

वेबसाइट को चौड़ी स्क्रीन पर पठनीय बनाने के लिए, हमने कंटेंट को एक निश्चित चौड़ाई पर कैप किया है, और इसे केंद्रित किया है। इससे यह पढ़ना बहुत आसान और सहज हो जाता है, चाहे मॉनिटर कितना भी बड़ा हो।

बुनियादी संरचना और स्टाइल बनाना

HTML एलिमेंट्स के साथ लेआउट मैप करें

हमारे द्वारा बनाए गए वायरफ्रेम से काम करते हुए, हम वायरफ्रेम में मौजूद प्रत्येक खंड के लिए एक HTML एलिमेंट बनाएंगे।

यहाँ वह मार्कअप है जिसका उपयोग हम <body> में कर रहे हैं:

<!-- Main Content --> <main> Main <!-- Header --> <header> Header </header> <!-- Hero --> <section> Hero </section> <!-- Content --> <section> Content </section> <!-- Sidebar --> <aside> Sidebar </aside> <!-- Footer --> <footer> Footer </footer> </main>

आप देख सकते हैं कि वायरफ्रेम के प्रत्येक एलिमेंट का अब HTML में एक संगत एलिमेंट है। और मैंने सिर्फ सिंपल प्लेसहोल्डर टेक्स्ट डाला है, कोई वास्तविक कंटेंट नहीं।

बुनियादी CSS प्रॉपर्टीज जोड़ना शुरू करें

अब कुछ सुपर बेसिक CSS डालते हैं ताकि हम इस लेआउट को अच्छा दिखाना शुरू कर सकें!

main, header, section, aside, footer { margin: 0; padding: 20px; border: 1px solid #000000; color: #ffffff; } main { background: #000000; } .header { background: #03a9f4; } .hero { background: #d22b1f; } .content { background: #129a22; } .sidebar { border: 1px solid #000000; background: #673ab7; } .footer { border: 1px solid #000000; background: #616161; }

यहाँ कुछ बहुत सामान्य स्टाइल नहीं दिखाए गए हैं, जैसे box-sizing: border-box और फॉन्ट स्टाइल सेट करना। लेकिन इस लेख के उद्देश्यों के लिए, ये ही एकमात्र स्टाइल हैं जिनके बारे में आपको चिंता करने की आवश्यकता है।

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

अगर हम HTML फ़ाइल को ब्राउज़र में खोलते हैं, तो हमें यह दिखाई देगा!

आपने शायद पहले ही ध्यान दिया होगा, लेकिन वेबसाइट मोबाइल वायरफ्रेम के समान दिखती है। डिफ़ॉल्ट रूप से सब कुछ एक के ऊपर एक स्टैक होता है।

कुछ प्लेसहोल्डर कंटेंट जोड़ें

अपने HTML एलिमेंट्स बनाने के बाद, कुछ प्लेसहोल्डर कंटेंट जोड़ना भी एक अच्छा विचार है। इससे वेबसाइट वैसी दिखेगी जैसी अंत में दिखनी चाहिए।

आपको बहुत फैंसी होने की ज़रूरत नहीं है - हम बस प्रत्येक एलिमेंट में लोरम इप्सम फिलर टेक्स्ट कॉपी-पेस्ट करेंगे। उदाहरण के लिए, यहाँ हीरो एलिमेंट में क्या है:

<section class="hero"> Hero <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius. </p> </section>

मोबाइल के लिए CSS ऑप्टिमाइज़ करना

ठीक है, हम मोबाइल के लिए लेआउट बनाने में मूल रूप से हो चुके हैं!

मोबाइल पर वेबसाइट को अच्छा दिखाने के लिए एक और टिप है किनारों के चारों ओर एक समान पैडिंग जोड़ना (और यदि वांछित हो तो ऊपर और नीचे भी)।

यह उपयोगकर्ता के लिए थोड़ा सा ब्रीदिंग रूम देता है। अगर ज़ीरो पैडिंग और ज़ीरो मार्जिन होता, तो कंटेंट स्क्रीन के किनारे से सटा होता, जो तंग महसूस होता।

आप बहुत अधिक स्पेस नहीं जोड़ना चाहते, ताकि कंटेंट पठनीय रहे। इस केस में मेरे पास ग्लोबल पैडिंग 20px है, लेकिन आप 10px, 15px, या जो भी आपको सबसे अच्छा लगे, वह पैडिंग जोड़ सकते हैं।

आइए टैबलेट व्यू के लिए स्टाइल जोड़ने पर आगे बढ़ते हैं।

टैबलेट के लिए टू-कॉलम लेआउट बनाना

अगर हम टैबलेट वायरफ्रेम पर वापस जाएं, तो हम देखेंगे कि इसमें कंटेंट और साइडबार एलिमेंट्स साइड-बाय-साइड हैं। बाकी सब कुछ मोबाइल की तरह ही वर्टिकली स्टैक्ड है।

हमें कुछ स्टाइल जोड़ने होंगे ताकि कंटेंट और साइडबार दो कॉलम में फॉर्मेट हो जाएं। हम इसके लिए CSS ग्रिड के बजाय फ्लेक्सबॉक्स का उपयोग करेंगे।

सबसे पहले, हम अपने HTML को बदलेंगे और कंटेंट और साइडबार एलिमेंट्स को एक पैरेंट <div> में लपेटेंगे जिसे हम "फ्लेक्स-कंटेनर" क्लास देंगे।

<div class="flex-container"> <!-- Content --> <section class="content"> Content ... </section> <!-- Sidebar --> <aside class="sidebar"> Sidebar ... </aside> </div>

अपना CSS लिखने से पहले, हमें यह तय करना होगा कि हम टू-कॉलम लेआउट में कंटेंट और साइडबार को कैसे व्यवहार करना चाहते हैं। कुछ अलग विकल्प हैं, और फिर से "सही" उत्तर आपकी अपनी स्थिति पर निर्भर करता है।

मैं चाहता हूं कि साइडबार हमेशा 300px चौड़ा हो, और कंटेंट बाकी स्पेस ले ले।

इसे करने के लिए, हम CSS में अपने फ्लेक्सबॉक्स स्टाइल जोड़ेंगे:

@media screen and (min-width: 640px){ .flex-container { display: flex; } }

मीडिया क्वेरी का उपयोग करके, हम फ्लेक्सबॉक्स को तब चालू करेंगे जब डिवाइस की चौड़ाई 640px और उससे अधिक हो। इसका मतलब है कि फोन पर छोटी चौड़ाई पर, यह स्टैक्ड रहेगा। एक बार जब यह 640 का निशान पार कर लेता है, तो यह फ्लेक्सबॉक्स लेआउट पर स्विच हो जाएगा।

.content { flex: 1; ... } .sidebar { flex: 0 1 300px; ... }

कंटेंट और साइडबार एलिमेंट्स के लिए, हमने फ्लेक्स प्रॉपर्टी जोड़ी है।

हम चाहते हैं कि कंटेंट की चौड़ाई फ्लेक्सबॉक्स द्वारा कैलकुलेट की जाए, इसलिए हम इसे flex: 1 पर सेट करेंगे, जो flex-grow: 1, flex-shrink: 1, और flex-basis: 0% का शॉर्टहैंड है।

यह "डिफ़ॉल्ट" फ्लेक्सबॉक्स सेटिंग है - यदि आप सभी चाइल्ड एलिमेंट्स को flex: 1 पर सेट करते हैं, तो उनकी चौड़ाई जितना संभव हो उतना समान रूप से कैलकुलेट और डिस्ट्रीब्यूट की जाएगी।

साइडबार पर, इसकी चौड़ाई 300px सेट करने के लिए, हम flex: 0 1 300px का उपयोग करेंगे। CSS-Tricks के अनुसार, वह अंतिम प्रॉपर्टी, फ्लेक्स-बेसिस, "शेष स्थान वितरित होने से पहले किसी एलिमेंट के डिफ़ॉल्ट आकार को परिभाषित करती है।"

यह सुनिश्चित करेगा कि साइडबार हमेशा 300px रहे, और बाकी स्पेस कंटेंट सेक्शन को वितरित की जाएगी।

डेस्कटॉप के लिए कंटेंट चौड़ाई कैप करना

अगर हम टैबलेट और डेस्कटॉप वायरफ्रेम पर वापस देखें, तो वे काफी समान दिखते हैं। दोनों में कंटेंट साइडबार के बगल में है।

डेस्कटॉप के लिए मुख्य अंतर, जैसा कि पहले उल्लेख किया गया है, मुख्य कंटेंट के लिए मैक्स-विड्थ सेट करना है। यह सुनिश्चित करेगा कि वेबसाइट अल्ट्रावाइड मॉनिटर पर भी पठनीय रहे।

CSS में हेल्पर क्लासेस

चूंकि हमें संभवतः कई एलिमेंट्स के लिए स्टाइल के इस सेट की आवश्यकता होगी, आइए एक हेल्पर क्लास बनाएं जिसे आसानी से पुन: उपयोग किया जा सके।

हम अपनी नई क्लास और साथ में स्टाइल को अपने CSS में इस तरह जोड़ेंगे:

.wrapper { margin: auto; max-width: 75rem; }

यह एलिमेंट की मैक्स-विड्थ को 1200px (rem यूनिट में परिवर्तित) पर सेट करेगा, और 1200px से बड़ी चौड़ाई पर इसे केंद्रित भी करेगा।

HTML में हम फ्लेक्स-कंटेनर रैपर पर रैपर क्लास जोड़ेंगे, क्योंकि हम कंटेंट और साइडबार कंटेनर की चौड़ाई को सीमित करना चाहते हैं।

मार्कअप तब इस तरह दिखेगा:

<div class="flex-container wrapper"> … </div>

निष्कर्ष

तो ये रहा - हमने एक सिंपल रिस्पॉन्सिव लेआउट बना लिया है जो मोबाइल, टैबलेट और डेस्कटॉप पर अच्छा दिखता है!

अगर आप वेबसाइट को एक्शन में देखना चाहते हैं, तो आप यहाँ डेमो देख सकते हैं।

और आप इस प्रोजेक्ट के लिए सारा कोड मेरे गिटहब से यहाँ डाउनलोड कर सकते हैं।

नोट: प्रोजेक्ट गल्प और सैस का उपयोग करता है। अगर आपको गल्प इंस्टॉल करने में मदद चाहिए, तो मेरा सिंपल गल्प ट्यूटोरियल यहाँ देखें।

पढ़ने के लिए धन्यवाद! नीचे कमेंट्स में मुझे बताएं कि आप इस ट्यूटोरियल के बारे में क्या सोचते हैं 😊