आपली डिझाइन सिस्टम तयार करा, भाग 3: रंग

या लेखात, आम्ही सीएसएसमध्ये रंग प्रणाली कशी सेट करावी आणि सिस्टम वापरणे आणि देखभाल करणे सुलभ आहे याची खात्री करण्यासाठी कोणत्या सर्वोत्तम पद्धती आहेत यावर एक नजर टाकू.

हा लेख आमच्या वेब घटकांच्या लायब्ररीद्वारे प्रेरित डिझाइन सिस्टमवरील मालिकेचा भाग आहे. लायब्ररी सीएसएस ग्लोबल्सच्या सॉलिड सिस्टमवर अवलंबून आहे. म्हणूनच आपण आमच्या लाइब्ररीची जागतिक शैली सेट करणे शिकलेल्या गोष्टी सामायिक करीत आहोत!

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

आम्ही रंग संपादक लाँच केला आहे! वेब डिझाइन साधन जे कोडीहाउस फ्रेमवर्कशी सुसंगत रंग पॅलेट आणि थीम व्युत्पन्न करते.

रंग बदल 101

इतर सीएसएस ग्लोबल्सच्या विपरीत, एक रंग प्रणाली तयार करणे कोडिंगबद्दल 10% आणि शब्दांकाबद्दल 90% आहे. आपल्या _colors.scss फाईलवर कार्य करत असताना आपण खालील लक्ष्ये लक्षात ठेवू इच्छित आहात:

  1. कलर व्हेरिएबल्स लक्षात ठेवणे सुलभ असले पाहिजे → आपल्याला कधीही रंग निवडावा लागता आपण ग्लोबल फाईल तपासू इच्छित नाही.
  2. सिस्टीम अद्यतनित करण्यास सुलभ असावे, आपण रंग जोडा, काढू आणि पुनर्नामित कराल. खात्री करुन घ्या की असे करणे काही अवघड नाही.
  3. सिस्टममध्ये फक्त आवश्यक रंगांचा समावेश असावा → आम्ही हे बर्‍याच वेळा ऐकला आहे ... तरीही आम्ही नेहमी आपल्या गरजेपेक्षा जास्त रंग देत असतो! डिझाइन सिस्टमची खरी सक्सेस की आवश्यक नसलेल्या सर्व गोष्टी काढून टाकत आहे (रंग समाविष्ट केलेले)

अर्थपूर्ण घोषणात्मक रंग

जेव्हा कलर व्हेरिएबल्स सेट करण्याची गरज असते तेव्हा दोन मुख्य पध्दती असतात: सिमेंटीक आणि डिक्लेक्टीव्हरी रंग.

अर्थपूर्ण दृष्टीकोन असे दिसते:

येथे घोषणात्मक दृष्टिकोनाचे उदाहरण असताना:

त्यापैकी काहीही चुकीचे नाही. आपल्या गरजा पूर्ण करणारे निवडणे हे अनेक घटकांवर अवलंबून असते (उदा. प्रकल्पाचा आकार, ब्रँडिंग रंगांची प्रासंगिकता इ.).

आमच्या फ्रेमवर्कच्या _colors.scss फाईलवर काम करत असताना, मला ते लक्षात घ्यावे लागले होते की ते (100%) संपादन करणार आहेत. याचा अर्थ असा की जरी घोषित दृष्टिकोन वापरणे सर्वात सुलभ होते, तरीही सिस्टम टिकवून ठेवण्यासाठी मला अर्थपूर्ण दृष्टिकोनात मिसळावे लागले.

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

पहिला घटक वेब घटक तयार करण्यासाठी आवश्यक असलेल्या रंगांची किमान संख्या जाहीर करीत होता. सर्वसाधारणपणे, आवश्यक रंग पॅलेट बनलेले आहे:

  1. मुख्य / प्राथमिक रंग → दुव्यांसाठी वापरला जाणारा बटण पार्श्वभूमी रंग इ. सर्वसाधारणपणे तो कॉल-टू-actionक्शन रंग आहे.
  2. अ‍ॅक्सेंट रंग → पृष्ठावरील काहीतरी महत्त्वाचे ठळक करण्यासाठी वापरले जाते. हे प्राथमिक रंगाचे भिन्नता नसावे तर पूरक रंग असू नये.
  3. तटस्थ रंगांचे प्रमाण → मजकूर घटक, सूक्ष्म घटक, सीमा इत्यादींसाठी वापरले जाणारे हे सामान्यत: ग्रेस्केल टोनचे प्रमाण आहे.
  4. अभिप्राय रंग - यश, त्रुटी, चेतावणी.

यापैकी काही रंगांना भिन्नता (गडद / फिकट आवृत्ती) आवश्यक असते, जे बहुतेक वेळेस इंटरएक्टिव्हिटी (उदा.: होव्हर /: सक्रिय राज्ये) हायलाइट करण्यासाठी वापरले जातात.

सीएसएस मध्ये, हे यावर अनुवादित करते:

* टीपः आम्ही सर्व ब्राउझरशी सुसंगत आरजीबीए कोडमध्ये रंग फंक्शनचे भाषांतर करण्यासाठी पोस्टकॉस-कलर-मॉड-फंक्शन प्लगिन वापरत आहोत.

उपरोक्त स्निपेट रंग पॅलेटचे प्रतिनिधित्व करतो: प्रोजेक्टमध्ये वापरलेले सर्व रंग.

