फाउंडेशन के साथ एक कार्ड आधारित यूआई बनाएं

Sep 16, 2025
कैसे करना है

कार्ड के आधार पर वेबसाइट लेआउट वेब पर ले लिया है। Pinterest, ट्विटर, फेसबुक और Google द्वारा लोकप्रिय बनाया गया है, कई अलग-अलग उपयोग मामलों के लिए कार्ड एक डिज़ाइन पैटर्न बन गए हैं।

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

  • सही वेबसाइट लेआउट के लिए कदम

ज़र्ब टीम ने वर्षों से अपने डिजाइन के काम में कार्ड-आधारित लेआउट का उपयोग किया है। इसके फ्रंटेंड फ्रेमवर्क, फाउंडेशन ने हमेशा वेब डिज़ाइनर को उन उपकरणों के साथ लैस करने की मांग की है जिन्हें उन्हें मॉड्यूलर और लचीला घटकों की एक विस्तृत श्रृंखला सहित उत्तरदायी वेबसाइटों को त्वरित रूप से डिजाइन और निर्माण करने की आवश्यकता होती है। संस्करण 6.3 बिल्डिंग ब्लॉक के इस संग्रह में जोड़ा गया एक ब्रांड नया ऑफ-कैनवास कार्यान्वयन, उत्तरदायी accordions / टैब, और एक शक्तिशाली नया कार्ड घटक लाता है।

इस ट्यूटोरियल में हम सीखेंगे कि एक उत्तरदायी कार्ड-आधारित यूआई कैसे बनाएं जो फाउंडेशन के फ्लेक्सबॉक्स-आधारित ग्रिड का लाभ उठाने के लिए फाउंडेशन के फ्लेक्सबॉक्स-आधारित ग्रिड का लाभ उठाता है।

01. एक विकास वातावरण स्थापित करें

पहला कदम एक विकास वातावरण स्थापित करना है। इस ट्यूटोरियल के लिए, हम एक नोड-आधारित विकास वातावरण का उपयोग करेंगे, इसलिए आपको Node.js को स्थापित करने की आवश्यकता है। ऐसा करने के लिए विवरण आपके पर्यावरण पर निर्भर करते हैं, इसलिए जांचें यहां यह जानने के लिए कि क्या करना है।

एक बार आपके पास नोड स्थापित हो जाने के बाद, फाउंडेशन क्लि का उपयोग करके इंस्टॉल करें एनपीएम इंस्टॉल-जी फाउंडेशन-सीएलआई , जो एक नई नींव परियोजना स्थापित करना आसान बना देगा।

02. एक नई परियोजना शुरू करें

आइए ज़र्ब टेम्पलेट के आधार पर एक नई परियोजना बनाएं। आज्ञा देना नींव नई नेट-पत्रिका-ट्यूटोरियल , 'एक वेबसाइट (साइट्स फॉर साइट्स)', 'नेट-पत्रिका-ट्यूटोरियल' का चयन करें और फिर ज़र्ब टेम्पलेट का चयन करें। यह नींव के आधार पर एक परियोजना टेम्पलेट स्थापित करेगा, निर्माण प्रणाली और विकास सर्वर के साथ पूरा हो जाएगा।

टेम्पलेट एक नमूना पृष्ठ के साथ आता है src / pages / index.html । सादगी के लिए, हम उस नमूने को हटा देंगे और इसे खाली के साथ बदल देंगे & lt; शीर्षलेख और जीटी; & lt; / हेडर और जीटी; स्क्रैच से शुरू करने के लिए हमारे कार्ड आधारित यूआई। Daud एनपीएम शुरू कमांड लाइन से विकास सर्वर चलाने के लिए, और आपको कार्ड के लिए एक नंगे HTML पेज तैयार देखना चाहिए।

03. एक कार्ड बनाएँ

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

[9 3] A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

फाउंडेशन यति के साथ एक साधारण कार्ड, हेडर और पाद लेख कार्ड-विभक्त वर्ग का उपयोग करके बनाए गए

लेकिन, इस ट्यूटोरियल के लिए हम सादगी के लिए डिफ़ॉल्ट कक्षाओं का उपयोग करेंगे। .card कक्षा कंटेनर है; हर कार्ड एक के भीतर रह जाएगा .card । यह सीमाओं, छाया, और डिफ़ॉल्ट रंग जैसी चीजों को परिभाषित करता है।

.कार्ड-सेक्शन कक्षा एक विस्तारणीय सामग्री ब्लॉक को परिभाषित करती है, जहां आप सामग्री डाल सकते हैं, जबकि .card-divider कक्षा एक गैर-विस्तारित ब्लॉक को परिभाषित करती है, जैसे कि एक पाद लेख, शीर्षलेख या विभाजक। आइए इन सभी वर्गों का उपयोग अपना पहला, मूल कार्ड बनाने के लिए करें। 

 & lt; शीर्षलेख और जीटी;
  & lt; div class = "पंक्ति कॉलम" & gt;
    & lt; h3 & gt; कार्ड सबसे अच्छे & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / हेडर और जीटी;
