फ्लेक्सबॉक्स आणि ग्रिडसाठी डिझाइनरचे मार्गदर्शक

या रूपांतरित लेआउट साधनांविषयी डिझाइनर्सना काय माहित असणे आवश्यक आहे.

सीएसएस १ 1996 1996 in मध्ये अस्तित्वात आल्यापासून बर्‍याच अंतरावर आला आहे, परंतु लेआउटसाठी आपल्याकडे उपलब्ध असलेली साधने जास्त बदलली नाहीत. टेबल लेआउट आश्चर्यकारकपणे खूप कठोर होते, फ्लोट-आधारित लेआउट मुळात एक खाच होते, स्थिती-आधारित लेआउट्स अनुकूल करण्यायोग्य नसतात आणि कार्यक्षम मार्गाने कोणतीही मोठी जटिलता हाताळू शकत नव्हती. मला चुकीचे देऊ नका - या पद्धती आम्हाला खरोखर खूप दूर मिळाल्या आहेत, परंतु त्या जटिल लेआउट उद्देशाने नाहीत.

लेआउटसाठी या जुन्या पद्धतींचे अल्प-आशय उत्तरदायी वेब डिझाइनसह अधिक स्पष्ट झाले आहेत, ज्यामध्ये वेबची तरलता ग्रहण करणे मूलभूत आहे.

फ्लेक्सबॉक्स आणि ग्रिडसह, आमच्याकडे शेवटी अशी साधने आहेत जी लेआउटसाठी विशेषतः हेतूने बनविली गेली आहेत जी मागील कार्यपद्धती पद्धतींसह अधिक कार्यक्षम आणि हॅक्स रिकाम्या आहेत. जुन्या समस्यांकरिता ते नवीन शक्यतांना अनलॉक करतात, यापूर्वी अशक्य नसलेल्या गोष्टी सक्षम करतात आणि आम्हाला प्रतिक्रियाशील वेब डिझाइनद्वारे वास्तविक समस्या सोडवतात.

फ्लेक्सबॉक्स

फ्लेक्सबॉक्स, उर्फ ​​सीएसएस लवचिक बॉक्स, ही एक नवीन लेआउट पद्धत आहे जी आम्हाला संरेखन नियंत्रण देते जी अन्य कोणतीही सीएसएस पद्धत तयार करू शकत नाही. हे ‘मायक्रो लेआउट’ वर उत्कृष्ट कार्य करतेः कंटेनरमधील वस्तूंमध्ये संरेखित करणे, ऑर्डर करणे आणि वितरण करण्याची क्षमता किंवा उपलब्ध जागेत सर्वोत्कृष्टतेसाठी एखाद्या घटकाची रुंदी किंवा उंची बदलण्याची क्षमता.

सुधारित रॅपिंग

उत्तरदायी वेब डिझाईनमध्ये, व्ह्यूपोर्ट रूंदी आकार बदलू लागल्यास उपलब्ध रूंदी बदलते. हे अनावश्यक सामग्री लपेटण्यास कारणीभूत ठरू शकते, विशेषत: जेव्हा सामग्री डिझाइन करण्यापेक्षा लांब असते किंवा सामग्रीचा कंटेनर खूप अरुंद असतो. आम्ही सर्व कदाचित यापूर्वी पाहिले आहे: डिझाइन 'आदर्श' सामग्रीच्या लांबीचे खाते आहे, परंतु त्याची अंमलबजावणी होतेच आणि वास्तविक सामग्री जोडताच, सामग्री पुढील ओळीवर लपेटली जाते कारण तेथे पुरेशी जागा नव्हती किंवा तोडण्यात येत नव्हती. कंटेनर दोघेही आदर्श नाहीत आणि त्यामुळे लेआउट खंडित होऊ शकतात.

लांबीमध्ये भिन्न असू शकणार्‍या सामग्रीसाठी उपलब्ध जागा नेहमीच पुरेशी असेल याची खात्री नसल्याने समस्या निश्चित होत नाही. पारंपारिकरित्या, सामग्री लपेटण्यासह अडचणी कमी करण्यासाठी विशिष्ट ब्रेकपॉईंट्स वर लेआउट समायोजित करण्यासाठी आम्ही सीएसएस मीडिया क्वेरी वापरल्या आहेत. परंतु मीडिया क्वेरी स्वतः सामग्रीची लांबी विचारात घेत नाहीत - ते सुस्पष्ट रुंदी किंवा उंचीला प्रतिसाद देतात. हे बर्‍याचदा स्पष्ट ब्रेकपॉइंट्सवर सामग्रीच्या विशिष्ट तुकड्यावर नियंत्रण ठेवण्यासाठी जास्त प्रमाणात मीडिया क्वेरी घेते.

