फाउंडेशन - त्वरित गाइड

फाउंडेशन क्या है?

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

फाउंडेशन ने एक आंतरिक शैली गाइड के रूप में शुरू किया, जिसे 2008 में ZURB द्वारा बनाया गया था। ZURB कैंपबेल, कैलिफोर्निया में एक उत्पाद डिजाइन कंपनी है। यह अक्टूबर 2011 में फाउंडेशन 2.0 को खुले स्रोत के रूप में जारी किया। फाउंडेशन का नवीनतम संस्करण 6.1.1 है, जो दिसंबर 2015 में जारी किया गया था।

फाउंडेशन का उपयोग क्यों करें?

  • यह Sass संकलक का उपयोग करके तेजी से विकास प्रदान करता है, जो डिफ़ॉल्ट संकलक की तुलना में बहुत तेजी से काम करता है।

  • यह मूल्य निर्धारण तालिकाओं, स्विचेस, हेंड्राइड, रेंज स्लाइडर्स, लाइटबॉक्स और कई और अधिक के साथ आपकी वेबसाइट को समृद्ध करता है।

  • यह तेजी से कोडिंग और नियंत्रण के लिए ग्रंट और लिबास जैसे विकास पैकेज के साथ आता है।

  • साइटों के लिए फाउंडेशन आपको जल्दी से वेबसाइट बनाने के लिए HTML, CSS और JS प्रदान करता है।

  • ईमेल फ्रेमवर्क आपको उत्तरदायी HTML ईमेल प्रदान करता है, जिसे किसी भी डिवाइस पर पढ़ा जा सकता है।

  • ऐप्स के लिए फाउंडेशन आपको पूरी तरह से उत्तरदायी वेब ऐप बनाने की अनुमति देता है।

विशेषताएं

  • इसमें शक्तिशाली ग्रिड सिस्टम और कुछ उपयोगी यूआई घटक और कूल जावास्क्रिप्ट प्लगइन्स हैं।

  • यह उत्तरदायी डिजाइन प्रदान करता है, जो सभी प्रकार के उपकरणों का कार्य करता है।

  • यह मोबाइल उपकरणों के लिए अनुकूलित है और सही मायने में मोबाइल के पहले दृष्टिकोण का समर्थन करता है।

  • यह HTML टेम्पलेट प्रदान करता है, जो अनुकूलन योग्य और एक्स्टेंसिबल हैं।

लाभ

  • एक बार जब आप HTML और CSS की बुनियादी समझ रखते हैं, तो यह सीखना आसान है।

  • आप खुले रूप से फाउंडेशन का उपयोग कर सकते हैं क्योंकि यह एक खुला स्रोत है।

  • यह आपको टेम्पलेट्स का एक गुच्छा प्रदान करता है, जो आपको तुरंत वेबसाइट विकसित करने में मदद करता है।

  • फाउंडेशन SASS और कम्पास जैसे प्रीप्रोसेसरों का समर्थन करता है, जिससे विकास तेजी से होता है।

नुकसान

  • ट्विटर बूटस्ट्रैप की लोकप्रियता के कारण, ट्विटर बूटस्ट्रैप के लिए समुदाय का समर्थन फाउंडेशन से बेहतर है।

  • शुरुआती लोगों को सीखने और प्रीप्रोसेसर समर्थन का लाभ उठाने में कुछ समय लग सकता है।

  • मुद्दों को ठीक करने के लिए क्यूए साइटों और मंचों जैसे व्यापक समर्थन का अभाव।

  • दूसरों की तुलना में फाउंडेशन में थीम कम हैं।

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

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

जब आप लिंक 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 फाइल को ब्राउजर में खोलें, जैसा कि नीचे दिखाया गया है।

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

मूल टेम्पलेट

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

$ foundation new --framework sites --template basic

इसे सेट करने के लिए, पहले npm install , bower install चलाएं और इसे चलाने के लिए npm start कमांड का उपयोग करें । आप Github से टेम्प्लेट फ़ाइलों को भी डाउनलोड कर सकते हैं ।

ZURB टेम्पलेट

यह CSS / SCSS, JavaScript, Handlebars टेम्पलेट, मार्कअप संरचना, छवि संपीड़न का एक संयोजन है और SASS प्रोसेसिंग का उपयोग करता है। आप नीचे दिए गए कमांड का उपयोग करके यति लॉन्च या फाउंडेशन सीएलआई का उपयोग करके ZURB टेम्पलेट का उपयोग कर सकते हैं -

$ foundation new --framework sites --template zurb

इस टेम्पलेट को चलाने के लिए, मूल टेम्पलेट में निर्दिष्ट समान चरणों का पालन करें। आप Github से टेम्प्लेट फ़ाइलों को भी डाउनलोड कर सकते हैं ।

संपत्ति नकल

आप src / आस्तियों के फ़ोल्डर में सामग्री का उपयोग कर सकते हैं जिसमें गुलप का उपयोग किया जाएगा जिसमें संपत्ति आपका प्रोजेक्ट फ़ोल्डर होगी। यहां महत्वपूर्ण बात यह है कि एसएएस फाइलें, जावास्क्रिप्ट फाइलें और छवियां इस संपत्ति की नकल प्रक्रिया के तहत नहीं आएंगी, क्योंकि वे सामग्री की प्रतिलिपि बनाने के लिए अपनी प्रक्रिया होगी।

पृष्ठ संकलन

आप अर्थात् तीन फ़ोल्डर के अंतर्गत HTML पृष्ठों बना सकते हैं पृष्ठों , लेआउट और partials जो बसता अंदर src / निर्देशिका। आप पाणिनी फ्लैट फाइल कंपाइलर का उपयोग कर सकते हैं जो टेम्प्लेट, पेज, एचटीएमएल भाग का उपयोग करके पृष्ठों के लिए लेआउट बनाता है। यह प्रक्रिया हैंडलबार्स टेम्प्लेटिंग भाषा का उपयोग करके की जा सकती है ।

संकलन

आप Libsass का उपयोग करके SASS से CSS को संकलित कर सकते हैं और मुख्य SASS फ़ाइल को src / आस्तियों / scss / app.scss के तहत संग्रहीत किया जाएगा और साथ ही नए बनाए गए SASS भाग भी इस फ़ोल्डर में संग्रहीत किए जाएंगे। CSS का आउटपुट सामान्य CSS की तरह होगा, जो नेस्टेड स्टाइल में है। आप सीएसएस को साफ-सीएसएस के साथ संपीड़ित कर सकते हैं और यूसीएसएस का उपयोग करके स्टाइलशीट से अप्रयुक्त सीएसएस को हटा सकते हैं ।

जावास्क्रिप्ट संकलन

जावास्क्रिप्ट फ़ाइलों को फाउंडेशन के साथ src / आस्तियों / js फ़ोल्डर के तहत संग्रहीत किया जाएगा और सभी निर्भरता app.js फ़ाइल में एक साथ बंधे हैं । नीचे दिए गए क्रम में निर्दिष्ट अनुसार फाइल को एक साथ बांधा जाएगा -

  • फाउंडेशन की निर्भरता।
  • फ़ाइलें src / आस्तियों / js फ़ोल्डर के तहत संग्रहीत की जाएंगी।
  • फ़ाइलों को एक फ़ाइल में बंडल किया जाता है जिसे app.js कहा जाता है ।

छवि संपीड़न

डिफ़ॉल्ट रूप से, सभी छवियां संपत्ति / img फ़ोल्डर में dist फ़ोल्डर के तहत संग्रहीत की जाएंगी। आप gulp-imagemin जो JPEG, PNG, SVG और GIF फ़ाइलों का समर्थन करते हैं, का उपयोग करते हुए निर्माण के लिए छवियों को संपीड़ित कर सकते हैं ।

BrowserSync

आप एक BrowserSync सर्वर बना सकते हैं जो सिंक्रनाइज़ किए गए ब्राउज़र परीक्षण पर उपलब्ध हैhttp://localhost:8000और इस URL का उपयोग करके संकलित टेम्प्लेट को देखने में सक्षम है। जब आपका सर्वर चल रहा होता है, तो फ़ाइल को सहेजते समय पृष्ठ स्वतः ही ताज़ा हो जाता है और जब आप काम करते हैं तो आप पृष्ठ में किए गए परिवर्तनों को वास्तविक समय में देख सकते हैं।

विवरण

इसमें वेब एप्लिकेशन को सुचारू रूप से काम करने के लिए फाउंडेशन तत्व शामिल हैं। निम्नलिखित तालिका फाउंडेशन के कुछ घटकों को सूचीबद्ध करती है -

अनु क्रमांक। घटक विवरण
1 अकॉर्डियन

Accordions में वर्टिकल टैब होते हैं जिनका उपयोग वेबसाइटों पर बड़ी मात्रा में डेटा के विस्तार और पतन के लिए किया जाता है।
2 अकॉर्डियन मेनू

यह समझौते प्रभाव के साथ बंधनेवाला मेनू प्रदर्शित करता है।
3 बिल्ला

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

यह नेविगेशनल पदानुक्रम के भीतर एक साइट के लिए वर्तमान स्थान को निर्दिष्ट करता है।
5 बटन

फाउंडेशन विभिन्न शैलियों के साथ मानक बटन का समर्थन करता है।
6 पुकारें

कॉलआउट एक तत्व है, जिसका उपयोग सामग्री को अंदर रखने के लिए किया जा सकता है।
7 बंद करें बटन

इसका उपयोग अलर्ट बॉक्स को खारिज करने के लिए किया जाता है।
8 ड्रिलडाउन मेनू

Drilldown मेनू नेस्टेड सूचियों को ऊर्ध्वाधर ड्रिलडाउन मेनू में बदलता है।
9 ड्रॉप डाउन मेनू

ड्रॉपडाउन मेनू का उपयोग सूची प्रारूप में लिंक प्रदर्शित करने के लिए किया जाता है।
10 ड्रॉपडाउन पेन

ड्रॉपडाउन फलक जब आप बटन पर क्लिक करते हैं तो सामग्री प्रदर्शित होती है।
1 1 फ्लेक्स वीडियो

इसका उपयोग वेब पेजों में वीडियो ऑब्जेक्ट बनाने के लिए किया जाता है।
12 फ्लोट क्लासेस

इसका उपयोग HTML तत्वों में उपयोगिता वर्ग जोड़ने के लिए किया जाता है।
13 फार्म

