सीएसएस ग्रिड और सीएसएस चर के साथ कैसे जल्दी से प्रोटोटाइप अनुप्रयोगों के लिए

सीएसएस जाल और सीएसएस चर दोनों सीमांत डेवलपर्स के लिए शक्तिशाली उपकरण हैं। पूर्व वेबसाइट लेआउट बनाने में बहुत आसान बनाता है, जबकि बाद वाले चर शैली पत्रक की पूरी शक्ति देता है।



इस लेख में मैं आपको दिखाऊंगा कि कैसे जल्दी से प्रोटोटाइप एप्लिकेशन डिज़ाइन के लिए दोनों टूल का उपयोग किया जाए।

स्किलबॉक्स अनुशंसा करता है: यूएक्स एनालिटिक्स ऑनलाइन पाठ्यक्रम
हम आपको याद दिलाते हैं: हैबर के सभी पाठकों के लिए - जब हेरा प्रचारक कोड के अनुसार किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

मेष कंटेनर को अनुकूलित करें

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

आइए हमारे आवेदन की उपस्थिति का मूल्यांकन करें - यह एक चैट है:



यदि हम क्रोम में डेवलपर टूल खोलते हैं, तो हम देख सकते हैं कि ऐसा ग्रिड क्या है। जैसा कि आप देख सकते हैं, छह कॉलम और छह पंक्तियाँ हैं।



यहाँ इस तरह के एक ग्रिड बनाने के लिए कोड है:

.app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; } 

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

लेकिन एक अलग तरीके से लाइनों के साथ। पहली पांच पंक्तियों में से प्रत्येक की ऊंचाई भी 1 fr है, लेकिन हम 1fr के बजाय अंतिम की ऊंचाई 60px तक सीमित करते हैं।

 grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; 

खैर, अब जब हमने ग्रिड को चिह्नित किया है, तो हम अगले भाग पर चलते हैं - तत्वों की नियुक्ति।

ग्रिड तत्वों का प्लेसमेंट

ग्रिड कंटेनर का प्रत्येक प्रत्यक्ष "वारिस" एक ग्रिड तत्व है। कुल में, हमारे पास चार तत्व हैं, जिनमें से प्रत्येक को एक आयत में रखा गया है, जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है।



ऊपर दिखाए गए तत्वों को ठीक से रखने के लिए, हमें ग्रिड-टेम्प्लेट-क्षेत्र की संपत्ति का उपयोग करने की आवश्यकता है।

 .app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; grid-template-areas: "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "nsssss"; } 

कोड की प्रत्येक पंक्ति तालिका की एक पंक्ति का प्रतिनिधित्व करती है, और प्रत्येक वर्ण एक ग्रिड सेल है। प्रतीक ग्रिड तत्वों से संबंधित हैं जो वे प्रतिनिधित्व करते हैं (कमरे की सूची, संदेश सूची, नए कमरे का रूप, संदेश का रूप)।

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

 .new-room-form { grid-area: n; } .rooms-list { grid-area: r; } .message-list { grid-area: m; } .send-message-form { grid-area: s; } 

बेशक, ये कक्षाएं आपके HTML में हमारे ग्रिड तत्वों पर भी लागू होती हैं। हालांकि, मैं इसके बारे में विस्तार से बात नहीं करूंगा, क्योंकि, सबसे अधिक संभावना है, आप जानते हैं कि HTML टैग में कक्षाएं कैसे जोड़ें।

इस क्षण से हम लेआउट के साथ प्रयोग करना शुरू करते हैं। हम ग्रिड-टेम्प्लेट-क्षेत्रों के मूल्यों को बदलकर बहुत कुछ बदल सकते हैं।



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

नीचे इनमें से चार विकल्प दिए गए हैं। संबंधित लेआउट के साथ उनमें से प्रत्येक से मेल खाने की कोशिश करें।

 grid-template-areas: "nmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rsssss"; grid-template-areas: "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "rmmmmm" "nsssss"; grid-template-areas: "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "sssssn"; grid-template-areas: "mmmmmn" "mmmmmr" "mmmmmr" "mmmmmr" "mmmmmr" "sssssr"; 

सीएसएस चर का उपयोग कर रंग बदलें

खैर, अब हम CSS चरों का उपयोग करके एप्लिकेशन का रंग बदलने का प्रयास करेंगे। यदि आपने अब तक उनके साथ काम नहीं किया है, तो आइए देखें कि वे क्या हैं।





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

आइए देखें कि चर के विभिन्न मूल्यों का उपयोग करके हमारे आवेदन के साथ क्या किया जा सकता है।

 :root { --main-color: #5ea3d0; --secondary-color: white; --main-text-color: #3e5869; --secondary-text-color: #b0c7d6; --new-room-form: #d9e1e8; --send-message-form: #F5F5F5; } 

वे हमारे लेआउट में 17 बार दोहराए जाते हैं। लेकिन हमने सभी स्थानों की जाँच नहीं की, आइए एक नज़र डालते हैं कि संदेश रंग और बाईं ओर के पैनल के संबंध में मुख्य रंग कैसे काम करता है।



यहां बताया गया है कि हमने इसे सभी कोड में कैसे हराया।

 .rooms-list { background: var(--main-color); } .message-text { background: var(--main-color); } 

चर अच्छे हैं क्योंकि हम उनकी घोषणा को संपादित कर सकते हैं, और यह पूरे आवेदन को बदलने के लिए पर्याप्त होगा। एक उदाहरण:

 :root { --main-color: red; } 

और यहाँ परिणाम है:



हम बस चर की घोषणा को बदल सकते हैं: रूट, जो हमें एप्लिकेशन की उपस्थिति के साथ खेलने की अनुमति देता है।



चलो कुछ रंगों को प्रतिस्थापित करते हैं: ऊपर पैलेट का उपयोग करके रूट।

 :root { --main-color: #5ea3d0; --secondary-color: white; --main-text-color: #3e5869; --secondary-text-color: #b0c7d6; --new-room-form: #d9e1e8; --send-message-form: #F5F5F5; } 

परिणाम एक पूरी तरह से अलग दिखने वाला है:

ग्रिड और चर को मिलाएं

यदि हम यह सब जोड़ते हैं, तो हमें अपनी चैट के डिजाइन को पूरी तरह से बदलने का अवसर मिलेगा। चलो करते हैं।





यहां अंतिम संस्करण की तुलना में प्रारंभिक संस्करण कैसा दिखता है। जैसा कि आप देख सकते हैं, मैंने पैलेट और लेआउट दोनों को बदल दिया। दो उदाहरणों के बीच एकमात्र अंतर कोड की 11 पंक्तियां हैं जो मैंने यहां पर प्रकाश डाला था।

 :root { --main-color: #ff66ff; --secondary-color: #fbd8fb; --main-text-color: #3e5869; --secondary-text-color: #d8b2ff; --new-room-form: #ffb2ff; --send-message-form: #d8b2ff;x } .app { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; grid-template-areas: "mmmmrr" "mmmmrr" "mmmmrr" "mmmmrr" "mmmmnn" "ffffff"; } 

वास्तव में अच्छा है?

स्किलबॉक्स अनुशंसा करता है:

• प्रैक्टिकल कोर्स 0 से प्रो तक PHP डेवलपर ।
• वार्षिक ऑनलाइन पाठ्यक्रम "प्रोफेशन वेब डेवलपर" ।
• खरोंच से एक व्यावहारिक दो महीने का कोर्स पायथन डेवलपर ।