फ्लेक्सबॉक्ससह सुधारित रॅपिंगचे उदाहरण

उपलब्ध जागेचा फायदा घेण्यास सक्षम करून आणि नसते तेव्हा सामग्री लपेटणे फ्लेक्सबॉक्स ही समस्या सोडवते. हे स्वयं-समायोजित वर्तन केवळ सोयीचे नाही, तर देखभाल सुधारते कारण स्टाईलिंग व्यक्तिचलितपणे समायोजित करण्यासाठी आम्हाला ब्रेकपॉईंटवर अवलंबून राहण्याची गरज नाही. वरील उदाहरण हे वर्तन दर्शविते: पुरेशी जागा उपलब्ध असल्यास शीर्षकाशेजारील स्थान लेबल प्रदर्शित करा आणि पुरेशी जागा उपलब्ध नसल्यास स्थान लेबल शीर्षकाच्या डावीकडे संरेखित करा.

फ्लोटिंगसारख्या पारंपारिक पद्धतींमुळे लहान व्ह्यूपोर्टवर स्थान लेबल उजवीकडे संरेखित केले गेले असेल जे आदर्शपेक्षा कमी आहे. आपण एका विशिष्ट ब्रेकपॉईंटवर लेबल डावीकडे फ्लोटिंगद्वारे हे दुरुस्त करू शकता. या पध्दतीची समस्या आता आपल्या सामग्रीचे स्टाईल बदलण्यासाठी ब्रेकपॉईंटवर अवलंबून आहे, ज्याची लांबी भिन्न असू शकते.

सुधारित अंतर आणि संरेखन

जेव्हा सीएसएसमधील अंतर आणि संरेखनाचा प्रश्न येतो तेव्हा आम्हाला डीफॉल्ट वर्तन नसलेले काहीही साध्य करण्यासाठी हुशार पाहिजे. क्षुल्लक वाटणारे प्रभावदेखील सीएसएसमध्ये कठीण असू शकतात, अनुलंब संरेखन किंवा आयटममध्ये समान प्रमाणात विभाजन करणे, वर्कराउंड्स किंवा हॅक्सवर अवलंबून असणे आवश्यक आहे. काही गोष्टी साध्य करणे पूर्णपणे अशक्य आहे.

फ्लेक्सबॉक्स यास अज्ञात रूंदी किंवा उंचीच्या क्षेत्रामध्ये अज्ञात संख्येच्या आयटमच्या दरम्यान जागेचे वितरण सक्षम करून आणि एक्स किंवा वाई अक्ष वर आयटम संरेखित करून निराकरण करतो. हे स्केच किंवा इलस्ट्रेटर सारख्या डिझाइन साधनांद्वारे अंतर आणि संरेखन नियंत्रित कसे करू शकते यासारखे कार्य करते, जे आपण वेबवर अपेक्षित असलेले नियंत्रण सक्षम करते.

फ्लेक्सबॉक्ससह सुधारित जागेच्या वितरणाचे उदाहरण

या नियंत्रणाचे एक उत्कृष्ट उदाहरण वर पाहिले जाऊ शकते: नेव्हिगेशन आयटम समान रीतीने वितरीत केले जातात, अनुलंब मध्यभागी आणि प्रथम आणि शेवटची आयटम नेव्हिगेशन कंटेनरच्या काठावर फ्लश आहेत. आयटमवर इनलाइन ब्लॉक लागू करणे, किंवा टेबल लेआउटवर अवलंबून राहणे यासारख्या पारंपारिक पद्धती वापरणे अशक्य झाले असते.

स्त्रोत ऑर्डर

स्त्रोत ऑर्डर त्या क्रमास संदर्भित करते ज्यात पृष्ठांवर घटक प्रदर्शित केले जातात जेथे ते HTML मध्ये कोठे दिसतात यावर आधारित असतात. डीफॉल्टनुसार, घटक डीफॉल्टनुसार वरपासून खालपर्यंत आणि डावीकडून उजवीकडे प्रदर्शित होतील - त्यांची रुंदी त्यांच्या प्रदर्शन मालमत्तेद्वारे निश्चित केली जाईल.

