अपना डिज़ाइन सिस्टम बनाएं, भाग 3: रंग

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

यह लेख वेब घटकों के हमारे पुस्तकालय से प्रेरित डिजाइन सिस्टम पर एक श्रृंखला का हिस्सा है। पुस्तकालय CSS ग्लोबल्स की एक ठोस प्रणाली पर निर्भर करता है। तो यह हम उन चीजों को साझा कर रहे हैं जो हमने अपने पुस्तकालय की वैश्विक शैली को स्थापित करना सीखा है!

लेख श्रृंखला:
- भाग 1: टाइपोग्राफी
- भाग 2: ग्रिड और लेआउट
- भाग 3: रंग
- भाग 4: रिक्ति
- भाग 5: प्रतीक
- भाग 6: बटन

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

कलर वेरिएबल्स 101

अन्य सीएसएस ग्लोबल्स के विपरीत, एक रंग प्रणाली कोडिंग के बारे में 10% और शब्दार्थ के बारे में 90% है। अपने _colors.scss फ़ाइल पर काम करते समय, आप निम्नलिखित लक्ष्यों को ध्यान में रखना चाहते हैं:

  1. रंग चर को याद रखना आसान होता है → आप किसी भी रंग को चुनने के लिए कभी भी वैश्विक फ़ाइल की जांच नहीं करना चाहते हैं।
  2. सिस्टम को अपडेट करना आसान होना चाहिए → आप रंगों को जोड़ेंगे, हटाएंगे और नाम बदल सकते हैं। सुनिश्चित करें कि ऐसा करना जटिल नहीं है।
  3. सिस्टम में केवल आवश्यक रंग शामिल होने चाहिए → हमने इसे एक ही बार सुना है ... फिर भी हम हमेशा ज़रूरत से ज़्यादा रंगों के साथ समाप्त होते हैं! एक डिजाइन प्रणाली की असली सफलता की कुंजी सभी को हटा रही है जो आवश्यक नहीं है (रंग शामिल हैं)।

शब्दार्थ बनाम घोषणात्मक रंग

जब रंग चर सेट करने की बात आती है, तो दो मुख्य दृष्टिकोण होते हैं: अर्थ और घोषणात्मक रंग।

सिमेंटिक दृष्टिकोण इस तरह दिखता है:

जबकि यहाँ एक घोषणात्मक दृष्टिकोण का एक उदाहरण है:

दोनों में से कोई भी गलत नहीं है। अपनी आवश्यकताओं को पूरा करने वाले को चुनना बहुत सारे कारकों (जैसे, परियोजना का आकार, ब्रांडिंग रंग प्रासंगिकता, आदि) पर निर्भर करता है।

हमारे ढांचे के _colors.scss फ़ाइल पर काम करते समय, मुझे इस बात का ध्यान रखना था कि उपयोगकर्ता इसे (100%) संपादित करने जा रहे हैं। इसका मतलब है कि भले ही घोषणात्मक दृष्टिकोण का उपयोग करना सबसे आसान था, मुझे इसे एक प्रणाली प्राप्त करने के लिए शब्दार्थ दृष्टिकोण के साथ मिश्रण करना था जिसे बनाए रखना भी आसान था।

आवश्यक रंग पैलेट

चरण नंबर एक वेब घटकों को बनाने के लिए आवश्यक न्यूनतम रंगों की संख्या घोषित कर रहा था। सामान्य तौर पर, आवश्यक रंग पैलेट निम्न से बना होता है:

  1. मुख्य / प्राथमिक रंग → लिंक, बटन पृष्ठभूमि रंग, आदि के लिए उपयोग किया जाता है। सामान्य तौर पर, यह मुख्य कॉल-टू-एक्शन रंग है।
  2. उच्चारण का रंग → पृष्ठ पर किसी महत्वपूर्ण चीज़ को उजागर करने के लिए उपयोग किया जाता है। यह प्राथमिक रंग की भिन्नता नहीं होनी चाहिए, लेकिन एक पूरक रंग है।
  3. तटस्थ रंगों का एक पैमाना → यह आम तौर पर ग्रेस्केल टोन का एक पैमाना है, जिसका उपयोग टेक्स्ट एलिमेंट्स, सूक्ष्म तत्वों, सीमाओं आदि के लिए किया जाता है।
  4. प्रतिक्रिया रंग → सफलता, त्रुटि, चेतावनी।