इसका उपयोग उपयोगकर्ता इनपुट एकत्र करने के लिए फॉर्म लेआउट बनाने के लिए किया जाता है।
14 लेबल

लेबल इनलाइन शैली हैं, जो एक इनपुट तत्व के लिए एक लेबल को परिभाषित करते हैं।
15 मीडिया वस्तु

इसका उपयोग मीडिया ऑब्जेक्ट्स जैसे छवियों, वीडियो, ब्लॉग टिप्पणियों आदि को जोड़ने के लिए किया जाता है जिन्हें सामग्री ब्लॉक के बाएं या दाएं रखा जा सकता है।
16 मेन्यू

यह वेबसाइट में विभिन्न मोड तक पहुंच प्रदान करता है।
17 पृष्ठ पर अंक लगाना

यह एक प्रकार का नेविगेशन है जो सामग्री को संबंधित पृष्ठों की एक श्रृंखला में विभाजित करता है।
18 स्लाइडर

यह एक हैंडल खींचकर मूल्यों की सीमा को निर्दिष्ट करता है।
19 स्विच

इसका उपयोग चालू और बंद राज्य के बीच स्विच करने के लिए किया जाता है।
20 टेबल

यह पंक्तियों और कॉलम प्रारूप में डेटा का प्रतिनिधित्व करता है।
21 टैब

यह एक नेविगेशन आधारित टैब है जो पेज को छोड़े बिना कंटेंट को अलग-अलग पैन में प्रदर्शित करता है।
22 थंबनेल

यह थंबनेल आकार में छवियों को स्टाइल करता है।
23 शीर्षक पट्टी

इसका उपयोग उपयोगकर्ता द्वारा अन्य मेनू आइटम के साथ उपयोग की जाने वाली वर्तमान स्क्रीन को प्रदर्शित करने के लिए किया जाता है।
24 टूलटिप

यह छोटा पॉप-अप बॉक्स है जो लिंक पर माउस को मँडराते समय जानकारी का वर्णन करता है।
25 शीश पट्टी

इसका उपयोग वेबसाइट में नेविगेशन हेडर बनाने के लिए किया जाता है।
26 की परिक्रमा

यह एक आसान और शक्तिशाली स्लाइडर है जो कक्षा कक्षा का उपयोग करके तत्वों को स्वाइप करता है ।

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

फ़ॉन्ट आकार

ब्राउज़र शैली शीट का फ़ॉन्ट आकार डिफ़ॉल्ट रूप से 100% पर सेट है। डिफ़ॉल्ट फ़ॉन्ट का आकार 16 पिक्सेल पर सेट है। फ़ॉन्ट आकार के आधार पर, ग्रिड आकार की गणना की जाती है। अलग-अलग आधार फ़ॉन्ट आकार और अप्रभावित ग्रिड ब्रेकप्वाइंट के लिए, $ रेम-बेस को $ वैश्विक-फ़ॉन्ट-आकार मान पर सेट करें, जो कि पिक्सेल में होना चाहिए।

रंग की

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

SASS संदर्भ

चर

निम्न तालिका एसएएस चर को सूचीबद्ध करती है, जो आपके प्रोजेक्ट _settings.scss में घटकों की डिफ़ॉल्ट शैलियों को अनुकूलित करने के लिए उपयोग किया जाता है ।

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$global-width

यह साइट की वैश्विक चौड़ाई का प्रतिनिधित्व करता है। ग्रिड की पंक्ति की चौड़ाई निर्धारित करने के लिए उपयोग किया जाता है।

 संख्या रेम-calc (1200)
2

$global-font-size

यह <html> और <body> पर लागू फ़ॉन्ट आकार का प्रतिनिधित्व करता है । यह डिफ़ॉल्ट रूप से 100% सेट है और उपयोगकर्ता की ब्राउज़र सेटिंग्स मूल्य विरासत में मिलेगा।

 संख्या 100%
3

$global-lineheight

यह सभी प्रकार की डिफ़ॉल्ट लाइन ऊंचाई का प्रतिनिधित्व करता है। $ वैश्विक-लाइनहाइट 24x है, जबकि $ वैश्विक-फ़ॉन्ट-आकार 16px पर सेट है।

 संख्या 1.5
4

$primary-color

यह इंटरैक्टिव घटकों जैसे लिंक और बटन को रंग देता है।

 रंग # 2199e8
5

$secondary-color

इसका उपयोग घटकों के साथ किया जाता है, जो सहायक वर्ग का समर्थन करते हैं ।

 रंग # 777
6

$success-color

यह .success वर्ग के साथ उपयोग किए जाने पर सकारात्मक स्थिति या क्रिया का प्रतिनिधित्व करता है ।

 रंग # 3adb76
7

$warning-color

यह .warning वर्ग के साथ उपयोग किए जाने पर सावधानी की स्थिति या कार्रवाई का प्रतिनिधित्व करता है ।

 रंग # ffae00
8

$alert-color

यह .alert वर्ग के साथ उपयोग किए जाने पर एक नकारात्मक स्थिति या क्रिया का प्रतिनिधित्व करता है ।

 रंग # ec5840
9

$light-gray

इसका उपयोग हल्के भूरे रंग के UI आइटम के लिए किया जाता है।

 रंग # e6e6e6
10

$medium-gray

इसका उपयोग मध्यम ग्रे UI आइटम के लिए किया जाता है।

 रंग #cacaca
1 1

$dark-gray

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

 रंग # 8a8a8a
12

$black

इसका उपयोग ब्लैक UI आइटम के लिए किया जाता है।

 रंग # 0a0a0a
13

$white

यह सफेद UI आइटम के लिए उपयोग किया जाता है।

 रंग #fefefe
14

$body-background

यह शरीर की पृष्ठभूमि के रंग का प्रतिनिधित्व करता है।

 रंग $ सफेद
15

$body-font-color

यह शरीर के पाठ रंग का प्रतिनिधित्व करता है।

 रंग $ काला
16

$body-font-family

यह शरीर के फोंट की सूची का प्रतिनिधित्व करता है।

 सूची 'हेलवेटिका नीयू', हेलवेटिका, रोबोटो, एरियल, सेन्स-सेरिफ़
17

$body-antialiased

सीएसएस गुण -webkit-font-smoothing और -moz-osx-font- smoothing का उपयोग करके इस विशेषता को सही करने के लिए एंटीएलियास प्रकार को सक्षम किया गया है ।

 बूलियन सच
18

$global-margin

यह घटकों पर वैश्विक मार्जिन मूल्य का प्रतिनिधित्व करता है।

 संख्या 1rem
19

$global-padding

यह घटकों पर वैश्विक पैडिंग मूल्य का प्रतिनिधित्व करता है।

 संख्या 1rem
20

$global-margin

यह घटकों के बीच उपयोग किए जाने वाले वैश्विक मार्जिन मूल्य का प्रतिनिधित्व करता है।

 संख्या 1rem
21

$global-weight-normal

यह सामान्य प्रकार के लिए वैश्विक फ़ॉन्ट वजन का प्रतिनिधित्व करता है।

 कीवर्ड या संख्या साधारण
22

$global-weight-bold

यह बोल्ड प्रकार के लिए वैश्विक फ़ॉन्ट वजन का प्रतिनिधित्व करता है।

 कीवर्ड या संख्या साहसिक
23

$global-radius

यह उन सभी तत्वों के वैश्विक मूल्य का प्रतिनिधित्व करता है जिनकी सीमा त्रिज्या है।

 संख्या 0
24

$global-text-direction

यह CSS की पाठ दिशा को ltr या rtl पर सेट करता है

 एल टीआर

एसएएस फाउंडेशन में कोड को अधिक लचीला और अनुकूलन योग्य बनाने में मदद करता है।

अनुकूलता

नींव के लिए एसएएस आधारित संस्करण स्थापित करने के लिए, रूबी को विंडोज पर स्थापित किया जाना चाहिए। रूबी एसएएसएस और लिबासस के साथ फाउंडेशन संकलित किया जा सकता है। हम अनुशंसा करते हैंnode-sass 3.4.2+ संस्करण संकलित करने के लिए।

ऑटोप्रिफ़नर आवश्यक है

ऑटोप्रिफ़िशर SASS फ़ाइलों को संभालता है। gulp-autoprefixer का उपयोग प्रक्रिया के निर्माण के लिए किया जाता है। निम्न ऑटोप्रिफ़र सेटिंग का उपयोग उचित ब्राउज़र समर्थन प्राप्त करने के लिए किया जाता है।

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

फ्रेमवर्क लोड हो रहा है

हम एनपीएम का उपयोग करके फ्रेमवर्क फ़ाइलों को स्थापित कर सकते हैं। कमांड लाइन इंटरफेस (सीएलआई) का उपयोग करके, हम सैस फाइलों को संकलित कर सकते हैं। निम्नलिखित ढांचा लोड करने की कमान है -

npm install foundation-sites --save

उपरोक्त कमांड लाइन कोड चलाने के बाद, आपको निम्नलिखित लाइनें मिलेंगी -

मैन्युअल रूप से संकलन

फ्रेमवर्क फ़ाइलों को आपकी निर्माण प्रक्रिया के आधार पर एक आयात पथ के रूप में जोड़ा जा सकता है, लेकिन पथ समान संकुल_फोल / नींव-साइट / scss होगा । @Import बयान के शीर्ष पर शामिल किया गया है नींव-sites.scss फ़ाइल। दिए गए कोड में अगली पंक्ति में समझाया गया हैAdjusting CSS Output अनुभाग।

@import 'foundation';
@include foundation-everything;

संकलित सीएसएस का उपयोग करना

आप पूर्व-संकलित सीएसएस फ़ाइलों को शामिल कर सकते हैं। सीएसएस फाइलें दो प्रकार की होती हैं, अर्थात कीमीकृत और अघोषित। न्यूनतम संस्करण का उपयोग उत्पादन के लिए किया जाता है और अवर्गीकृत संस्करण का उपयोग सीधे CSS CSS को संपादित करने के लिए किया जाता है।

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

सीएसएस आउटपुट को समायोजित करना

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

@include foundation-everything;

जब आप अपने scss फ़ाइल में उपरोक्त कोड लिखते हैं तो आयातित घटकों की सूची नीचे दी गई है। जो घटक आवश्यक नहीं हैं, उन पर टिप्पणी की जा सकती है। आप नीचे दी गई कोड लाइनों को Your_folder_name / नोड_modules / नींव-साइटों / scss / नींव.scss फ़ाइल में देख सकते हैं।

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