& lt; अनुभाग वर्ग = "कार्ड-कंटेनर" & gt;
  & lt; div class = "कार्ड" & gt;
    & lt; div class = "कार्ड-विभक्त" & gt;
      & lt; h4 & gt; यति हेडर & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div class = "कार्ड-सेक्शन" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "कार्ड-विभक्त" & gt;
      & lt; p & gt; यति पाद लेख & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / खंड & gt;

04. घटक शैलियों जोड़ें

यदि हम बस ऐसा करते हैं, तो हमारा कार्ड बहुत बड़ा होगा, पूरी स्क्रीन को भरने के लिए विस्तार कर रहा है। हम जल्द ही समग्र आकार के साथ निपटने जा रहे हैं, लेकिन अब के लिए इसे ज़र्ब टेम्पलेट में घटक शैलियों को कैसे जोड़ने के लिए एक बहाने के रूप में इसका उपयोग करें।

एक फ़ाइल जोड़ें _card.scss सेवा मेरे एसआरसी / संपत्ति / एससीएसएस / घटक / निर्दिष्ट करना अधिकतम चौड़ाई: 300px के लिये .card और जोड़कर हमारे मुख्य सीएसएस में फ़ाइल शामिल करें @ आयात घटक / कार्ड; सेवा मेरे एसआरसी / संपत्ति / एससीएसएस / app.scss ।

05. अपने कार्ड पुन: प्रयोज्य बनाओ

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

हमारे कार्ड कार्यान्वयन को आंशिक रूप से स्थानांतरित करने के लिए, बस कट और पेस्ट करें .card घटक हम एक फ़ाइल में निर्मित SRC / आंशिक , कहो SRC / आंशिक / बेसिक-card.html । फिर आप उस सामग्री को केवल लाइन जोड़कर शामिल कर सकते हैं {{& gt; मूल कार्ड}} आपकी इंडेक्स फ़ाइल में।

06. अपना लेआउट बनाना शुरू करें

हम अलग-अलग कार्ड प्रकारों को थोड़ा सा कवर करेंगे, लेकिन पहले हमारे कार्ड के लिए एक बड़ा, उत्तरदायी लेआउट बनाने के लिए हमारे पुन: प्रयोज्य मूल कार्ड का उपयोग करें। ऐसा करने के लिए, हम ब्लॉक ग्रिड नामक नींव से एक अवधारणा का उपयोग करने जा रहे हैं।

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

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

एक साधारण ब्लॉक ग्रिड के साथ, हमारे पास पहले से ही कई कार्डों के लिए एक सुंदर, स्केलेबल लेआउट है जैसा कि हम शामिल करना चाहते हैं

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

चूंकि हम कार्ड की एक बड़ी और बदलती संख्या की उम्मीद करते हैं, यह हमारे उद्देश्यों के लिए आदर्श है। आइए इसे चार-कॉलम ग्रिड में जल्दी से सेट करें और कुछ दर्जन कार्ड जोड़ें। अभी के लिए हम केवल बड़ी स्क्रीन के बारे में चिंता करेंगे, इसलिए हम बस लागू करेंगे .large-up-4 पंक्ति में कक्षा। 

 & lt; अनुभाग वर्ग = "कार्ड-कंटेनर" & gt;