इन रंगों में से कुछ को भिन्नता (गहरा / हल्का संस्करण) की आवश्यकता होती है, जिसका उपयोग अक्सर अन्तरक्रियाशीलता को उजागर करने के लिए किया जाता है (जैसे,: होवर /: सक्रिय अवस्थाएँ)।

CSS में, इसका अनुवाद इस प्रकार है:

* नोट: हम सभी ब्राउज़र के साथ संगत RGBA कोड में रंग फ़ंक्शन का अनुवाद करने के लिए पोस्ट-कलर-मॉड-फ़ंक्शन फ़ंक्शन प्लगइन का उपयोग कर रहे हैं।

ऊपर का स्निपेट रंग पैलेट का प्रतिनिधित्व करता है: परियोजना में उपयोग किए जाने वाले सभी रंग।

रंग कार्यों का उपयोग करके प्राथमिक और उच्चारण रंगों की विविधताएं उत्पन्न होती हैं। यदि आपके पास एक डेमो। Html फ़ाइल है (और हम अपने ढांचे में ऐसा करते हैं) तो यह दृष्टिकोण काम आता है ताकि आप प्राप्त किए गए रंगों से संतुष्ट न होने तक कार्यों के मूल्यों को ट्विक कर सकें। रंगों (या तटस्थ) रंगों को chroma.js के उपयोग से उत्पन्न किया जाता है। इस मामले में, फ़ंक्शंस का उपयोग करना आदर्श नहीं था, क्योंकि आपके पास आमतौर पर दो विपरीत रंग (काले और सफेद) होते हैं, और आपको इन दो रंगों के आधार पर मानों का एक पैमाना उत्पन्न करने की आवश्यकता होती है।

मिश्रण में सिमेंटिक रंग जोड़ना

रंग पैलेट तैयार होने के बाद, हम शब्दार्थ रंग जोड़ सकते हैं। सिमेंटिक रंग बनाने का अर्थ रंगों की संख्या में वृद्धि नहीं है, बल्कि सिमेंटिक संदर्भों का उपयोग करके रंगों का वितरण करना है।

मुझे लगता है कि यह एक अच्छा तरीका है

सबसे पहले, यह प्रणाली दो आवश्यक रंगों पर निर्भर करती है: प्राथमिक और उच्चारण रंग। इसका मतलब है कि जब आपको रंग चर का उपयोग करने की आवश्यकता होती है, तो आपके लिए यह याद रखना मुश्किल नहीं है कि वे चर क्या दर्शाते हैं (भले ही आप "नीले" और "लाल" जैसे घोषणात्मक नामों का उपयोग नहीं कर रहे हों)।

आपके सिस्टम में अधिक रंग (जैसे, द्वितीयक रंग) शामिल करने की आवश्यकता हो सकती है। आप अभी भी सिर्फ तीन रंगों के साथ काम कर रहे हैं 10+ मुख्य रंगों पर आधारित एक प्रणाली का प्रबंधन आपके द्वारा उपयोग किए जा रहे दृष्टिकोण की परवाह किए बिना मुश्किल होगा, इसलिए आप इसे सरल बनाने पर विचार करना चाह सकते हैं।

ग्रेस्केल रंग एक अलग नामकरण सम्मेलन का उपयोग करते हैं: उच्च चर के अंत में संख्या है, गहरा रंग है।
यह दृष्टिकोण तब आसान हो जाता है जब आप सुनिश्चित नहीं होते हैं कि आप किस तटस्थ रंग को लागू करना चाहते हैं। यदि ग्रे -2 अति सूक्ष्म दिखता है, तो आप ग्रे -3 का प्रयास कर सकते हैं। आपने देखा होगा कि कुछ शेड्स गायब हैं (जैसे, ग्रे -5)। वे हमारे मामले में आवश्यक नहीं थे (हमने वेब घटकों को बनाते समय उनका इस्तेमाल कभी नहीं किया), इसलिए हमने उन्हें रंग पैलेट से हटा दिया।

