మీ డిజైన్ సిస్టమ్‌ను సృష్టించండి, పార్ట్ 3: రంగులు

ఈ వ్యాసంలో, మేము CSS లో రంగు వ్యవస్థను ఎలా సెట్ చేయాలో పరిశీలిస్తాము మరియు సిస్టమ్ ఉపయోగించడం మరియు నిర్వహించడం సులభం అని నిర్ధారించుకోవడానికి ఉత్తమమైన పద్ధతులు ఏమిటి.

ఈ వ్యాసం మా వెబ్ భాగాల లైబ్రరీ నుండి ప్రేరణ పొందిన డిజైన్ సిస్టమ్‌లపై సిరీస్‌లో భాగం. లైబ్రరీ CSS గ్లోబల్స్ యొక్క దృ system మైన వ్యవస్థపై ఆధారపడుతుంది. కాబట్టి ఇది మా లైబ్రరీ యొక్క ప్రపంచ శైలిని సెట్ చేయడం నేర్చుకున్న విషయాలను పంచుకుంటాము!

ఆర్టికల్ సిరీస్:
- పార్ట్ 1: టైపోగ్రఫీ
- పార్ట్ 2: గ్రిడ్ & లేఅవుట్
- పార్ట్ 3: రంగులు
- పార్ట్ 4: అంతరం
- పార్ట్ 5: చిహ్నాలు
- పార్ట్ 6: బటన్లు

మేము రంగు ఎడిటర్‌ను ప్రారంభించాము! కోడిహౌస్ ఫ్రేమ్‌వర్క్‌కు అనుకూలంగా ఉండే రంగుల పాలెట్‌లు మరియు థీమ్‌లను రూపొందించే వెబ్ డిజైన్ సాధనం.

రంగు వేరియబుల్స్ 101

ఇతర CSS గ్లోబల్స్ మాదిరిగా కాకుండా, రంగు వ్యవస్థను సృష్టించడం కోడింగ్ గురించి 10% మరియు సెమాంటిక్స్ గురించి 90%. మీ _colors.scss ఫైల్‌లో పనిచేస్తున్నప్పుడు, మీరు ఈ క్రింది లక్ష్యాలను గుర్తుంచుకోవాలి:

  1. రంగు వేరియబుల్స్ గుర్తుంచుకోవడం సులభం ఉండాలి you మీరు ఎప్పుడైనా రంగును ఎంచుకోవలసి వచ్చినప్పుడు గ్లోబల్ ఫైల్‌ను తనిఖీ చేయకూడదు.
  2. సిస్టమ్ అప్‌డేట్ చేయడం సులభం → మీరు రంగులను జోడిస్తారు, తీసివేస్తారు మరియు పేరు మార్చండి. అలా చేయడం సంక్లిష్టంగా లేదని నిర్ధారించుకోండి.
  3. సిస్టమ్‌లో అవసరమైన రంగులు మాత్రమే ఉండాలి → మేము దీన్ని చాలాసార్లు విన్నాము… అయినప్పటికీ మనం ఎల్లప్పుడూ మనకు అవసరమైన దానికంటే ఎక్కువ రంగులతో ముగుస్తుంది! డిజైన్ సిస్టమ్ యొక్క నిజమైన సక్సెస్ కీ అవసరం లేని వాటిని తొలగించడం (రంగులు చేర్చబడ్డాయి).

సెమాంటిక్ vs డిక్లేరేటివ్ రంగులు

రంగు వేరియబుల్స్ సెట్ చేయడానికి వచ్చినప్పుడు, రెండు ప్రధాన విధానాలు ఉన్నాయి: సెమాంటిక్ మరియు డిక్లరేటివ్ కలర్స్.

సెమాంటిక్ విధానం ఇలా ఉంది:

ప్రకటన విధానం యొక్క ఉదాహరణ ఇక్కడ ఉంది:

ఈ రెండూ తప్పు కాదు. మీ అవసరాలను తీర్చగలదాన్ని ఎంచుకోవడం చాలా అంశాలపై ఆధారపడి ఉంటుంది (ఉదా., ప్రాజెక్ట్ పరిమాణం, బ్రాండింగ్ రంగుల v చిత్యం మొదలైనవి).