आपले डिझाइन विविध व्ह्यूपोर्ट रूंदीमध्ये कसे जुळवून घेईल याचा विचार करताना दस्तऐवजाच्या नैसर्गिक स्त्रोताच्या ऑर्डरने आपले मार्गदर्शन केले पाहिजे, परंतु असे काही वेळा आहेत जेव्हा आयटमची पुनर्रचना करण्यासाठी त्या सुधारित करणे उपयुक्त ठरेल. फ्लेक्सबॉक्सच्या अगोदर हे करण्याचा एकमेव मार्ग म्हणजे घटक लपविणे आणि दुसरे दर्शविणे, परिणामी डुप्लिकेट एचटीएमएल, किंवा परिपूर्ण स्थितीवर अवलंबून असणे जे सामग्री आकारात बदलू शकते तेव्हा नेहमी कार्य करत नाही. फ्लेक्सबॉक्ससह आपण अंतर्निहित HTML रचना सुधारित न करता फ्लेक्स आयटमची क्रमवारी सुधारित करू शकता.

फ्लेक्सबॉक्ससह आयटम ऑर्डर करण्याचे उदाहरण

वरील उदाहरणे फ्लेक्सबॉक्समध्ये ऑर्डर करण्याचे प्रात्यक्षिक: आम्ही फूटरच्या डाव्या बाजूला लोगो दर्शवितो, जो शीर्षलेखानुसार सुसंगत असतो. छोट्या व्ह्यूपोर्टवर आम्ही लोगोच्या आधी ती ठिकाणे प्रदर्शित करतो. या पुनर्क्रमणामुळे अर्थ प्राप्त होतो कारण या संदर्भात स्थाने अधिक महत्त्वपूर्ण आहेत.

ग्रिड लेआउट

सीएसएस ग्रीड लेआउट ही विशेषत: वेबसाठी तयार केलेली एक द्विमितीय लेआउट सिस्टम आहे. हे आपल्याला पृष्ठांना अशा प्रदेशांमध्ये विभागण्याची क्षमता देते जे प्रत्येक आकार, स्थिती आणि थरांच्या बाबतीत परिभाषित केले जाऊ शकते, परिणामी आश्चर्यकारकपणे शक्तिशाली मूळ फ्रेमवर्क बनते.

हेतूसाठी फिट

सीएसएसमध्ये उद्देश लेआउट टूलसाठी कधीच खरा तंदुरुस्त नसतो, म्हणून आम्ही आमच्या कामावर ग्रीड कसे लावू शकतो याबद्दल आम्हाला कल्पक शोधावे लागले. ही गरज पूर्ण करण्यासाठी ग्रीड फ्रेमवर्क तयार झाले आहेत, परंतु त्यांच्या स्वतःच्या समस्या ओळखल्याशिवाय नाही. बर्‍याच लोकप्रिय ग्रिड फ्रेमवर्कला मार्कअपमध्ये लेआउट व्याख्या आवश्यक असते, ज्यामुळे कोड ब्लोट, मेंटेनेबिलिटीचे प्रश्न उद्भवू शकतात आणि दस्तऐवजाची रचना आणि सादरीकरण वेगळे केले जाऊ शकते.

ग्रिडसह, आम्हाला यापुढे ग्रीड फ्रेमवर्कची आवश्यकता नाही - ही सीएसएस मध्ये भाजलेली एक मूळ फ्रेमवर्क आहे. हे आम्हाला वेबवरील डीफॉल्ट फ्लडुइटीटी ग्रहण करताना अंतर्ज्ञानाने सीएसएस मधील लेआउट परिभाषित करण्यास अनुमती देते. या नवीन लेआउट साधनाची क्षमता अंतहीन आहे आणि हे आम्हाला जावास्क्रिप्टच्या आगमन होण्यापूर्वीच शक्य असलेल्या लेआउट्स पूर्ण करण्यास सक्षम करते.

ग्रिड लेआउटचे उदाहरण

नेक्स्ट-जनरेशन वेब लेआउट