सेटिंग्स फ़ाइल

पूरे फाउंडेशन प्रोजेक्ट यानी _settings.scss में एक सेटिंग फ़ाइल शामिल है । यदि आप साइट्स प्रोजेक्ट के लिए एक फाउंडेशन बनाने के लिए यति लॉन्च या सीएलआई का उपयोग कर रहे हैं, तो आप src / आस्तियों / scss / के तहत सेटिंग्स फ़ाइल पा सकते हैं।

हमने npm का उपयोग करके फाउंडेशन स्थापित किया है, इसलिए आप अपने_folder_name / नोड_modules / नींव-साइटों / scss / सेटिंग्स / _settings.scss के तहत शामिल सेटिंग्स फ़ाइल पा सकते हैं । आप इसे काम करने के लिए अपनी Sass फ़ाइलों में स्थानांतरित कर सकते हैं।

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

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

इस अध्याय में, हम जावास्क्रिप्ट के बारे में अध्ययन करेंगे । फाउंडेशन में जावास्क्रिप्ट सेट करना आसान है; केवल एक चीज जो आपको चाहिए वह है jQuery।

जावास्क्रिप्ट स्थापित करना

फाउंडेशन जावास्क्रिप्ट फ़ाइल प्राप्त करने के लिए आप ज़िप डाउनलोड, पैकेज मैनेजर, या सीडीएन का उपयोग कर सकते हैं। आपके कोड में आप jQuery और Foundation को <script> टैग के लिंक प्रदान कर सकते हैं, समापन से पहले रखा गया है <body> और जाँच लें कि फाउंडेशन jQuery के बाद लोड है। अधिक जानकारी के लिए यहां क्लिक करें ।

फ़ाइल संरचना

जब आप फाउंडेशन को कमांड लाइन के माध्यम से स्थापित करते हैं, तो फाउंडेशन प्लगइन्स अलग-अलग फाइलों जैसे कि नींव .abs.js , Foundation.dropdownMenu.js , नींव . slider.js और इतने पर डाउनलोड करता है। इन सभी फाइलों को नींव.जेएस में संयोजित किया जाता है , जो एक समय में सभी प्लगइन्स प्रदान करता है। यदि आप कुछ प्लगइन का उपयोग करना चाहते हैं, तो पहले नींव .core.js को लोड किया जाना चाहिए।

उदाहरण के लिए -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

कुछ प्लगइन्स को विशेष उपयोगिता पुस्तकालयों की आवश्यकता हो सकती है, जो फाउंडेशन इंस्टॉलेशन के साथ आते हैं। आप अगले अध्याय जावास्क्रिप्ट उपयोगिताओं में विशिष्ट प्लगइन आवश्यकताओं के बारे में विस्तार से अध्ययन कर सकते हैं ।

व्यक्तिगत फ़ाइलों को लोड करना नेटवर्क ओवरहेड बनाता है, विशेष रूप से मोबाइल उपयोगकर्ताओं के लिए। तेज़ पृष्ठ लोडिंग के लिए, ग्रंट या गल्प का उपयोग करने की सलाह दी जाती है।

शुरु कर रहा है

नींव () समारोह एक समय में प्लगइन सभी फाउंडेशन प्रारंभ करने में प्रयोग किया जाता है।

उदाहरण के लिए -

(document).foundation();

प्लगइन्स का उपयोग करना

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

प्लगइन्स को कॉन्फ़िगर करना

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

पेज लोड होने के बाद प्लगइन्स जोड़ना

जब नया HTML DOM में जोड़ा जाता है, तो उन तत्वों में से कोई भी प्लगइन्स डिफ़ॉल्ट रूप से इनिशियलाइज़ नहीं होगा। आप .foundation () फ़ंक्शन को फिर से कॉल करके नए प्लगइन्स की जांच कर सकते हैं ।

उदाहरण के लिए -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

प्रोग्रामेटिक उपयोग

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

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

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

उदाहरण के लिए -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

  • आपको किसी भी jQuery के चयनकर्ता को चुनने की अनुमति है और यदि चयनकर्ता कई प्लगइन्स रखता है, तो उन सभी के पास समान चयनित विधि होगी।

  • जावास्क्रिप्ट में तर्क पारित करने की तरह ही तर्क दिए जा सकते हैं।

  • अंडरस्कोर (_) के साथ उपसर्ग करने वाले तरीकों को आंतरिक एपीआई के एक भाग के रूप में माना जाता है, जिसका अर्थ है कि चेतावनी के बिना वे टूट सकते हैं, बदल सकते हैं या गायब हो सकते हैं।

आयोजन

जब भी कोई विशिष्ट कार्य पूरा होता है, DOM एक घटना को ट्रिगर करता है। उदाहरण के लिए, जब भी टैब बदले जाते हैं, तो इसे सुना जा सकता है और इस पर वापसी प्रतिक्रिया तैयार की जा सकती है। प्रत्येक प्लगइन घटनाओं की सूची को ट्रिगर कर सकता है, जिसे प्लगइन के दस्तावेज में दर्ज किया जाएगा। फाउंडेशन 6 में, कॉलबैक प्लग इन को हटा दिया जाता है और इसे इवेंट श्रोताओं के रूप में लिया जाना चाहिए।

उदाहरण के लिए -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

फ़ाउंडेशन में जावास्क्रिप्ट उपयोगिताओं को शामिल किया गया है जो कि आम कार्यात्मकताओं को जोड़ने के लिए उपयोग की जाती हैं। यह बहुत उपयोगी और उपयोग में आसान है। यह जावास्क्रिप्ट यूटिलिटीज लाइब्रेरी आपके फ़ोल्डर में पाया जा सकता है Your_folder_name / node_modules / नींव-साइट / js

डिब्बा

  • Foundation.Box लाइब्रेरी में कुछ तरीके हैं।

  • js/foundation.util.box.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • या तो jQuery ऑब्जेक्ट या सादे जावास्क्रिप्ट तत्व दोनों तरीकों से पारित किए जा सकते हैं।

var dims = Foundation.Box.GetDimensions(element);

लौटाई गई वस्तु तत्व के आयाम को निर्दिष्ट करती है -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

  • समारोह ImNotTouchingYou शामिल है।

  • पारित तत्व के आधार पर, एक बूलियन मान लौटाया जाता है, जो या तो खिड़की के किनारे या वैकल्पिक या एक मूल तत्व के साथ संघर्ष होता है।

  • नीचे दिए गए लाइन में दो विकल्प दिए गए हैं अर्थात लेफ्टएंडराइट, टॉपएंडबॉटमऑनली का उपयोग केवल एक धुरी पर टकराव की पहचान करने के लिए किया जाता है।

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

कीबोर्ड

  • Foundation.Keyboard में कई विधियाँ हैं , जो कीबोर्ड इवेंट इंटरैक्शन को आसान बनाने में मदद करती हैं।

  • js/foundation.util.keyboard.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • ऑब्जेक्ट Foundation.Keyboard.keys में कुंजी / मान जोड़े होते हैं, जो कुंजी का उपयोग फ्रेमवर्क में अधिक बार किया जाता है।

  • जब भी कुंजी को दबाया जाता है तब Foundation.Keyboard.parseKey को एक स्ट्रिंग प्राप्त करने के लिए कहा जाता है। यह आपके स्वयं के कीबोर्ड इनपुट को प्रबंधित करने में मदद करता है।

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

var focusable = Foundation.Keyboard.findFocusable($('#content'));

  • HandleKey समारोह इस पुस्तकालय का एक मुख्य कार्य है।

  • इस विधि का उपयोग कीबोर्ड घटना को संभालने के लिए किया जाता है; जब भी किसी प्लगइन को उपयोगिता के साथ पंजीकृत किया जाता है तो उसे कॉल किया जा सकता है।

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.register समारोह कहा जा सकता है जब आप अपने स्वयं कुंजी बाइंडिंग का उपयोग करना चाहते हैं।

MediaQuery

  • MediaQuery लाइब्रेरी सभी उत्तरदायी सीएसएस तकनीक की एक रीढ़ है।

  • js/foundation.util.mediaQuery.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • Foundation.MediaQuery.atLeast ( 'बड़े') यदि स्क्रीन विस्तृत एक ब्रेकपाइंट के रूप में के रूप में कम से कम है की जाँच करने के लिए किया जाता है।

  • Foundation.MediaQuery.get ( 'मध्यम') एक ब्रेकप्वाइंट का मीडिया क्वेरी हो जाता है।

  • Foundation.MediaQuery.queries मीडिया क्वेरी की एक सरणी, फाउंडेशन breakpoints के लिए उपयोग करता है।

  • Foundation.MediaQuery.current वर्तमान ब्रेकप्वाइंट आकार की एक श्रृंखला है।

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

निम्न कोड विंडो पर मीडिया क्वेरी परिवर्तन को प्रसारित करता है।

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

गति और चाल

  • Foundation.Motion जावास्क्रिप्ट मोशन यूआई लाइब्रेरी के समान है, जो फाउंडेशन 6 में शामिल है। इसका उपयोग कस्टम सीएसएस बदलाव और एनिमेशन बनाने के लिए किया जाता है।

  • js/foundation.util.motion.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • Foundation.Move का उपयोग CSS3 समर्थित एनीमेशन को सरल और सुरुचिपूर्ण बनाने के लिए किया जाता है।

  • requestAnimationFrame();विधि ब्राउज़र को एक एनीमेशन करने के लिए कहता है; यह अनुरोध करता है कि ब्राउज़र को अगला रिपीट करने से पहले आपके एनीमेशन फ़ंक्शन को कॉल किया जाए।

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

जब एनीमेशन पूरा हो जाता है , समाप्त हो जाता है ।zf.animate निकाल दिया जाता है।

टाइमर और छवियाँ भरी हुई

ऑर्बिट फंक्शन टाइमर और लोडेड इमेज दोनों का उपयोग करता है। js/foundation.util.timerAndImageLoader.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

जब छवि पूरी तरह से लोड हो जाती है तो छवि-लोड की गई विधि आपके jQuery संग्रह में कॉलबैक फ़ंक्शन चलाती है।

Foundation.onImagesLoaded($images, callback);