మా ఫ్రేమ్‌వర్క్ యొక్క _colors.scss ఫైల్‌లో పనిచేస్తున్నప్పుడు, వినియోగదారులు దీన్ని సవరించబోతున్నారని నేను పరిగణనలోకి తీసుకోవలసి వచ్చింది (100%). అంటే డిక్లరేటివ్ విధానం ఉపయోగించడానికి సులభమైనది అయినప్పటికీ, వ్యవస్థను నిర్వహించడానికి నేను దానిని సెమాంటిక్ విధానంతో కలపాలి.

అవసరమైన రంగుల

స్టెప్ నంబర్ వన్ వెబ్ భాగాలను సృష్టించడానికి అవసరమైన కనీస రంగులను ప్రకటించింది. సాధారణంగా, అవసరమైన రంగుల పాలెట్ వీటిని కలిగి ఉంటుంది:

  1. ప్రధాన / ప్రాధమిక రంగు the లింక్‌లు, బటన్ నేపథ్య రంగు మొదలైన వాటి కోసం ఉపయోగిస్తారు. సాధారణంగా, ఇది ప్రధాన కాల్-టు-యాక్షన్ రంగు.
  2. యాస రంగు the పేజీలో ముఖ్యమైనదాన్ని హైలైట్ చేయడానికి ఉపయోగించబడుతుంది. ఇది ప్రాధమిక రంగు యొక్క వైవిధ్యం కాకూడదు, కానీ పరిపూరకరమైన రంగు.
  3. తటస్థ రంగుల స్థాయి text ఇది సాధారణంగా టెక్స్ట్ ఎలిమెంట్స్, సూక్ష్మ అంశాలు, సరిహద్దులు మొదలైన వాటి కోసం ఉపయోగించాల్సిన గ్రేస్కేల్ టోన్ల స్కేల్.
  4. అభిప్రాయ రంగులు → విజయం, లోపం, హెచ్చరిక.

ఈ రంగులలో కొన్నింటికి వైవిధ్యం అవసరం (ముదురు / తేలికైన వెర్షన్), తరచుగా ఇంటరాక్టివిటీని హైలైట్ చేయడానికి ఉపయోగిస్తారు (ఉదా.,: హోవర్ /: యాక్టివ్ స్టేట్స్).

CSS లో, ఇది దీనికి అనువదిస్తుంది:

* గమనిక: మేము అన్ని బ్రౌజర్‌లకు అనుకూలంగా ఉండే RGBA కోడ్‌లోకి రంగు ఫంక్షన్లను అనువదించడానికి పోస్ట్‌సిస్-కలర్-మోడ్-ఫంక్షన్ ప్లగ్‌ఇన్‌ను ఉపయోగిస్తున్నాము.

పైన ఉన్న స్నిప్పెట్ రంగుల పాలెట్‌ను సూచిస్తుంది: ప్రాజెక్ట్‌లో ఉపయోగించిన అన్ని రంగులు.

ప్రాధమిక మరియు ఉచ్ఛారణ రంగుల యొక్క వైవిధ్యాలు రంగు విధులను ఉపయోగించి ఉత్పత్తి చేయబడతాయి. మీకు డెమో.హెచ్ఎమ్ ఫైల్ ఉంటే (మరియు మేము మా ఫ్రేమ్‌వర్క్‌లో చేస్తాము) ఈ విధానం ఉపయోగపడుతుంది, తద్వారా మీరు పొందిన రంగులతో సంతృప్తి చెందే వరకు ఫంక్షన్ల విలువలను సర్దుబాటు చేయవచ్చు. షేడ్స్ (లేదా తటస్థ) రంగులు క్రోమా.జెస్ ఉపయోగించి ఉత్పత్తి చేయబడతాయి. ఈ సందర్భంలో, ఫంక్షన్లను ఉపయోగించడం అనువైనది కాదు, ఎందుకంటే మీకు సాధారణంగా రెండు వ్యతిరేక రంగులు (నలుపు మరియు తెలుపు) ఉంటాయి మరియు మీరు ఈ రెండు రంగుల ఆధారంగా విలువల స్థాయిని సృష్టించాలి.

మిశ్రమానికి అర్థ రంగులను కలుపుతోంది