जेव्हा लेआउटचा प्रश्न येतो तेव्हा आम्ही बर्‍याच दिवसांपासून कुंपणामध्ये अडकलो आहोत. सीएसएसमध्ये स्थापित नमुने आणि मागील लेआउट साधनांच्या मर्यादांमुळे आम्हाला भूतकाळात लेआउट एकरूपतेचा मार्ग खाली आणले. आपल्याला ते शोधण्यासाठी आपल्याला वेबवर जास्त दूर जाण्याची आवश्यकता नाही: हेडर, मुख्य सामग्री, साइडबार, तळटीप.

प्रतिसादशील वेब डिझाइनच्या आगमनाने पृष्ठ लेआउटसाठी काही नवीन कल्पना सुरू केल्या आहेत आणि त्यासह काही चांगले नमुने येऊ लागले आहेत: साइडबार खोदून घ्या, रचना सुलभ करा आणि सामग्रीवर लक्ष द्या. परंतु आम्ही हेही पाहत आहोत की नमुने इतके सर्वव्यापी झाले आहेत की ““ सर्व वेबसाइट सारख्या दिसतात ”अशी उद्गार आम्ही ऐकत आहोत.

ग्रिड लेआउट आमच्यामध्ये असलेल्या लेआउट रूटमधून बाहेर पडण्यास आणि पुढच्या पिढीचे लेआउट तयार करण्यासाठी आम्हाला आवश्यक असलेली साधने आम्हाला देण्यास सक्षम करेल. आम्ही शेवटी सामग्री तयार करू शकत नाही त्याऐवजी सामान्य डिझाइन नमुन्यांची सक्ती करण्याऐवजी ती तयार करू शकतो जी प्रत्येक इतर प्रतिसादी वेबसाइटवर आढळू शकते.

सावधगिरीचा शब्द

हे लक्षात घेणे महत्वाचे आहे की सर्व ब्राउझर फ्लेक्सबॉक्स आणि ग्रिड वैशिष्ट्यांचे समर्थन करत नाहीत. प्रत्येक प्रोजेक्टसाठी आमचा प्रेक्षक कोण आहे हे आम्ही लक्षात घेतले पाहिजे आणि असहाय्य ब्राउझरसाठी योग्य फॉलबॅक प्रदान करताना बहुतेक वापरकर्त्यांना या अधिक प्रगत वैशिष्ट्यांचा फायदा होईल की नाही हे आपण निश्चित केले पाहिजे. लेगसी ब्राउझरमधील वापरकर्त्यांना आपल्या यूआयची सरलीकृत आवृत्ती प्रदान करणे आणि नवीन ब्राउझरमधील वापरकर्त्यांसाठी वर्धित करणे हे पूर्णपणे योग्य आहे.

अजून काही आहे. अजून बरेच काही.

आम्ही फक्त फ्लेक्सबॉक्स आणि ग्रीड काय करू शकतो याची पृष्ठभाग स्क्रॅच केली आहे. सुदैवाने, बरीच छान कागदपत्रे उपलब्ध आहेत जी या नवीन लेआउट साधनांच्या क्षमतेवर स्पर्श करतात. माझे काही आवडी येथे आहेतः

फ्लेक्सबॉक्स

ग्रिड

सीएसएस मधील लेआउटचा प्रश्न येतो तेव्हा प्रत्येकजण जो वेबसाठी तयार करत आहे त्याला विविध मर्यादांची वेदनादायक जाणीव आहे. बर्‍याच वेळा, डिझाइनमध्ये तडजोड करणे आवश्यक असते जेणेकरून ते विकासाच्या अपेक्षेनुसार कार्य करेल किंवा वाईट, आम्हाला आवश्यक वर्तन अंमलात आणण्यासाठी जावास्क्रिप्टवर अवलंबून असेल.

फ्लेक्सबॉक्स आणि ग्रीड लेआउटचे आगमन वेबवरील लेआउटच्या नवीन युगाचे संकेत देते. भूतकाळाच्या सवयी, उणीवा आणि हॅक्स यांच्या मर्यादीत राहू नये म्हणून मांडणीची गरज असताना आपण नवीन मानसिकता स्वीकारली पाहिजे. चला ही नवीन साधने आलिंगन द्या आणि वेबवरील लेआउटद्वारे जे शक्य आहे त्याच्या आमच्या शोधाचे नूतनीकरण करूया.