टच

  • विधियों का उपयोग छद्म ड्रैग घटनाओं को जोड़ने और तत्वों को स्वाइप करने के लिए किया जाता है।

  • js/foundation.util.touch.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • AddTouch विधि मोबाइल उपकरणों के लिए स्लाइडर प्लगइन में घटनाओं को छूने के लिए बाँध तत्वों के लिए प्रयोग किया जाता है।

  • SpotSwipe विधि मोबाइल उपकरणों के लिए ऑर्बिट प्लगइन में कड़ी चोट घटनाओं के लिए तत्वों बांधता है।

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

ट्रिगर्स

  • यह चयनित तत्वों के लिए निर्दिष्ट घटना को ट्रिगर करता है।

  • js/foundation.util.triggers.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • ट्रिगर कई फाउंडेशन प्लगइन में उपयोग किए जाते हैं।

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

इस लाइब्रेरी में निम्नलिखित दो विधियों का उपयोग किया जाता है जैसे कि आकार बदलना और स्क्रॉल करना।

  • आकार () जब एक आकार बदलने घटना होती विधि आकार घटना से चलाता है।

  • पुस्तक () जब एक स्क्रॉल घटना होती विधि पुस्तक घटना से चलाता है।

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

कई तरह का

  • फाउंडेशन में मुख्य पुस्तकालय में कुछ विशेषताएं हैं, जिनका उपयोग कई स्थानों पर किया जाता है।

  • js/foundation.core.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

  • Foundation.GetYoDigits ([संख्या, नाम स्थान]) नामस्थान के साथ एक यादृच्छिक आधार -36 यूआईडी देता है। यह डिफ़ॉल्ट रूप से 6 वर्णों की स्ट्रिंग लंबाई देता है।

  • Foundation.getFnName (fn) एक जावास्क्रिप्ट फ़ंक्शन नाम देता है।

  • नींव संक्रमण तब होता है जब CSS संक्रमण पूरा हो जाता है।

मीडिया क्वेरीज़ CSS3 मॉड्यूल हैं जिसमें चौड़ाई, ऊँचाई, रंग जैसी मीडिया सुविधाएँ शामिल हैं और निर्दिष्ट स्क्रीन रिज़ॉल्यूशन के अनुसार सामग्री प्रदर्शित करती हैं।

ब्रेकडाउन रेंज बनाने के लिए फाउंडेशन निम्नलिखित मीडिया प्रश्नों का उपयोग करता है -

  • Small - किसी भी स्क्रीन के लिए इस्तेमाल किया।

  • Medium - इसका उपयोग 640 पिक्सल की स्क्रीन और व्यापक के लिए किया जाता है।

  • Large - इसका उपयोग 1024 पिक्सल और व्यापक स्क्रीन के लिए किया जाता है।

आप ब्रेकपॉइंट कक्षाओं का उपयोग करके स्क्रीन का आकार बदल सकते हैं । उदाहरण के लिए, आप छोटे आकार के स्क्रीन के लिए .small-6 वर्ग और मध्यम आकार के स्क्रीन के लिए .medium-4 वर्ग का उपयोग कर सकते हैं जैसा कि निम्नलिखित कोड स्निपेट में दिखाया गया है -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

ब्रेकपॉइंट बदलना

यदि आपका एप्लिकेशन फाउंडेशन के SASS संस्करण का उपयोग करता है, तो आप ब्रेकप्वाइंट बदल सकते हैं। आप ब्रेकपॉइंट्स नाम को नीचे दी गई सेटिंग फ़ाइल में $ ब्रेकप्वाइंट चर के तहत रख सकते हैं -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

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

$breakpoints-classes: (small medium large);

मान लीजिए, आप सीएसएस में .xlarge वर्ग का उपयोग करना चाहते हैं , और फिर इस वर्ग को सूची के अंत में जोड़ें जैसे कि नीचे दिखाया गया है -

$breakpoints-classes: (small medium large xlarge);

एस.ए.एस.एस.

ब्रेकपॉइंट मिक्सिन

  • आप @include के साथ ब्रेकपॉइंट () मिश्रण का उपयोग करके मीडिया के प्रश्नों को लिख सकते हैं ।

  • निम्नलिखित कोड प्रारूप में दिखाए गए अनुसार मीडिया क्वेरी के व्यवहार को बदलने के लिए ब्रेकपॉइंट मान के साथ नीचे या केवल कीवर्ड का उपयोग करें -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

आप डिवाइस अभिविन्यास या पिक्सेल घनत्व के लिए तीन मीडिया क्वेरीज़ पोर्ट्रेट , लैंडस्केप और रेटिना का उपयोग कर सकते हैं और वे चौड़ाई आधारित मीडिया क्वेरी नहीं हैं।

विराम बिंदु

  • आप आंतरिक फ़ंक्शन का उपयोग करके ब्रेकपॉइंट () मिश्रण की कार्यक्षमता का उपयोग कर सकते हैं ।

  • ब्रेकपाइंट () कार्यक्षमता सीधे इस्तेमाल किया जा सकता खुद मीडिया के प्रश्नों लिखने के लिए -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

जावास्क्रिप्ट

मीडिया क्वेरी के साथ काम करना

  • फाउंडेशन जावास्क्रिप्ट नीचे दिए गए अनुसार निर्दिष्ट रूप से Foundation.MediaQuery वस्तु पर वर्तमान ब्रेकपॉइंट नाम तक पहुंचने के लिए MediaQuery.current फ़ंक्शन प्रदान करता है -

Foundation.MediaQuery.current

  • MediaQuery.current समारोह को प्रदर्शित करता है छोटा सा , मध्यम , बड़े वर्तमान ब्रेकप्वाइंट नामों के रूप में।

  • आप नीचे दिखाए गए अनुसार MediaQuery.get फ़ंक्शन का उपयोग करके ब्रेकपॉइंट की मीडिया क्वेरी प्राप्त कर सकते हैं -

Foundation.MediaQuery.get('small')

सैस संदर्भ

चर

निम्न तालिका एसएएस चर को सूचीबद्ध करती है, जिसका उपयोग घटक की डिफ़ॉल्ट शैलियों को अनुकूलित करने के लिए किया जा सकता है -

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$breakpoints

यह एक ब्रेकपॉइंट नाम है जिसे ब्रेकपॉइंट () मिक्सकिन का उपयोग करके मीडिया के प्रश्नों को लिखने के लिए इस्तेमाल किया जा सकता है ।

 नक्शा

छोटा: 0px

माध्यम: 640 पीएक्स

बड़ा: 1024px

xlarge: 1200px

xxlarge: 1440px
2

$breakpoint-classes

आप $ ब्रेकपॉइंट-वर्ग चर को संशोधित करके सीएसएस वर्ग आउटपुट को बदल सकते हैं ।

 सूची छोटा मध्यम बड़ा

mixins

फ़ाउंडेशन, घटकों के लिए अपनी CSS श्रेणी की संरचना बनाने के लिए शैलियों का एक समूह बनाता है।

BREAKPOINT

यह मीडिया क्वेश्चन बनाने के लिए ब्रेकपॉइंट () मिक्सकिन का उपयोग करता है और इसमें निम्नलिखित गतिविधियाँ शामिल हैं -

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

  • यदि आप पिक्सेल मूल्य का उपयोग कर रहे हैं, तो इसे $ रेम-बेस का उपयोग करके एम मूल्य पर परिवर्तित करें ।

  • यदि रेम मान पारित किया जाता है, तो यह अपनी इकाई को एम में बदल देता है।

  • यदि आप एम वैल्यू का उपयोग कर रहे हैं, तो इसका उपयोग किया जा सकता है।

निम्न तालिका ब्रेकपॉइंट द्वारा उपयोग किए जाने वाले पैरामीटर को निर्दिष्ट करती है -

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$value

यह ब्रेकपॉइंट नाम, px, रेम या ईएम मानों का उपयोग करके मूल्यों को संसाधित करता है।

 कीवर्ड या संख्या कोई नहीं

कार्यों

BREAKPOINT

यह मिलान इनपुट मान के साथ मीडिया क्वेरी बनाने के लिए ब्रेकपॉइंट () मिक्सिन का उपयोग करता है ।

निम्न तालिका ब्रेकपॉइंट द्वारा उपयोग किए जाने वाले संभावित इनपुट मान को निर्दिष्ट करती है -

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$val

यह ब्रेकपॉइंट नाम, पीएक्स, रेम या एम मूल्यों का उपयोग करके मूल्यों को संसाधित करता है।

 कीवर्ड या संख्या छोटा

जावास्क्रिप्ट संदर्भ

कार्यों

दो प्रकार के कार्य हैं -

  • .atLeast- यह स्क्रीन को चेक करता है। यह विराम बिंदु के रूप में कम से कम चौड़ा होना चाहिए।

  • .get - इसका उपयोग ब्रेकपॉइंट की मीडिया क्वेरी प्राप्त करने के लिए किया जाता है।

निम्न तालिका उपरोक्त कार्यों द्वारा प्रयुक्त पैरामीटर को निर्दिष्ट करती है -

अनु क्रमांक। नाम और विवरण प्रकार
1

size

यह निर्दिष्ट कार्यों के लिए ब्रेकपॉइंट का नाम क्रमशः जांचता है और प्राप्त करता है।

 तार

विवरण

फाउंडेशन ग्रिड सिस्टम पेज के माध्यम से 12 कॉलम तक मापता है। ग्रिड सिस्टम का उपयोग पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पृष्ठ लेआउट बनाने के लिए किया जाता है जो आपकी सामग्री को घर देते हैं।

ग्रिड विकल्प

निम्न तालिका संक्षेप में बताती है कि कैसे फाउंडेशन ग्रिड प्रणाली कई उपकरणों में काम करती है।

छोटे उपकरण फ़ोन (<640px) मध्यम उपकरण टैबलेट (> = 640px) बड़े उपकरण लैपटॉप और डेस्कटॉप (> = 1200px)
कठोर व्यवहार हर समय क्षैतिज टूटने के लिए क्षैतिज, ऊपर शुरू करने के लिए ढह गया टूटने के लिए क्षैतिज, ऊपर शुरू करने के लिए ढह गया
कक्षा उपसर्ग .small- * .medium- * ।विशाल-*
स्तंभों की संख्या 12 12 12
Nestable हाँ हाँ हाँ
ऑफसेट हाँ हाँ हाँ
स्तंभ आदेश हाँ हाँ हाँ

एक फाउंडेशन ग्रिड की बुनियादी संरचना