రంగుల పాలెట్ సిద్ధమైన తర్వాత, మేము అర్థ రంగులను జోడించవచ్చు. సెమాంటిక్ రంగులను సృష్టించడం అంటే రంగుల సంఖ్యను పెంచడం కాదు, సెమాంటిక్ రిఫరెన్స్‌లను ఉపయోగించి రంగులను పంపిణీ చేయడం.

ఇది మంచి విధానం అని నేను ఎందుకు అనుకుంటున్నాను

అన్నింటిలో మొదటిది, ఈ వ్యవస్థ రెండు ముఖ్యమైన రంగులపై ఆధారపడుతుంది: ప్రాథమిక మరియు యాస రంగులు. అంటే మీరు రంగు వేరియబుల్స్ ఉపయోగించాల్సిన అవసరం వచ్చినప్పుడు, ఆ వేరియబుల్స్ దేనిని సూచిస్తాయో గుర్తుంచుకోవడం మీకు కష్టమేమీ కాదు (మీరు “నీలం” మరియు “ఎరుపు” వంటి డిక్లరేటివ్ పేర్లను ఉపయోగించకపోయినా).

మీ సిస్టమ్‌లో మరిన్ని రంగులను చేర్చాల్సి ఉంటుంది (ఉదా., ద్వితీయ రంగు). మీరు ఇప్పటికీ కేవలం మూడు రంగులతో వ్యవహరిస్తున్నారు. మీరు ఉపయోగిస్తున్న విధానంతో సంబంధం లేకుండా 10+ ప్రధాన రంగుల ఆధారంగా వ్యవస్థను నిర్వహించడం కష్టం, కాబట్టి మీరు దీన్ని సరళీకృతం చేయడాన్ని పరిశీలించాలనుకోవచ్చు.

గ్రేస్కేల్ రంగులు వేరే నామకరణ సమావేశాన్ని ఉపయోగిస్తాయి: వేరియబుల్ చివరిలో ఎక్కువ సంఖ్య, ముదురు రంగు.
మీరు ఏ తటస్థ రంగును వర్తింపజేయాలనుకుంటున్నారో మీకు తెలియకపోతే ఈ విధానం సులభమవుతుంది. బూడిద -2 చాలా సూక్ష్మంగా కనిపిస్తే, మీరు బూడిద -3 ను ప్రయత్నించవచ్చు. కొన్ని షేడ్స్ లేవని మీరు గమనించి ఉండవచ్చు (ఉదా., బూడిద -5). మా విషయంలో అవి అవసరం లేదు (వెబ్ భాగాలను సృష్టించేటప్పుడు మేము వాటిని ఎప్పుడూ ఉపయోగించలేదు), కాబట్టి మేము వాటిని రంగుల నుండి తొలగించాము.

సెమాంటిక్ రంగులు మూడు ప్రధాన కారణాల వల్ల మిశ్రమానికి జోడించబడతాయి:

  1. మీరు ఎప్పుడైనా రంగును సవరించాల్సిన అవసరం వచ్చినప్పుడు _colors.scss ఫైల్ సత్యానికి మూలంగా మారుతుంది. టెక్స్ట్ శీర్షిక అంశాలు ముదురు రంగులో ఉండాలని మీరు భావిస్తున్నారా? _Colors.scss ఫైల్‌ను తెరిచి, కలర్-టెక్స్ట్-హెడ్డింగ్ వేరియబుల్‌ను సవరించండి.
  2. మీరు రంగు-సరిహద్దును నిర్వచించినట్లయితే, ఉదాహరణకు, మీరు తదుపరిసారి సరిహద్దు మూలకాన్ని సృష్టించినప్పుడు ఇతర భాగాలలో ఏ బూడిద రంగును ఉపయోగిస్తున్నారో మీరు చూడవలసిన అవసరం లేదు. అదే భావన సరిహద్దులు మాత్రమే కాకుండా అనేక అంశాలకు వర్తిస్తుంది.
  3. విభిన్న ఇతివృత్తాలను సృష్టించడానికి మరియు నిర్వహించడానికి ఇది కేక్ ముక్కగా చేస్తుంది.

థీమ్ అమర్పులు

ప్లగిన్లు లేదా పాలిఫిల్‌పై ఆధారపడకుండా మేము CSS వేరియబుల్స్‌ని ఉపయోగించిన వెంటనే, రంగు థీమ్‌లను సృష్టించడం చాలా సులభం *! ఈ రోజు మనం థీమ్‌లను సృష్టించలేమని దీని అర్థం? లేదు, మనం చేయగలం. మాకు రెండు ఎంపికలు ఉన్నాయి.

