फाउंडेशन - ग्लोबल स्टाइल्स
इस अध्याय में, हम ग्लोबल स्टाइल्स के बारे में अध्ययन करेंगे । फाउंडेशन फ्रेमवर्क के वैश्विक सीएसएस में उपयोगी रीसेट शामिल हैं जो सुनिश्चित करता है कि स्टाइल ब्राउज़रों के अनुरूप है।
फ़ॉन्ट आकार
ब्राउज़र शैली शीट का फ़ॉन्ट आकार डिफ़ॉल्ट रूप से 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 CSS गुण -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 पर सेट करता है |
एल टीआर |