फाउंडेशन ग्रिड की मूल संरचना निम्नलिखित है -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

  • स्तंभों के क्षैतिज समूह बनाने के लिए सबसे पहले एक पंक्ति वर्ग बनाएं।

  • सामग्री को कॉलम के भीतर रखा जाना चाहिए, और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।

  • ग्रिड कॉलम आप उपलब्ध बारह बार उपलब्ध कॉलमों की संख्या निर्दिष्ट करके बनाए जाते हैं। उदाहरण के लिए, चार बराबर स्तंभों के लिए हम .large-3 का उपयोग करेंगे

फाउंडेशन ग्रिड प्रणाली में प्रयुक्त तीन वर्ग निम्नलिखित हैं -

अनु क्रमांक। बुनियादी ग्रिड कक्षाएं और विवरण
1 विशाल

बड़े * कक्षाएं बड़े उपकरणों के लिए प्रयोग किया जाता है।
2 मध्यम

मध्यम * वर्ग मध्यम उपकरणों के लिए प्रयोग किया जाता है।
3 छोटा

छोटे- * वर्ग का उपयोग छोटे उपकरणों के लिए किया जाता है।

उन्नत ग्रिड

फाउंडेशन में उपयोग किए जाने वाले उन्नत ग्रिड प्रारूप निम्नलिखित हैं।

अनु क्रमांक। उन्नत ग्रिड और विवरण
1 संयुक्त स्तंभ / पंक्ति

स्तंभ और पंक्ति कक्षाएं एक कंटेनर के रूप में उपयोग करने के लिए पूरी चौड़ाई स्तंभ प्राप्त करने के लिए एक ही तत्व पर किया जाता है।
2 घोंसला करने की क्रिया

हम ग्रिड कॉलम को दूसरे कॉलम के अंदर घोंसला दे सकते हैं।
3 ऑफसेट

बड़े-ऑफसेट- * या छोटे-ऑफसेट- * वर्ग का उपयोग करके , आप कॉलम को दाईं ओर ले जा सकते हैं।
4 अपूर्ण पंक्तियाँ

जब पंक्तियाँ 12 तक के कॉलम को शामिल नहीं करती हैं, तो फ़ाउंडेशन अंतिम तत्व को दाईं ओर स्वचालित रूप से फ़्लोट करता है।
5 ढहना / अनियंत्रित पंक्तियाँ

मीडिया क्वेरी आकार का उपयोग करके, पेडिंग को दिखाने के लिए पंक्ति तत्व में ढहने और अनकैप्ड क्लास को शामिल किया गया है।
6 केंद्रित कॉलम

कॉलम में छोटे वर्ग को शामिल करके , आप केंद्र में कॉलम बना सकते हैं।
7 स्रोत आदेश

स्रोत आदेश वर्ग का उपयोग ब्रेकपॉइंट के बीच स्तंभों को स्थानांतरित करने के लिए किया जाता है।
8 ब्लॉक ग्रिड्स

ब्लॉक-ग्रिड का उपयोग सामग्री को विभाजित करने के लिए किया जाता है।

शब्दार्थ भवन

एसएएसएस मिश्रणों के सेट का उपयोग करके, एक ग्रिड सीएसएस उत्पन्न होता है जिसका उपयोग आपके स्वयं के सिमेंटिक ग्रिड के निर्माण के लिए किया जाता है। अधिक जानकारी के लिए यहां क्लिक करें

SASS संदर्भ

फाउंडेशन में इस्तेमाल ग्रिड के लिए SASS संदर्भ निम्नलिखित हैं।

अनु क्रमांक। मूल ग्रिड और विवरण
1 चर

सैस चर का उपयोग करके हम इस घटक की डिफ़ॉल्ट शैलियों को संशोधित कर सकते हैं।
2 mixins

अंतिम सीएसएस आउटपुट मिक्सकिन का उपयोग करके बनाया गया है।

ग्रिड फ्लेक्स डिस्प्ले प्रॉपर्टी पर निर्भर करता है। इसमें कई विशेषताएं शामिल हैं जो फ्लेक्सबॉक्स के साथ उपलब्ध हैं, जैसे स्वचालित स्टैकिंग, स्रोत ऑर्डरिंग, ऊर्ध्वाधर संरेखण और क्षैतिज संरेखण।

ब्राउज़र का समर्थन

फ्लेक्स ग्रिड क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर 10+, सफारी 6+, एंड्रॉइड 4+ और आईओएस 7+ में समर्थित है।

निम्न तालिका विवरण के साथ फ्लेक्स ग्रिड की विशेषताओं का वर्णन करती है।

अनु क्रमांक। सुविधाएँ और विवरण
1 आयात कर रहा है

इसमें डिफ़ॉल्ट सीएसएस का उपयोग करने के लिए फ्लेक्स ग्रिड के लिए निर्यात मिश्रण शामिल है।
2 मूल बातें

फ्लेक्स ग्रिड संरचना फ्लोट ग्रिड के समान है।
3 उन्नत आकार का

यदि आकार देने वाले वर्ग को कॉलम में शामिल नहीं किया जाता है, तो यह स्वयं को विस्तारित करता है और कॉलम में शेष स्थान को भरता है।
4 उत्तरदायी समायोजन

यदि फ्लेक्स ग्रिड में कॉलम का स्पष्ट आकार नहीं दिया गया है, तो यह कॉलमों को ऑटो-आकार देगा
5 स्तंभ संरेखण

फ्लेक्स ग्रिड कॉलम को मूल पंक्ति में क्षैतिज या ऊर्ध्वाधर अक्ष में जोड़ा जा सकता है।
6 स्रोत आदेश

स्रोत आदेश स्क्रीन के विभिन्न आकार में कॉलम को पुनर्व्यवस्थित करने में मदद करता है।
7 सैस संदर्भ

SASS (Syntactically Awesome Stylesheet) एक CSS प्री-प्रोसेसर है जो CSS के साथ पुनरावृत्ति को कम करने में मदद करता है और समय बचाता है।

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

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

अनु क्रमांक। फार्म तत्व और विवरण
1 फॉर्म बेसिक्स

रूपों का निर्माण आसान और बहुत लचीला है, जो मानकीकृत फॉर्म तत्वों और शक्तिशाली ग्रिड सिस्टम के संयोजन के साथ बनाया गया है।
2 मदद पाठ

इसका उपयोग उपयोगकर्ता को तत्व के उद्देश्य के बारे में सूचित करने के लिए किया जाता है और आमतौर पर इसे एक क्षेत्र के नीचे रखा जाता है।
3 लेबल पोजिशनिंग

आप अपने इनपुट के बाएँ या दाएँ लेबल लगा सकते हैं।
4 इनलाइन लेबल और बटन

अतिरिक्त पाठ या नियंत्रण एक इनपुट फ़ील्ड के बाएं / दाएं से जुड़ा जा सकता है।
5 कस्टम नियंत्रण

कस्टम कंट्रोल जैसे डेट पिकर, स्विच या स्लाइडर्स को इसे एक्सेस करने के लिए कुछ ध्यान देने की आवश्यकता होती है।
6 SASS संदर्भ

आप SASS संदर्भ का उपयोग करके घटकों की शैलियों को बदल सकते हैं।

विवरण

  • फाउंडेशन डिवाइस ओरिएंटेशन (पोर्ट्रेट और लैंडस्केप) या स्क्रीन साइज (छोटा, मध्यम, बड़ा या ज़ेलर स्क्रीन) के आधार पर तत्वों को दिखाने या छिपाने के लिए दृश्यता कक्षाओं का उपयोग करता है।

  • यह उपयोगकर्ता को ब्राउज़िंग वातावरण के आधार पर तत्वों का उपयोग करने की अनुमति देता है।

निम्न तालिका फाउंडेशन के दृश्यता वर्गों को सूचीबद्ध करती है, जो उनके ब्राउज़िंग वातावरण के आधार पर तत्वों को नियंत्रित करते हैं -

अनु क्रमांक। दृश्यता कक्षा और विवरण
1 स्क्रीन साइज द्वारा दिखाएं

यह .show क्लास का उपयोग करके डिवाइस पर आधारित तत्वों को दिखाता है ।
2 स्क्रीन साइज द्वारा छिपाएं

यह .hide वर्ग का उपयोग करके डिवाइस के आधार पर तत्वों को छुपाता है ।

फाउंडेशन कुछ वर्गों का समर्थन करता है जहां आप .hide और .inv वर्गों का उपयोग करके सामग्री छिपा सकते हैं और पृष्ठ पर कुछ भी प्रदर्शित नहीं करते हैं।

ओरिएंटेशन डिटेक्शन

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

सरल उपयोग

निम्न तालिका स्क्रीन पाठकों के लिए पहुंच तकनीकों को सूचीबद्ध करती है जो स्क्रीन पाठकों द्वारा पढ़ने योग्य बनाते समय सामग्री को छुपाती है -

अनु क्रमांक। अभिगम्यता वर्ग और विवरण
1 स्क्रीन पाठकों के लिए दिखाएँ

यह स्क्रीन रीडर्स को पढ़ने से रोकने के दौरान कंटेंट को छिपाने के लिए शो-फॉर-एसआर क्लास का उपयोग करता है।
2 स्क्रीन पाठकों के लिए छिपाएँ

यह aria- छिपी विशेषता का उपयोग करता है जो पाठ को दृश्यमान बनाता है लेकिन स्क्रीन रीडर द्वारा पढ़ा नहीं जा सकता है।
3 लिंक बनाना छोड़ें

स्क्रीन रीडर आपकी साइट की सामग्री पर नेविगेशन प्राप्त करने के लिए एक स्किप लिंक बनाएगा।

सैस संदर्भ

फाउंडेशन सीएसएस आउटपुट को प्रदर्शित करने के लिए निम्नलिखित मिश्रणों का उपयोग करता है, जो आपके घटकों के लिए स्वयं के वर्ग संरचना के निर्माण की अनुमति देता है -

अनु क्रमांक। मिश्रण और विवरण पैरामीटर प्रकार
1

show-for

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

 $ आकार कीवर्ड
2

show-for-only

डिफ़ॉल्ट रूप से, यह एक तत्व को छुपाता है और इसे ब्रेकपॉइंट के भीतर प्रदर्शित करता है।

 $ आकार कीवर्ड
3

hide-for

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

 $ आकार कीवर्ड
4