तीन मुख्य कारणों से मिश्रण में सिमेंटिक रंग मिलाए जाते हैं:

  1. _Colors.scss फ़ाइल किसी भी रंग को संशोधित करने की आवश्यकता होने पर कभी भी सत्य का स्रोत बन जाती है। क्या आपको लगता है कि पाठ शीर्षक तत्व गहरे रंग के होने चाहिए? _Colors.scss फ़ाइल खोलें और रंग-पाठ-शीर्षक चर को संपादित करें।
  2. उदाहरण के लिए, यदि आप रंग-बॉर्डर परिभाषित करते हैं, तो आपको यह देखने की आवश्यकता नहीं है कि अगली बार जब आप बॉर्डर एलिमेंट बनाते हैं तो आप कौन से ग्रे रंग का उपयोग कर रहे हैं। एक ही अवधारणा कई तत्वों पर लागू होती है, न कि केवल सीमाओं पर।
  3. यह विभिन्न विषयों को बनाने और बनाए रखने के लिए केक का एक टुकड़ा बनाता है।

थीम

जैसे ही हम सीएसएस चर का उपयोग प्लगइन्स या पॉलीफिल पर भरोसा किए बिना कर सकते हैं, रंग थीम बनाना सुपर सरल * होगा! क्या इसका मतलब है कि हम आज थीम नहीं बना सकते हैं? नहीं, हम कर सकते हैं। हमारे पास दो विकल्प हैं।

* हमारे फ्रेमवर्क में, हम CSS वेरिएबल को संकलित करने के लिए postcss-css-variables प्लगइन का उपयोग करते हैं। वर्तमान में यह सीएसएस वर्ग में चर को अद्यतन करने का समर्थन नहीं करता है।

विकल्प 1 वैसे भी सीएसएस चर को अद्यतन कर रहा है। वे ब्राउज़र जो समर्थन चर नहीं करते हैं, वे "डिफ़ॉल्ट" रंग विषय को दिखाएंगे। यह एक मुद्दा नहीं है, जब तक सामग्री सुलभ है।

उदाहरण के लिए, आपके पास एक डिफ़ॉल्ट रंग थीम है → श्वेत पृष्ठभूमि और काले रंग का रंग, और एक .theme- गहरा → काली पृष्ठभूमि और सफेद पाठ का रंग। फिर आप दो घटक बनाते हैं, एक डिफ़ॉल्ट थीम के साथ, दूसरा .dark- थीम के साथ। यदि डिफ़ॉल्ट थीम वाले दोनों घटक उपयोगकर्ता के अनुभव को प्रभावित नहीं करते हैं, तो आप .dark-theme को एन्हांसमेंट (वैकल्पिक) के रूप में मान सकते हैं। इस मामले में, यह अलग-अलग थीम बनाने के लिए चर को अद्यतन करने के लिए समझ में आता है, भले ही वे हर जगह समर्थित न हों।

यह है कि आप सीएसएस चर को अपडेट करते हुए एक नया विषय कैसे बनाते हैं:

मुझे यह समाधान बहुत पसंद है क्योंकि यह रंग सुधार को रोकता है, और यह आपको एक ही फाइल में अपने रंग विषयों को रखने की अनुमति देता है। ऐसा करने से, हम संभवतः प्रत्येक घटक की स्थिति (थीम-ए से थीम-बी तक) बस सीएसएस वर्ग को लागू करके बदल सकते हैं।

विकल्प 2 उन सभी तत्वों को लक्षित करेगा जिनकी उपस्थिति विषय से प्रभावित होती है। इस पद्धति का लाभ यह है कि यह सभी ब्राउज़रों द्वारा समर्थित है। हालाँकि, यह पूरी तरह से सीएसएस चर पर आधारित एक की तुलना में बनाए रखना आसान नहीं है।

यहां कार्रवाई में विकल्प 2 का एक उदाहरण दिया गया है:

अब आप जानते हैं कि कैसे हम अपने ढांचे में रंगों को संभालने की योजना बना रहे हैं! यदि आपके पास प्रतिक्रिया / सुझाव है, तो हमें टिप्पणी में बताएं!

मुझे उम्मीद है कि आपको लेख पसंद आया होगा! अधिक वेब डिज़ाइन की डली के लिए, हमें यहां मध्यम या ट्विटर पर अनुसरण करें।