& lt; div class = "पंक्ति बड़े-ऊपर-4" & gt;
{{#Repeat 24}}
& lt; div class = "कॉलम" & gt;
{{& gt; मूल कार्ड}}
& lt; / div & gt;
{{/ दोहराना}}
& lt; / div & gt;
& lt; / खंड & gt;

07. इसे उत्तरदायी बनाएं

इसके बाद, आइए विचार करें कि हम विभिन्न स्क्रीन आकारों पर क्या करना चाहते हैं। नींव में निर्मित छोटे, मध्यम और बड़े ब्रेकपॉइंट्स के साथ आता है, इसलिए हम चीजों को स्थानांतरित करने के लिए प्रत्येक ब्रेकपॉइंट के लिए बस एक अलग ब्लॉक-ग्रिड क्लास लागू कर सकते हैं।

आइए कक्षाओं को जोड़कर, मोबाइल स्क्रीन पर प्रति पंक्ति एक कार्ड डालें, और टैबलेट पर तीन प्रति पंक्ति डालें .small-up-1 तथा .medium-up-3 पंक्ति पर। अगर हम ऐसा करते हैं, और स्टॉपगैप को हटा दें अधिकतम चौड़ाई संपत्ति हम डालते हैं _card.scss । हमारे पास पहले से ही एक खूबसूरती से उत्तरदायी लेआउट है जो सभी स्क्रीन आकारों पर अच्छा दिखता है।

08. कुछ नए कार्ड प्रकार आज़माएं

Combine different styles of card to build your layout

अपने लेआउट बनाने के लिए कार्ड की विभिन्न शैलियों को मिलाएं

अब आइए कार्ड के हमारे सेट को विविधता दें, एक और प्रकार एक शुद्ध एज-टू-एज फोटो है। कार्ड अनुभाग और कार्ड डिवाइडर में डिफ़ॉल्ट रूप से पैडिंग होता है, लेकिन एज-टू-एज सामग्री रखने के लिए हम बस सीधे कार्ड के अंदर छवि डाल सकते हैं। आइए इसे ए के रूप में जोड़ें फोटो-कार्ड। html आंशिक SRC / आंशिक । 

 & lt; div class = "कार्ड" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. फ्लेक्सबॉक्स का परिचय दें

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

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

फाउंडेशन कार्ड पैक आपको अपने कार्ड गेम को स्तरित करने के लिए पूर्व-निर्मित फ्लेक्सबॉक्स कार्ड का एक बड़ा सेट देता है

इस ट्यूटोरियल के लिए, हम अपने पसंदीदा नई सीएसएस लेआउट तकनीक का उपयोग करके क्षतिपूर्ति करेंगे - फ्लेक्सबॉक्स। नींव अपने ग्रिड के लिए एक फ्लेक्सबॉक्स मोड के साथ आता है। इसे सक्षम करने के लिए, आपको बस खोलने की आवश्यकता है एसआरसी / संपत्ति / एससीएसएस / app.scss , टिप्पणी दें @Chclude फाउंडेशन-ग्रिड; तथा @Chclude फाउंडेशन-फ्लोट-क्लासेस; और असंतोष @ इनक्ल्यूड फाउंडेशन-फ्लेक्स-ग्रिड; तथा @ इनक्ल्यूड फाउंडेशन-फ्लेक्स-क्लासेस; ।

10. अपने कार्ड को एक ही ऊंचाई बनाएं

फ्लेक्सबॉक्स कक्षाओं को सक्षम करने के साथ, हमारे कार्ड एक ही ऊंचाई होने के लिए आसान है। सबसे पहले, हम अपने कॉलम फ्लेक्स माता-पिता को जोड़कर बना सकते हैं .flex- कंटेनर कक्षा। यह जोड़ने के लिए एक प्रोटोटाइप शॉर्टकट है प्रदर्शन: फ्लेक्स; उन्हें संपत्ति। एक बार ऐसा करने के बाद, सभी कार्ड एक ही ऊंचाई बन जाएंगे, लेकिन चूंकि फ्लेक्स बाल तत्व डिफ़ॉल्ट रूप से घटते हैं, हमारे कुछ कार्ड संकीर्ण होते हैं।

हम उन तत्वों को बढ़ने के लिए बस बताकर इस मुद्दे को ठीक कर सकते हैं। यह या तो उन्हें सीएसएस के साथ लक्षित करके और उन्हें देकर किया जाता है फ्लेक्स-ग्रोथ: 1; या प्रोटोटाइप के दौरान सरलता के लिए, बस कक्षा जोड़कर .फ्लेक्स-चाइल्ड-ग्रोथ । एक बार यह सब करने के बाद हमारे सभी कार्ड कॉलम भरते हैं और अच्छी तरह से एक ही ऊंचाई होगी।

इस लेख को मूल रूप से शामिल किया गया था नेट पत्रिका अंक 2 9 3। यहां खरीदें या [28 9] यहां नेट की सदस्यता लें

।

ये पसंद आया? इन्हें कोशिश करें...

  • 10 कारणों से आप परमाणु डिजाइन का उपयोग करना चाहिए
  • एसवीजी बहुभुज बनाएं और एनिमेट करें
  • सीएसएस ट्रिक्स अपने लेआउट को क्रांतिकारी बनाने के लिए

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Build an AI-powered chatbot

कैसे करना है Sep 16, 2025

कृत्रिम बुद्धि (एआई) हमें मौजूदा समस्याओं को देखन..

Get started with Babel 7

कैसे करना है Sep 16, 2025

पारिस्थितिक तंत्र की चौड़ाई के कारण जावास्क्रिप..

Create a tiles material in Substance Designer

कैसे करना है Sep 16, 2025

पदार्थ डिजाइनर आपके लिए सभी प्रकार की सामग्री बन�..

Create a wobbly text effect with JavaScript

कैसे करना है Sep 16, 2025

पाठ और टाइपोग्राफी के लिए प्रभाव का परिचय एक नया �..

12 tips for realistic 3D lighting

कैसे करना है Sep 16, 2025

प्रकाश किसी भी में मौलिक है 3 डी कला आप जिस पर..

5 tips for sculpting in double-quick time

कैसे करना है Sep 16, 2025

वास्तव में विस्तृत 3 डी प्राणी को मूर्तिकला में दिन लग सकते हैं - लेकिन यह �..

How to get more from digital textures

कैसे करना है Sep 16, 2025

डिजिटल वर्किंग आपको एक वर्कस्पेस में जितनी चाहे�..

How to design an animated hero

कैसे करना है Sep 16, 2025

निम्नलिखित युक्तियाँ एरिक मिलर एनीमेशन स्टूडियो की आगामी वेब श्रृंखला �..

श्रेणियाँ