hide-for-only

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

 $ आकार कीवर्ड

इन सभी मिश्रणों का डिफ़ॉल्ट मूल्य किसी के लिए भी निर्धारित नहीं किया जाएगा ।

विवरण

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

निम्न तालिका फाउंडेशन में प्रयुक्त टाइपोग्राफी के विभिन्न प्रकारों को सूचीबद्ध करती है -

अनु क्रमांक। टाइपोग्राफी और विवरण
1 पैराग्राफ

पैराग्राफ विभिन्न फ़ॉन्ट आकार, हाइलाइट किए गए शब्द, लाइन ऊंचाई आदि के साथ परिभाषित वाक्यों का एक समूह है।
2 हैडर

यह एच 1 से एच 6 तक एचटीएमएल हेडिंग को परिभाषित करता है।
3 लिंक

यह एक हाइपरलिंक बनाता है जो पाठ या छवि पर क्लिक करने पर एक और दस्तावेज़ खोलता है।
4 परकार

इसका उपयोग <hr> टैग का उपयोग करके अनुभागों के बीच एक विराम देने के लिए किया जाता है।
5 आदेशित और अनियोजित सूचियाँ

फाउंडेशन समर्थित सूचियों, चीजों को सूचीबद्ध करने के लिए अनियंत्रित सूचियों का समर्थन करता है।
6 परिभाषा सूची

नाम सूची जोड़े को प्रदर्शित करने के लिए परिभाषा सूचियों का उपयोग किया जाता है।
7 ब्लॉक उद्धरण

यह पाठ के ब्लॉक का प्रतिनिधित्व करता है, जो सामान्य से बहुत बड़ा परिभाषित करता है।
8 संकेतन और कोड

संक्षिप्तिकरण शब्द या वाक्यांश का एक छोटा शब्द परिभाषित करता है और कोड कोड का एक टुकड़ा दर्शाता है।
9 कीस्ट्रोक

इसका उपयोग किसी विशिष्ट कार्य को करने के लिए किया जाता है।
10 सरल उपयोग

फाउंडेशन पेज की सामग्री तक पहुंचने के लिए कुछ दिशानिर्देश प्रदान करता है।

सैस संदर्भ

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

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$header-font-family

शीर्ष लेख तत्वों के लिए फ़ॉन्ट परिवार निर्दिष्ट करता है।

 स्ट्रिंग या सूची $ शरीर-font-family
2

$header-font-weight

हेडर का फ़ॉन्ट वजन निर्दिष्ट करता है।

 तार $ वैश्विक वजन सामान्य से
3

$header-font-style

हेडर की फ़ॉन्ट शैली प्रदान करता है।

 तार साधारण
4

$font-family-monospace

फॉन्‍ट स्‍टैक का उपयोग उन तत्‍वों के लिए किया जाता है जो कि कोड नमूने के रूप में मोनोसप्‍ट प्रकार का उपयोग करते हैं।

 स्ट्रिंग या सूची कॉन्सोलस, 'लिबरेशन मोनो', कूरियर, मोनोस्पेस
5

$header-sizes

शीर्षकों के स्क्रीन आकार को परिभाषित करता है और प्रत्येक कुंजी एक ब्रेकपॉइंट है, और प्रत्येक मान शीर्षकों के आकार का एक मानचित्र है।

 नक्शा 
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

हेडर का रंग प्रदान करता है।

 रंग इनहेरिट
7

$header-lineheight

हेडर की लाइन ऊंचाई को परिभाषित करता है।

 संख्या 1.4
8

$header-margin-bottom

हेडर के नीचे मार्जिन प्रदान करता है।

 संख्या 0.5rem
9

$header-text-rendering

पाठ प्रतिपादन के लिए विधि को परिभाषित करता है।

 तार optimizeLegibility
10

$small-font-size

<Small> तत्वों के लिए फ़ॉन्ट आकार निर्दिष्ट करता है।

 संख्या 80%
1 1

$paragraph-margin-bottom

पैराग्राफ के निचले मार्जिन को निर्दिष्ट करता है।

 संख्या 1rem
12

$paragraph-text-rendering

पाठ रेंडरिंग पैराग्राफ के लिए तरीके।

 तार optimizeLegibility
13

$code-color

नमूनों को कोड करने के लिए पाठ रंग प्रदान करता है।

 रंग $ काला
14

$code-font-family

कोड नमूने के लिए फ़ॉन्ट परिवार प्रदान करता है।

 स्ट्रिंग या सूची $ Font-family-monospace
15

$code-border

कोड के चारों ओर सीमा निर्दिष्ट करता है।

 सूची 1px ठोस $ मध्यम-ग्रे
16

$code-padding

पाठ के चारों ओर पैडिंग निर्दिष्ट करता है।

 संख्या या सूची रेम-कैल्क (2 5 1)
17

$anchor-color

लिंक के लिए डिफ़ॉल्ट रंग।

 रंग $ प्राथमिक रंग
18

$anchor-color-hover

होवर पर लिंक के लिए डिफ़ॉल्ट रंग निर्दिष्ट करता है।

 रंग पैमाने-रंग ($ लंगर-रंग, $ लपट: -14%)
19

$anchor-text-decoration

लिंक के लिए डिफ़ॉल्ट पाठ सजावट।

 तार कोई नहीं
20

$anchor-text-decoration-hover

होवर पर लिंक के लिए डिफ़ॉल्ट पाठ सजावट।

 तार कोई नहीं
21

$hr-width

विभक्त की अधिकतम चौड़ाई को परिभाषित करता है।

 संख्या $ वैश्विक-चौड़ाई
22

$hr-border

विभक्त के लिए डिफ़ॉल्ट सीमा निर्दिष्ट करता है।

 सूची 1px ठोस $ मध्यम-ग्रे
23

$hr-margin

विभक्त के लिए डिफ़ॉल्ट मार्जिन।

 संख्या या सूची रेम-कैल्क (20) ऑटो
24

$list-lineheight

यह एक सूची में वस्तुओं के लिए लाइन ऊंचाई को परिभाषित करता है।

 संख्या $ पैरा-lineheight
25

$list-style-type

अनियंत्रित सूचियों के लिए बुलेट प्रकार प्रदान करता है।

 तार डिस्क
26

$list-style-position

यह अनियंत्रित सूचियों पर गोलियों के लिए स्थिति को परिभाषित करता है।

 तार बाहर
27

$list-side-margin

बाईं ओर (या दाएं) मार्जिन को परिभाषित करता है।

 संख्या 1.25rem
28

$defnlist-term-weight

<Dt> तत्वों के लिए फ़ॉन्ट वजन प्रदान करता है।

 तार $ वैश्विक वजन-बोल्ड
29

$defnlist-term-margin-bottom

<Dt> और <dd> तत्वों के बीच रिक्ति प्रदान करता है।

 संख्या 0.3rem
30

$blockquote-color

यह <blockquote> तत्वों का पाठ रंग लागू करता है।

 रंग $ काले ग्रे
31

$blockquote-padding

एक <blockquote> तत्वों के अंदर पैडिंग प्रदान करता है।

 संख्या या सूची रेम-कैल्क (९ २० ० १ ९)
32

$blockquote-border

यह <blockquote> तत्वों के लिए साइड बॉर्डर देता है।

 सूची 1px ठोस $ मध्यम-ग्रे
33

$cite-font-size

<Cite> तत्वों के लिए फ़ॉन्ट आकार को परिभाषित करता है।

 संख्या रेम-calc (13)
34

$cite-color

<cite>तत्वों के लिए पाठ रंग प्रदान करता है ।

 रंग $ काले ग्रे
35

$keystroke-font

<Kbd> तत्वों के लिए फ़ॉन्ट परिवार को परिभाषित करता है।

 स्ट्रिंग या सूची $ Font-family-monospace
36

$keystroke-color

<Kbd> तत्वों के लिए पाठ रंग को परिभाषित करता है।

 रंग $ काला
37

$keystroke-background

<Kbd> तत्वों के लिए पृष्ठभूमि रंग प्रदान करता है।

 रंग $ प्रकाश ग्रे
38

$keystroke-padding

<Kbd> तत्वों के लिए पैडिंग निर्दिष्ट करता है।

 संख्या या सूची रेम-कैल्क (2 4 0)
39

$keystroke-radius

<Kbd> तत्वों के लिए सीमा त्रिज्या प्रदर्शित करता है।

 संख्या या सूची $ वैश्विक-त्रिज्या
40

$abbr-underline

<Abbr> तत्वों के लिए नीचे की सीमा शैली प्रदान करता है।

 सूची 1px बिंदीदार $ काला

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

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

अनु क्रमांक। टाइपोग्राफी सहायक और विवरण
1 पाठ्य संरेखण

यह तत्व के पाठ संरेखण को बदलने में मदद करता है जैसे कि बाएं , दाएं , केंद्र और औचित्य ।
2 सबहेडर

उप-शीर्षकों को .subheader वर्ग का उपयोग करके किसी भी शीर्ष लेख तत्व में जोड़ा जा सकता है ।
3 लीड पैरा

यह सामान्य पाठ की तुलना में पाठ का काफी बड़ा ब्लॉक है, जिसका उपयोग विज्ञापन या अन्य वर्णनात्मक पाठ के लिए किया जा सकता है।
4 अन-बुलेटेड सूची

डिफ़ॉल्ट रूप से, <ul> फाउंडेशन में एक बुलेटेड सूची है। गोलियों को हटाने के लिए, आप .no-बुलेट क्लास का उपयोग कर सकते हैं ।
5 आंकड़े

जब भी आप डैशबोर्ड के साथ काम कर रहे होते हैं, तो आपको कुछ महत्वपूर्ण नंबरों को उजागर करने की आवश्यकता होती है। आप .stat वर्ग का उपयोग करके इसे प्राप्त कर सकते हैं ।

सैस संदर्भ

चर

निम्न तालिका प्रोजेक्ट की सेटिंग फ़ाइल में SASS चर को सूचीबद्ध करती है जो घटक की डिफ़ॉल्ट शैलियों को अनुकूलित करने के लिए बनाती है।

अनु क्रमांक। नाम और विवरण प्रकार डिफ़ॉल्ट मान
1

$lead-font-size

डिफ़ॉल्ट रूप से लीड पैराग्राफ के लिए फ़ॉन्ट आकार।

 संख्या $ वैश्विक-फ़ॉन्ट-आकार * 1.25