* మా ఫ్రేమ్‌వర్క్‌లో, CSS వేరియబుల్స్ కంపైల్ చేయడానికి మేము postcss-css- వేరియబుల్స్ ప్లగిన్‌ను ఉపయోగిస్తాము. ఇది ప్రస్తుతం CSS తరగతిలో వేరియబుల్స్ నవీకరించడానికి మద్దతు ఇవ్వదు.

ఐచ్ఛికం 1 ఏమైనప్పటికీ CSS వేరియబుల్స్‌ను నవీకరిస్తోంది. వేరియబుల్స్‌కు మద్దతు ఇవ్వని బ్రౌజర్‌లు “డిఫాల్ట్” రంగు థీమ్‌ను చూపుతాయి. కంటెంట్ ప్రాప్యత ఉన్నంతవరకు ఇది సమస్య కాదు.

ఉదాహరణకు, మీకు డిఫాల్ట్ కలర్ థీమ్-వైట్ బ్యాక్‌గ్రౌండ్ మరియు బ్లాక్ టెక్స్ట్ కలర్, మరియు .థీమ్-డార్క్ → బ్లాక్ బ్యాక్‌గ్రౌండ్ మరియు వైట్ టెక్స్ట్ కలర్ ఉన్నాయి. అప్పుడు మీరు రెండు భాగాలను సృష్టిస్తారు, ఒకటి డిఫాల్ట్ థీమ్‌తో, మరొకటి .డార్క్-థీమ్‌తో. డిఫాల్ట్ థీమ్‌తో రెండు భాగాలను కలిగి ఉండటం వినియోగదారు అనుభవాన్ని ప్రభావితం చేయకపోతే, మీరు .dark- థీమ్‌ను మెరుగుదల (ఐచ్ఛికం) గా పరిగణించవచ్చు. ఈ సందర్భంలో, వేరియబుల్స్ ప్రతిచోటా మద్దతు ఇవ్వకపోయినా విభిన్న ఇతివృత్తాలను సృష్టించడానికి వాటిని నవీకరించడం అర్ధమే.

కొన్ని కీ CSS వేరియబుల్స్‌ను నవీకరించే క్రొత్త థీమ్‌ను మీరు ఈ విధంగా సృష్టించారు:

నేను ఈ పరిష్కారాన్ని ప్రేమిస్తున్నాను ఎందుకంటే ఇది రంగు దిద్దుబాటును సంగ్రహిస్తుంది మరియు ఇది మీ రంగు థీమ్‌లను ఒకే ఫైల్‌లో ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది. అలా చేయడం ద్వారా, మేము ఒక CSS తరగతిని వర్తింపజేయడం ద్వారా ప్రతి భాగం యొక్క స్థితిని (థీమ్-ఎ నుండి థీమ్-బి వరకు) మార్చగలము.

ఐచ్ఛికం 2 థీమ్ ద్వారా కనిపించే అన్ని అంశాలను లక్ష్యంగా చేసుకుంటుంది. ఈ పద్ధతి యొక్క ప్రయోజనం ఏమిటంటే దీనికి అన్ని బ్రౌజర్‌ల మద్దతు ఉంది. అయినప్పటికీ, పూర్తిగా CSS వేరియబుల్స్ ఆధారంగా పోలిస్తే నిర్వహించడం అంత సులభం కాదు.

చర్యలో ఉన్న ఎంపిక 2 యొక్క ఉదాహరణ ఇక్కడ ఉంది:

మా ఫ్రేమ్‌వర్క్‌లో రంగులను ఎలా నిర్వహించాలో ఇప్పుడు మీకు తెలుసు! మీకు అభిప్రాయం / సూచనలు ఉంటే, వ్యాఖ్యలో మాకు తెలియజేయండి!

మీరు వ్యాసాన్ని ఆస్వాదించారని నేను ఆశిస్తున్నాను! మరిన్ని వెబ్ డిజైన్ నగ్గెట్స్ కోసం, మీడియం లేదా ట్విట్టర్‌లో మమ్మల్ని అనుసరించండి.