प्राथमिक आणि उच्चारण रंगांच्या भिन्नता रंग फंक्शन वापरून तयार केल्या जातात. आपल्याकडे डेमो एचटीएमएल फाइल असल्यास (आणि आम्ही आमच्या चौकटीत करतो) हा दृष्टिकोन उपयोगात आणतो जेणेकरून आपण प्राप्त झालेल्या रंगांवर समाधानी होईपर्यंत आपण कार्येची मूल्ये चिमटा घेऊ शकता. शेड्स (किंवा तटस्थ) रंग chroma.js वापरून तयार केले जातात. या प्रकरणात, कार्ये वापरणे योग्य नव्हते, कारण आपल्याकडे सामान्यत: दोन उलट रंग असतात (काळा आणि पांढरा) आणि आपल्याला या दोन रंगांच्या आधारावर मोठ्या प्रमाणात मूल्ये तयार करण्याची आवश्यकता असते.

मिक्समध्ये अर्थपूर्ण रंग जोडत आहे

एकदा रंग पॅलेट तयार झाल्यावर आपण अर्थपूर्ण रंग जोडू शकतो. अर्थपूर्ण रंग तयार करणे म्हणजे रंगांची संख्या वाढविणे नव्हे तर अर्थपूर्ण संदर्भ वापरुन रंगांचे वितरण करणे होय.

मला का वाटतं की हा एक चांगला दृष्टीकोन आहे

सर्व प्रथम, ही प्रणाली दोन आवश्यक रंगांवर अवलंबून आहे: प्राथमिक आणि उच्चारण रंग. याचा अर्थ असा की जेव्हा आपल्याला रंग बदलणे आवश्यक असेल तेव्हा ते बदल काय दर्शविते हे लक्षात ठेवणे आपल्यास अवघड नाही (जरी आपण "निळे" आणि "लाल" सारख्या घोषणात्मक नावे वापरत नाही).

आपल्या सिस्टमला अधिक रंग (उदा. दुय्यम रंग) समाविष्ट करण्याची आवश्यकता असू शकते. आपण अद्याप फक्त तीन रंगांचा सौदा करीत आहात. आपण वापरत असलेल्या दृष्टिकोनाकडे दुर्लक्ष करून 10+ मुख्य रंगांवर आधारित सिस्टमचे व्यवस्थापन करणे अवघड आहे, म्हणून आपणास त्यास सुलभ करण्याचा विचार करू शकता.

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

मिश्रणात तीन मुख्य कारणांसाठी अर्थपूर्ण रंग जोडले जातात:

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

थीमिंग

प्लगइन्स किंवा पॉलिफिलवर अवलंबून न राहता आम्ही सीएसएस व्हेरिएबल्स वापरु शकू तितक्या लवकर, थीम तयार करणे खूप सोपे होईल *! याचा अर्थ असा की आपण आज थीम तयार करू शकत नाही? नाही, आम्ही करू शकतो. आमच्याकडे दोन पर्याय आहेत.

आमच्या फ्रेमवर्कमध्ये, आम्ही सीएसएस व्हेरिएबल्सचे संकलन करण्यासाठी पोस्टसीएसएस सीएसएस-व्हेरिएबल्स प्लगइन वापरतो. हे सध्या सीएसएस वर्गात व्हेरिएबल्स अद्यतनित करण्यास समर्थन देत नाही.

पर्याय 1 तरीही सीएसएस व्हेरिएबल्स अद्यतनित करीत आहे. व्हेरिएबल्सना समर्थन न देणारे ब्राउझर “डीफॉल्ट” रंग थीम दर्शवतील. जोपर्यंत सामग्री प्रवेश करण्यायोग्य आहे तोपर्यंत ही समस्या नाही.

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

आपण काही की सीएसएस व्हेरिएबल्स अद्यतनित करणारी नवीन थीम अशा प्रकारे तयार करता:

मला हा सोल्यूशन आवडला कारण ते रंग सुधारणेपासून दूर ठेवते आणि यामुळे आपल्या रंगाची थीम एकाच फाइलमध्ये ठेवता येते. असे केल्याने आम्ही फक्त एक सीएसएस वर्ग लागू करुन प्रत्येक घटकाची स्थिती (थीम-ए पासून थीम-बी पर्यंत) संभाव्यत: बदलू शकतो.

पर्याय 2 सर्व घटकांना लक्ष्य करीत आहे ज्यांचे स्वरूप थीम द्वारे प्रभावित आहे. या पद्धतीचा फायदा हा आहे की तो सर्व ब्राउझरद्वारे समर्थित आहे. तथापि, संपूर्णपणे सीएसएस व्हेरिएबल्सवर आधारित असलेल्या तुलनेत राखणे तितके सोपे नाही.

येथे क्रियेत पर्याय 2 चे एक उदाहरणः

आमच्या फ्रेमवर्कमध्ये आम्ही रंग कसे हाताळण्याचा विचार करीत आहोत हे आता आपल्याला माहिती आहे! आपल्याकडे अभिप्राय / सूचना असल्यास, आम्हाला टिप्पणीमध्ये कळवा!

मी आशा करतो की आपण लेखाचा आनंद घेतला असेल! अधिक वेब डिझाइन गाळ्यांसाठी, मध्यम किंवा ट्विटरवर येथे आमचे अनुसरण करा.