2

$lead-lineheight

डिफ़ॉल्ट रूप से लीड पैराग्राफ के लिए लाइन ऊंचाई।

 तार 1.6
3

$subheader-lineheight

Subheader की डिफ़ॉल्ट पंक्ति ऊंचाई।

 संख्या 1.4
4

$subheader-color

Subheader का डिफ़ॉल्ट फ़ॉन्ट रंग।

 रंग $ काले ग्रे
5

$subheader-font-weight

Subheader का डिफ़ॉल्ट फ़ॉन्ट वजन।

 तार $ वैश्विक वजन सामान्य से
6

$subheader-margin-top

Subheader का डिफ़ॉल्ट शीर्ष मार्जिन।

 संख्या 0.2rem
7

$subheader-margin-bottom

Subheader का डिफ़ॉल्ट निचला मार्जिन।

 संख्या 0.5rem
8

$stat-font-size

स्थैतिक संख्या का डिफ़ॉल्ट फ़ॉन्ट आकार

 संख्या 2.5rem

इस अध्याय में, हम इस बारे में अध्ययन करेंगे basic controls। फाउंडेशन बटन , स्लाइडर और स्विच जैसे बुनियादी नियंत्रण प्रदान करता है ।

निम्न तालिका फाउंडेशन में प्रयुक्त बुनियादी नियंत्रणों को सूचीबद्ध करती है।

अनु क्रमांक। मूल नियंत्रण और विवरण
1 बटन

फाउंडेशन कई बटन शैलियों का समर्थन करता है जिन्हें आपकी आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है।
2 बटन समूह

वे संबंधित कार्रवाई तत्वों के लिए कंटेनर हैं। जब एक बार में क्रियाओं का समूह प्रदर्शित होता है तो यह ठीक काम करता है।
3 बंद करें बटन

क्लोज बटन का उपयोग तब किया जाता है, जब आप उस पर क्लिक करके कुछ दूर जाना चाहते हैं।
4 स्लाइडर

एक सीमा के अंदर कुछ मान सेट करने के लिए स्लाइडर बहुत उपयोगी होते हैं।
5 स्विच

यह आपको उस पर क्लिक करके स्विच को बंद या चालू करने की अनुमति देता है।

विवरण

फाउंडेशन नेविगेशन तत्वों को स्टाइल करने के लिए कुछ अलग विकल्प प्रदान करता है। कई सरल नेविगेशन पैटर्न बंडल किए गए हैं; इसे मजबूत उत्तरदायी नेविगेशन समाधान के रूप में एकीकृत किया जा सकता है।

निम्न तालिका वर्णन के साथ-साथ विभिन्न प्रकार के नेविगेशन का वर्णन करती है।

अनु क्रमांक। टाइप और विवरण
1 नेविगेशन अवलोकन

नेविगेशन में अन्य अनुभाग के लिंक होते हैं और कई नेविगेशन पैटर्न होते हैं।
2 मेन्यू

कई नेविगेशन घटकों के निर्माण के लिए मेनू का उपयोग किया जाता है।
3 ड्रॉप डाउन मेनू

मुख्य मेनू के नीचे सबमेनस बनाने के लिए ड्रॉपडाउन मेनू प्लगइन का उपयोग किया जाता है।
4 ड्रिलडाउन मेनू

ड्रिलडाउन मेनू प्लगइन का उपयोग स्लाइडर प्रारूप में मुख्य मेनू में सबमेनस बनाने के लिए किया जाता है।
5 अकॉर्डियन मेनू

यह समझौते के प्रभाव के साथ बंधनेवाला मेनू प्रदर्शित करता है और Accordion मेनू प्लगइन का उपयोग कर ऑटो पतन के लिए समर्थन प्रदान करता है।
6 शीश पट्टी

शीर्ष बार स्क्रीन के विभिन्न आकार पर आसानी से जटिल नेविगेशन बार प्रदर्शित करने में मदद करता है।
7 उत्तरदायी नेविगेशन

उत्तरदायी मेनू प्लगइन स्क्रीन के विभिन्न आकारों में मेनू को आवंटित करता है।
8 मैगलन

मैगलन एक नेविगेशन बनाता है, जो एक निश्चित स्थिति में है; यह स्क्रॉल स्थिति के आधार पर किसी पृष्ठ पर नेविगेशन सूची को स्वचालित रूप से ट्रैक करता है।
9 पृष्ठ पर अंक लगाना

पृष्ठांकन, एक अनियंत्रित सूची बूटस्ट्रैप द्वारा अन्य इंटरफ़ेस तत्वों की तरह संभाला जाता है।
10 ब्रेडक्रम्ब्स

एक ब्रेडक्रंब नेविगेशनल पदानुक्रम के भीतर एक साइट के लिए वर्तमान स्थान को निर्दिष्ट करता है।

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

निम्न तालिका में फाउंडेशन में इस्तेमाल होने वाले कुछ कंटेनरों की सूची दी गई है -

अनु क्रमांक। कंटेनर और विवरण
1 अकॉर्डियन

Accordions में वर्टिकल टैब होते हैं जिनका उपयोग वेबसाइटों पर बड़ी मात्रा में डेटा के विस्तार और पतन के लिए किया जाता है।
2 पुकारें

यह सामग्री को घटक के अंदर रखता है।
3 ड्रापडाउन-शीशे

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

यह कुछ वस्तुओं के साथ मीडिया ऑब्जेक्ट्स जैसे कि चित्र, वीडियो, ब्लॉग टिप्पणी आदि को जोड़ता है।
5 ऑफ कैनवास

यह दृश्य क्षेत्र से नेविगेशन मेनू सेट करता है और मुख्य सामग्री प्रदर्शित करता है।
6 पता चलता है-मोडल

फाउंडेशन का उपयोग कर मोडल संवाद या पॉप अप विंडोज़ बनाने की अनुमति देता है प्रकट वर्ग।
7 टेबल

फाउंडेशन टेबुल प्रारूप में डेटा प्रदर्शित करने के लिए लेआउट प्रदान करता है।
8 टैब

यह एक नेविगेशन आधारित टैब है जो पेज को छोड़े बिना कंटेंट को अलग-अलग पैन में प्रदर्शित करता है।

इस अध्याय में, हम फाउंडेशन में मीडिया के बारे में अध्ययन करेंगे । फाउंडेशन में कई मीडिया प्रकार होते हैं जैसे फ्लेक्स वीडियो , लेबल , ऑर्बिट , प्रोग्रेस बार और टूलटिप । निम्न तालिका सभी मीडिया प्रकारों को सूचीबद्ध करती है।

अनु क्रमांक। मीडिया प्रकार और विवरण
1 फ्लेक्स वीडियो

इसका उपयोग स्क्रीन के आकार के बावजूद सही पहलू अनुपात रखने के लिए एक फ्लेक्स वीडियो कंटेनर में वीडियो एम्बेड करने के लिए किया जाता है।
2 लेबल

इसका उपयोग इनलाइन स्टाइलिंग के लिए किया जा सकता है जिसे विशिष्ट अनुभाग को लागू करने या मेटाडेटा संलग्न करने के लिए शरीर में डाला जा सकता है।
3 की परिक्रमा

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

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

इसका उपयोग किसी पृष्ठ पर किसी शब्द या क्रिया के लिए अतिरिक्त जानकारी प्रदर्शित करने के लिए किया जाता है।

विवरण

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

निम्न तालिका विवरण के साथ विभिन्न प्रकार के प्लगइन्स का वर्णन करती है।

अनु क्रमांक। टाइप और विवरण
1 रहना

आवश्यक विशेषताओं और पैटर्नों का उपयोग करके मूल एपीआई के साथ HTML5 फॉर्म वैलिडेशन लाइब्रेरी में एबाइड का उपयोग किया जाता है।
2 तुल्यकारक

इक्वलाइज़र आपके पेज पर समान ऊँचाई के साथ कई सामग्री बनाने का एक तरीका है।
3 लेन-देन

इसका उपयोग उपयोगकर्ता के डिवाइस के अनुसार उत्तरदायी सामग्री को लोड करने के लिए किया जाता है।
4 Toggler

टॉगल का उपयोग एक सेटिंग से दूसरे पर स्विच करने के लिए किया जाता है।
5 चिपचिपा

स्टिकी प्लगइन का उपयोग वेबसाइट में एक निरंतर सामग्री या छवि बनाने के लिए किया जाता है।

फाउंडेशन एस.ए.एस.एस. उपयोगिता कार्यों का एक सेट है, जो के साथ इस्तेमाल किया जा सकता प्रदान करता है util , रंग , चयनकर्ता , यूनिट , मूल्य और कई और अधिक।

आप निम्न लाइन की कोड का उपयोग करके एक समय में सभी उपयोगिता फ़ाइलों को आयात कर सकते हैं -

@import 'util/util';

आप नीचे दी गई जानकारी के अनुसार व्यक्तिगत उपयोगिता की फाइलें भी आयात कर सकते हैं -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

सैस संदर्भ

आप निम्न SASS फ़ंक्शन का उपयोग करके घटकों की शैली बदल सकते हैं।

अग्रभूमि

यह पृष्ठभूमि के रंग के आधार पर तत्वों को अग्रभूमि रंग प्रदान करता है। यह विभिन्न प्रकार के मापदंडों को निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -

foreground($color, $yes, $no, $threshold)

उपरोक्त पैरामीटर निम्नलिखित तालिका में निर्दिष्ट हैं -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$color

यह रंग की हल्कापन की जाँच करता है।

 रंग कोई नहीं
2

$yes

यदि रंग हल्का है, तो यह $ हां रंग देता है।

 रंग $ काला
3

$no

यदि रंग गहरा है, तो यह $ नो रंग देता है।

 रंग $ सफेद
4

$threshold

यह लपट की दहलीज का प्रतिनिधित्व करता है।

 प्रतिशत 60%

स्मार्ट पैमाने पर

यह अपनी चमक के अनुसार तत्वों के लिए उपयुक्त रंग प्रदान करता है। यह उपयुक्त रंग निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -

smart-scale($color, $scale, $threshold)

ऊपर दिए गए पैरामीटर निम्नलिखित तालिका में दिए गए हैं -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$color

इसका उपयोग रंग को स्केल करने के लिए किया जाता है।

 रंग कोई नहीं
2

$scale

यह प्रतिशत को ऊपर या नीचे करने के लिए निर्दिष्ट करता है।

 प्रतिशत 5%
