नींव - स्थापना

इस अध्याय में, हम वेबसाइट पर फाउंडेशन को स्थापित करने और उपयोग करने के तरीके के बारे में चर्चा करेंगे।

फाउंडेशन डाउनलोड करें

जब आप लिंक Foundation.zurb.com खोलते हैं , तो आपको नीचे दिखाए अनुसार एक स्क्रीन दिखाई देगी -

दबाएं Download Foundation 6 बटन, आपको दूसरे पृष्ठ पर भेज दिया जाएगा।

यहाँ आप चार बटन देख सकते हैं -

Download Everything - आप फाउंडेशन के इस संस्करण को डाउनलोड कर सकते हैं, यदि आप फ्रेमवर्क यानी वैनिला सीएसएस और जेएस में सब कुछ चाहते हैं।
Download Essentials - यह सरल संस्करण डाउनलोड करेगा जिसमें ग्रिड, बटन, टाइपोग्राफी आदि शामिल हैं।
Custom Download - यह फाउंडेशन के लिए कस्टम लाइब्रेरी को डाउनलोड करेगा, इसमें तत्व और परिभाषित आकार के कॉलम, फ़ॉन्ट आकार, रंग आदि शामिल हैं।
Install via SCSS - यह आपको साइटों के लिए फाउंडेशन स्थापित करने के लिए प्रलेखन पृष्ठ पर पुनर्निर्देशित करेगा।

आप क्लिक कर सकते हैं Download Everythingबटन फ्रेमवर्क और सीएसएस और जेएस में सब कुछ पाने के लिए। चूंकि फाइलें फ्रेमवर्क में सभी चीजों को समाहित करती हैं, इसलिए हर बार आपको व्यक्तिगत कार्यक्षमता के लिए अलग-अलग फाइलों को शामिल करने की आवश्यकता नहीं होती है। इस ट्यूटोरियल को लिखने के समय, नवीनतम संस्करण (फाउंडेशन 6) डाउनलोड किया गया था।

फ़ाइल संरचना

एक बार फाउंडेशन डाउनलोड हो जाने के बाद, ज़िप फ़ाइल को निकालें, और आपको निम्नलिखित फ़ाइल / निर्देशिका संरचना दिखाई देगी -

जैसा कि आप देख सकते हैं, संकलित सीएसएस और जेएस (नींव। *) हैं, साथ ही साथ सीएसएस और जेएस (नींव ।min। *) संकलित और खनन किए गए हैं।

हम इस ट्यूटोरियल में लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

HTML टेम्पलेट

फाउंडेशन का उपयोग करने वाला एक मूल HTML टेम्प्लेट नीचे दिखाया गया है -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

निम्नलिखित अनुभाग उपरोक्त कोड का विस्तार से वर्णन करते हैं।

एचटीएमएल 5 सिद्धांत

फाउंडेशन में कुछ HTML एलिमेंट्स और सीएसएस प्रॉपर्टीज होती हैं जिनके लिए HTML5 डॉक्टाइप के इस्तेमाल की जरूरत होती है। इसलिए, एचटीएमएल 5 सिद्धांत के लिए निम्नलिखित कोड को फाउंडेशन का उपयोग करके अपनी सभी परियोजनाओं की शुरुआत में शामिल किया जाना चाहिए।

<!DOCTYPE html>
<html>
   ....
</html>

मोबाइल पहले

यह मोबाइल उपकरणों के लिए उत्तरदायी होने में मदद करता है। आपको शामिल करने की आवश्यकता हैviewport meta tag मोबाइल उपकरणों पर उचित रेंडरिंग और ज़ूमिंग को सुनिश्चित करने के लिए <head> तत्व, को।

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

चौड़ाई गुण डिवाइस की चौड़ाई को नियंत्रित करता है। इसे उपकरण-चौड़ाई पर सेट करने से यह सुनिश्चित हो जाएगा कि इसे विभिन्न उपकरणों (मोबाइल, डेस्कटॉप, टैबलेट ...) में ठीक से प्रस्तुत किया गया है।
प्रारंभिक-स्केल = 1.0 यह सुनिश्चित करता है कि जब लोड किया जाता है, तो आपका वेब पेज 1: 1 के पैमाने पर प्रस्तुत किया जाएगा, और कोई भी ज़ूमिंग बॉक्स से बाहर लागू नहीं किया जाएगा।

घटकों का प्रारंभ

मॉडल और ड्रॉपडाउन जैसे घटकों के लिए फाउंडेशन में jQuery स्क्रिप्ट की आवश्यकता है।

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

उत्पादन

ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -

ऊपर दिए गए html कोड को सेव करें firstexample.html फ़ाइल।
इस HTML फाइल को ब्राउजर में खोलें, जैसा कि नीचे दिखाया गया है।