3

$threshold

यह लपट की दहलीज का प्रतिनिधित्व करता है।

 प्रतिशत 40%

पाठ आदानों

यह टेक्स्ट इनपुट प्रकार का उपयोग करते समय चयनकर्ता बनाता है। यह इनपुट प्रकारों को निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -

text-inputs($types)

यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$types

यह चयनकर्ता बनाने के लिए कई प्रकार के पाठ इनपुट प्रकार प्रदान करता है।

 रंग -

पट्टी इकाई

यह इकाई को मान से निकालता है और केवल संख्या देता है। यह इकाई को मान से हटाने के लिए निम्नलिखित प्रारूप का उपयोग करता है -

strip-unit($num)

यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$num

जब आप इकाई को मान से हटाते हैं तो यह संख्या निर्दिष्ट करता है।

 रंग कोई नहीं

रेम-calc

यह रेम मानों से मेल खाने के लिए पिक्सेल मान को बदलता है। यह मूल्यों को हटाने के लिए पिक्सेल मूल्यों को परिवर्तित करने के लिए निम्न प्रारूप का उपयोग करता है -

rem-calc($values, $base)

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$values

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

 संख्या या सूची कोई नहीं
2

$base

यह पिक्सेल को मान प्रदान करने के लिए आधार मूल्य प्रदान करता है। यदि आधार के लिए शून्य मान है, तो फ़ंक्शन आधार के रूप में $ बेस-फ़ॉन्ट-आकार चर का उपयोग करता है।

 संख्या शून्य

है-मूल्य

यह मान निर्दिष्ट करता है यदि यह गलत नहीं है। झूठे मूल्यों में अशक्त, कोई नहीं, 0 या एक खाली सूची शामिल है। यह मान निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -

has-value($val)

यह निम्न तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$val

यह निर्दिष्ट मान की जाँच करता है।

 मिश्रित कोई नहीं

मिल-साइड

यह एक मूल्य के पक्ष को निर्दिष्ट करता है और पैडिंग, मार्जिन आदि पर शीर्ष / दाएं / नीचे / बाएं मूल्यों को परिभाषित करता है। यह मूल्य के पक्ष को निर्दिष्ट करने के लिए निम्न प्रारूप का उपयोग करता है -

has-value($val)

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$val

यह एक मूल्य के पक्ष को निर्दिष्ट करता है।

 सूची या संख्या कोई नहीं
2

$side

यह निर्धारित करता है कि किस तरफ (ऊपर / दाएं / नीचे / बाएं) मूल्य वापस आना चाहिए।

 कीवर्ड कोई नहीं

मिल-सीमा-मूल्य

यह एक तत्व के सीमा मूल्य को निर्धारित करता है। यह सीमा मूल्य को निर्दिष्ट करने के लिए निम्नलिखित प्रारूप का उपयोग करता है -

get-border-value($val, $elem)

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$val

यह सीमा का एक विशिष्ट मूल्य पाता है।

 सूची कोई नहीं
2

$elem

इसका उपयोग सीमा घटक को निकालने के लिए किया जाता है।

 कीवर्ड कोई नहीं

आयात कर रहा है

यह SASS मिश्रण की सामग्री को आयात करता है जिसे scss / use / _mixins.scss फ़ाइल के अंतर्गत रखा जाता है । आप निम्नलिखित लाइन ऑफ़ कोड का उपयोग करके SASS मिश्रण को आयात कर सकते हैं -

@import 'util/mixins';

सैस संदर्भ

आप SASS फ़ंक्शन का उपयोग करके घटकों की शैली बदल सकते हैं।

mixins

आप अपने घटकों के लिए CSS वर्ग संरचना बनाने के लिए निम्नलिखित मिश्रण का उपयोग कर सकते हैं।

CSS-TRIANGLE

इसका उपयोग ड्रॉपडाउन तीर, ड्रॉपडाउन पिप्स और कई और अधिक बनाने के लिए किया जाता है। यह </ i> </ i> या <i> से पहले और </ i> के बाद </ i> एक मौजूदा तत्व के लिए एक त्रिकोण संलग्न करने के लिए चयनकर्ता का उपयोग करता है। यह निम्न प्रारूप का उपयोग करता है -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$triangle-size

यह त्रिभुज की चौड़ाई को परिभाषित करता है।

 संख्या कोई नहीं
2

$triangle-color

यह त्रिभुज के रंग को परिभाषित करता है।

 रंग कोई नहीं
3

$triangle-direction

यह त्रिभुज की दिशा को परिभाषित करता है जैसे कि ऊपर, दाएं, नीचे या बाएं।

 कीवर्ड कोई नहीं

HAMBURGER

यह चौड़ाई, ऊंचाई, बार और रंगों के साथ मेनू आइकन बनाने के लिए उपयोग किया जाता है। यह निम्न प्रारूप का उपयोग करता है -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$color

यह आइकन के लिए रंग को परिभाषित करता है।

 रंग कोई नहीं
2

$color-hover

जब आप आइकन पर हॉवर करते हैं तो यह रंग को परिभाषित करता है।

 रंग कोई नहीं
3

$width

यह आइकन की चौड़ाई को परिभाषित करता है।

 संख्या कोई नहीं
4

$height

यह आइकन की ऊंचाई को परिभाषित करता है।

 संख्या कोई नहीं
5

$weight

यह आइकन में व्यक्तिगत सलाखों के वजन को परिभाषित करता है।

 संख्या कोई नहीं
6

$bars

यह आइकन में बार की संख्या को परिभाषित करता है।

 संख्या कोई नहीं

BACKGROUND-TRIANGLE

इसका उपयोग बैकग्राउंड इमेज को एक एलिमेंट में निर्दिष्ट करने के लिए किया जाता है। यह निम्न प्रारूप का उपयोग करता है -

@include background-triangle($color);

यह तालिका में निर्दिष्ट पैरामीटर का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$color

यह त्रिकोण के लिए रंग को परिभाषित करता है।

 रंग $ काला

CLEARFIX

यह मिश्रण स्वचालित रूप से बच्चों के तत्वों को साफ करता है, ताकि अतिरिक्त मार्कअप की आवश्यकता न हो। यह निम्न प्रारूप का उपयोग करता है -

@include clearfix;

AUTO-WIDTH

यह स्वचालित रूप से कंटेनर में मौजूद तत्वों की संख्या के आधार पर तत्वों को आकार देता है। यह निम्न प्रारूप का उपयोग करता है -

@include auto-width($max, $elem);

यह तालिका में निर्दिष्ट निम्न मापदंडों का उपयोग करता है -

अनु क्रमांक। पैरामीटर और विवरण प्रकार डिफ़ॉल्ट मान
1

$max

यह कंटेनर में अधिकतम वस्तुओं की पहचान करता है।

 संख्या कोई नहीं
2

$elem

यह चयनकर्ताओं के लिए एक टैग का उपयोग करता है।

 कीवर्ड ली

DISABLE-MOUSE-OUTLINE

इसका उपयोग तत्व के चारों ओर की रूपरेखा को निष्क्रिय करने के लिए किया जाता है जब यह माउस इनपुट क्रिया की पहचान करता है। यह निम्न प्रारूप का उपयोग करता है -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

यह तत्वों को छिपाने के लिए उपयोग किया जाता है और कीबोर्ड और अन्य उपकरणों के लिए उपलब्ध हो सकता है। यह निम्न प्रारूप का उपयोग करता है -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

इसका उपयोग अदृश्य तत्वों को हटाने के लिए किया जाता है और तत्व-अदृश्य () मिश्रण का उपयोग करके CSS आउटपुट को उलट दिया जाता है । यह निम्न प्रारूप का उपयोग करता है -

@include element-invisible-off;

VERTICAL-CENTER

इसका उपयोग निम्नलिखित प्रारूप का उपयोग करके तत्वों को गैर-स्थिर मूल तत्व के अंदर लंबवत केंद्रित करने के लिए किया जाता है -

@include vertical-center;

HORIZONTAL-CENTER

इसका उपयोग निम्नलिखित प्रारूप का उपयोग करके गैर-स्थिर मूल तत्व के अंदर क्षैतिज रूप से केंद्रित तत्वों को रखने के लिए किया जाता है -

@include horizontal-center;

ABSOLUTE-CENTER

इसका उपयोग निम्नलिखित प्रारूप का उपयोग करके तत्वों को गैर-स्थिर मूल तत्व के अंदर बिल्कुल केंद्रित करने के लिए किया जाता है -

@include absolute-center;

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

Motion UI स्थापित करना

आप कोड के निम्नलिखित लाइन में दिखाए अनुसार npm या bower का उपयोग करके अपने प्रोजेक्ट में Motion UI लाइब्रेरी स्थापित कर सकते हैं -

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

आप निम्नलिखित की कोड लाइन में दिखाए अनुसार config.rb का उपयोग करके कम्पास में Motion UI लाइब्रेरी के लिए एक रास्ता जोड़ सकते हैं -

add_import_path 'node_modules/motion-ui/src'

आप कोड की निम्नलिखित पंक्तियों का उपयोग करके gulp-sass में पथ को शामिल कर सकते हैं -

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

निम्नलिखित कोड का उपयोग करके SASS फ़ाइल में Motion UI लाइब्रेरी आयात करें -

@import 'motion-ui'

अंतर्निहित संक्रमण

फाउंडेशन संक्रमण वर्गों का उपयोग करके संक्रमण प्रभाव प्रदान करता है जो मोशन यूआई लाइब्रेरी द्वारा बनाए जाते हैं। हम संक्रमण प्रभावों का उपयोग करके एक सरल उदाहरण बनाते हैं ।

कस्टम संक्रमण

आप Motion UI लाइब्रेरी का उपयोग करके कस्टम ट्रांस्फ़ॉर्म क्लासेस सेट कर सकते हैं। उदाहरण के लिए, हम मुई-हिंज () संक्रमण के लिए कस्टम कक्षाएं स्थापित करेंगे , जो तत्व को घुमाता है -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

एनीमेशन

आप CSS एनिमेशन बनाने के लिए Motion UI संक्रमण प्रभाव का उपयोग कर सकते हैं। डेटा-एनीमेशन वर्ग का उपयोग करके मोडल पर एनीमेशन कैसे काम करता है, यह जांचने के लिए इस लिंक पर क्लिक करें ।

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved