మీ డిజైన్ సిస్టమ్‌ను సృష్టించండి, పార్ట్ 3: రంగులు 2019
cssడిజైన్ సిస్టమ్స్ఫ్రంట్ ఎండ్ డెవలప్‌మెంట్ట్యుటోరియల్వెబ్ డిజైన్
ఈ వ్యాసంలో, మేము CSS లో రంగు వ్యవస్థను ఎలా సెట్ చేయాలో పరిశీలిస్తాము మరియు సిస్టమ్ ఉపయోగించడం మరియు నిర్వహించడం సులభం అని నిర్ధారించుకోవడానికి ఉత్తమమైన పద్ధతులు ఏమిటి.
ఈ వ్యాసం మా వెబ్ భాగాల లైబ్రరీ నుండి ప్రేరణ పొందిన డిజైన్ సిస్టమ్‌లపై సిరీస్‌లో భాగం. లైబ్రరీ CSS గ్లోబల్స్ యొక్క దృ system మైన వ్యవస్థపై ఆధారపడుతుంది. కాబట్టి ఇది మా లైబ్రరీ యొక్క ప్రపంచ శైలిని సెట్ చేయడం నేర్చుకున్న విషయాలను పంచుకుంటాము!
ఆర్టికల్ సిరీస్:
- పార్ట్ 1: టైపోగ్రఫీ
- పార్ట్ 2: గ్రిడ్ & లేఅవుట్
- పార్ట్ 3: రంగులు
- పార్ట్ 4: అంతరం
- పార్ట్ 5: చిహ్నాలు
- పార్ట్ 6: బటన్లు
మేము రంగు ఎడిటర్‌ను ప్రారంభించాము! కోడిహౌస్ ఫ్రేమ్‌వర్క్‌కు అనుకూలంగా ఉండే రంగుల పాలెట్‌లు మరియు థీమ్‌లను రూపొందించే వెబ్ డిజైన్ సాధనం.
రంగు వేరియబుల్స్ 101
ఇతర CSS గ్లోబల్స్ మాదిరిగా కాకుండా, రంగు వ్యవస్థను సృష్టించడం కోడింగ్ గురించి 10% మరియు సెమాంటిక్స్ గురించి 90%. మీ _colors.scss ఫైల్‌లో పనిచేస్తున్నప్పుడు, మీరు ఈ క్రింది లక్ష్యాలను గుర్తుంచుకోవాలి:
రంగు వేరియబుల్స్ గుర్తుంచుకోవడం సులభం ఉండాలి you మీరు ఎప్పుడైనా రంగును ఎంచుకోవలసి వచ్చినప్పుడు గ్లోబల్ ఫైల్‌ను తనిఖీ చేయకూడదు.
సిస్టమ్ అప్‌డేట్ చేయడం సులభం → మీరు రంగులను జోడిస్తారు, తీసివేస్తారు మరియు పేరు మార్చండి. అలా చేయడం సంక్లిష్టంగా లేదని నిర్ధారించుకోండి.
సిస్టమ్‌లో అవసరమైన రంగులు మాత్రమే ఉండాలి → మేము దీన్ని చాలాసార్లు విన్నాము… అయినప్పటికీ మనం ఎల్లప్పుడూ మనకు అవసరమైన దానికంటే ఎక్కువ రంగులతో ముగుస్తుంది! డిజైన్ సిస్టమ్ యొక్క నిజమైన సక్సెస్ కీ అవసరం లేని వాటిని తొలగించడం (రంగులు చేర్చబడ్డాయి).
సెమాంటిక్ vs డిక్లేరేటివ్ రంగులు
రంగు వేరియబుల్స్ సెట్ చేయడానికి వచ్చినప్పుడు, రెండు ప్రధాన విధానాలు ఉన్నాయి: సెమాంటిక్ మరియు డిక్లరేటివ్ కలర్స్.
సెమాంటిక్ విధానం ఇలా ఉంది:
ప్రకటన విధానం యొక్క ఉదాహరణ ఇక్కడ ఉంది:
ఈ రెండూ తప్పు కాదు. మీ అవసరాలను తీర్చగలదాన్ని ఎంచుకోవడం చాలా అంశాలపై ఆధారపడి ఉంటుంది (ఉదా., ప్రాజెక్ట్ పరిమాణం, బ్రాండింగ్ రంగుల v చిత్యం మొదలైనవి).
మా ఫ్రేమ్‌వర్క్ యొక్క _colors.scss ఫైల్‌లో పనిచేస్తున్నప్పుడు, వినియోగదారులు దీన్ని సవరించబోతున్నారని నేను పరిగణనలోకి తీసుకోవలసి వచ్చింది (100%). అంటే డిక్లరేటివ్ విధానం ఉపయోగించడానికి సులభమైనది అయినప్పటికీ, వ్యవస్థను నిర్వహించడానికి నేను దానిని సెమాంటిక్ విధానంతో కలపాలి.
అవసరమైన రంగుల
స్టెప్ నంబర్ వన్ వెబ్ భాగాలను సృష్టించడానికి అవసరమైన కనీస రంగులను ప్రకటించింది. సాధారణంగా, అవసరమైన రంగుల పాలెట్ వీటిని కలిగి ఉంటుంది:
ప్రధాన / ప్రాధమిక రంగు the లింక్‌లు, బటన్ నేపథ్య రంగు మొదలైన వాటి కోసం ఉపయోగిస్తారు. సాధారణంగా, ఇది ప్రధాన కాల్-టు-యాక్షన్ రంగు.
యాస రంగు the పేజీలో ముఖ్యమైనదాన్ని హైలైట్ చేయడానికి ఉపయోగించబడుతుంది. ఇది ప్రాధమిక రంగు యొక్క వైవిధ్యం కాకూడదు, కానీ పరిపూరకరమైన రంగు.
తటస్థ రంగుల స్థాయి text ఇది సాధారణంగా టెక్స్ట్ ఎలిమెంట్స్, సూక్ష్మ అంశాలు, సరిహద్దులు మొదలైన వాటి కోసం ఉపయోగించాల్సిన గ్రేస్కేల్ టోన్ల స్కేల్.
అభిప్రాయ రంగులు → విజయం, లోపం, హెచ్చరిక.
ఈ రంగులలో కొన్నింటికి వైవిధ్యం అవసరం (ముదురు / తేలికైన వెర్షన్), తరచుగా ఇంటరాక్టివిటీని హైలైట్ చేయడానికి ఉపయోగిస్తారు (ఉదా.,: హోవర్ /: యాక్టివ్ స్టేట్స్).
CSS లో, ఇది దీనికి అనువదిస్తుంది:
* గమనిక: మేము అన్ని బ్రౌజర్‌లకు అనుకూలంగా ఉండే RGBA కోడ్‌లోకి రంగు ఫంక్షన్లను అనువదించడానికి పోస్ట్‌సిస్-కలర్-మోడ్-ఫంక్షన్ ప్లగ్‌ఇన్‌ను ఉపయోగిస్తున్నాము.
పైన ఉన్న స్నిప్పెట్ రంగుల పాలెట్‌ను సూచిస్తుంది: ప్రాజెక్ట్‌లో ఉపయోగించిన అన్ని రంగులు.
ప్రాధమిక మరియు ఉచ్ఛారణ రంగుల యొక్క వైవిధ్యాలు రంగు విధులను ఉపయోగించి ఉత్పత్తి చేయబడతాయి. మీకు డెమో.హెచ్ఎమ్ ఫైల్ ఉంటే (మరియు మేము మా ఫ్రేమ్‌వర్క్‌లో చేస్తాము) ఈ విధానం ఉపయోగపడుతుంది, తద్వారా మీరు పొందిన రంగులతో సంతృప్తి చెందే వరకు ఫంక్షన్ల విలువలను సర్దుబాటు చేయవచ్చు. షేడ్స్ (లేదా తటస్థ) రంగులు క్రోమా.జెస్ ఉపయోగించి ఉత్పత్తి చేయబడతాయి. ఈ సందర్భంలో, ఫంక్షన్లను ఉపయోగించడం అనువైనది కాదు, ఎందుకంటే మీకు సాధారణంగా రెండు వ్యతిరేక రంగులు (నలుపు మరియు తెలుపు) ఉంటాయి మరియు మీరు ఈ రెండు రంగుల ఆధారంగా విలువల స్థాయిని సృష్టించాలి.
మిశ్రమానికి అర్థ రంగులను కలుపుతోంది
రంగుల పాలెట్ సిద్ధమైన తర్వాత, మేము అర్థ రంగులను జోడించవచ్చు. సెమాంటిక్ రంగులను సృష్టించడం అంటే రంగుల సంఖ్యను పెంచడం కాదు, సెమాంటిక్ రిఫరెన్స్‌లను ఉపయోగించి రంగులను పంపిణీ చేయడం.
ఇది మంచి విధానం అని నేను ఎందుకు అనుకుంటున్నాను
అన్నింటిలో మొదటిది, ఈ వ్యవస్థ రెండు ముఖ్యమైన రంగులపై ఆధారపడుతుంది: ప్రాథమిక మరియు యాస రంగులు. అంటే మీరు రంగు వేరియబుల్స్ ఉపయోగించాల్సిన అవసరం వచ్చినప్పుడు, ఆ వేరియబుల్స్ దేనిని సూచిస్తాయో గుర్తుంచుకోవడం మీకు కష్టమేమీ కాదు (మీరు "నీలం" మరియు "ఎరుపు" వంటి డిక్లరేటివ్ పేర్లను ఉపయోగించకపోయినా).
మీ సిస్టమ్‌లో మరిన్ని రంగులను చేర్చాల్సి ఉంటుంది (ఉదా., ద్వితీయ రంగు). మీరు ఇప్పటికీ కేవలం మూడు రంగులతో వ్యవహరిస్తున్నారు. మీరు ఉపయోగిస్తున్న విధానంతో సంబంధం లేకుండా 10+ ప్రధాన రంగుల ఆధారంగా వ్యవస్థను నిర్వహించడం కష్టం, కాబట్టి మీరు దీన్ని సరళీకృతం చేయడాన్ని పరిశీలించాలనుకోవచ్చు.
గ్రేస్కేల్ రంగులు వేరే నామకరణ సమావేశాన్ని ఉపయోగిస్తాయి: వేరియబుల్ చివరిలో ఎక్కువ సంఖ్య, ముదురు రంగు.
మీరు ఏ తటస్థ రంగును వర్తింపజేయాలనుకుంటున్నారో మీకు తెలియకపోతే ఈ విధానం సులభమవుతుంది. బూడిద -2 చాలా సూక్ష్మంగా కనిపిస్తే, మీరు బూడిద -3 ను ప్రయత్నించవచ్చు. కొన్ని షేడ్స్ లేవని మీరు గమనించి ఉండవచ్చు (ఉదా., బూడిద -5). మా విషయంలో అవి అవసరం లేదు (వెబ్ భాగాలను సృష్టించేటప్పుడు మేము వాటిని ఎప్పుడూ ఉపయోగించలేదు), కాబట్టి మేము వాటిని రంగుల నుండి తొలగించాము.
సెమాంటిక్ రంగులు మూడు ప్రధాన కారణాల వల్ల మిశ్రమానికి జోడించబడతాయి:
మీరు ఎప్పుడైనా రంగును సవరించాల్సిన అవసరం వచ్చినప్పుడు _colors.scss ఫైల్ సత్యానికి మూలంగా మారుతుంది. టెక్స్ట్ శీర్షిక అంశాలు ముదురు రంగులో ఉండాలని మీరు భావిస్తున్నారా? _Colors.scss ఫైల్‌ను తెరిచి, కలర్-టెక్స్ట్-హెడ్డింగ్ వేరియబుల్‌ను సవరించండి.
మీరు రంగు-సరిహద్దును నిర్వచించినట్లయితే, ఉదాహరణకు, మీరు తదుపరిసారి సరిహద్దు మూలకాన్ని సృష్టించినప్పుడు ఇతర భాగాలలో ఏ బూడిద రంగును ఉపయోగిస్తున్నారో మీరు చూడవలసిన అవసరం లేదు. అదే భావన సరిహద్దులు మాత్రమే కాకుండా అనేక అంశాలకు వర్తిస్తుంది.
విభిన్న ఇతివృత్తాలను సృష్టించడానికి మరియు నిర్వహించడానికి ఇది కేక్ ముక్కగా చేస్తుంది.
ప్లగిన్లు లేదా పాలిఫిల్‌పై ఆధారపడకుండా మేము CSS వేరియబుల్స్‌ని ఉపయోగించిన వెంటనే, రంగు థీమ్‌లను సృష్టించడం చాలా సులభం *! ఈ రోజు మనం థీమ్‌లను సృష్టించలేమని దీని అర్థం? లేదు, మనం చేయగలం. మాకు రెండు ఎంపికలు ఉన్నాయి.
* మా ఫ్రేమ్‌వర్క్‌లో, CSS వేరియబుల్స్ కంపైల్ చేయడానికి మేము postcss-css- వేరియబుల్స్ ప్లగిన్‌ను ఉపయోగిస్తాము. ఇది ప్రస్తుతం CSS తరగతిలో వేరియబుల్స్ నవీకరించడానికి మద్దతు ఇవ్వదు.
ఐచ్ఛికం 1 ఏమైనప్పటికీ CSS వేరియబుల్స్‌ను నవీకరిస్తోంది. వేరియబుల్స్‌కు మద్దతు ఇవ్వని బ్రౌజర్‌లు "డిఫాల్ట్" రంగు థీమ్‌ను చూపుతాయి. కంటెంట్ ప్రాప్యత ఉన్నంతవరకు ఇది సమస్య కాదు.
ఉదాహరణకు, మీకు డిఫాల్ట్ కలర్ థీమ్-వైట్ బ్యాక్‌గ్రౌండ్ మరియు బ్లాక్ టెక్స్ట్ కలర్, మరియు .థీమ్-డార్క్ → బ్లాక్ బ్యాక్‌గ్రౌండ్ మరియు వైట్ టెక్స్ట్ కలర్ ఉన్నాయి. అప్పుడు మీరు రెండు భాగాలను సృష్టిస్తారు, ఒకటి డిఫాల్ట్ థీమ్‌తో, మరొకటి .డార్క్-థీమ్‌తో. డిఫాల్ట్ థీమ్‌తో రెండు భాగాలను కలిగి ఉండటం వినియోగదారు అనుభవాన్ని ప్రభావితం చేయకపోతే, మీరు .dark- థీమ్‌ను మెరుగుదల (ఐచ్ఛికం) గా పరిగణించవచ్చు. ఈ సందర్భంలో, వేరియబుల్స్ ప్రతిచోటా మద్దతు ఇవ్వకపోయినా విభిన్న ఇతివృత్తాలను సృష్టించడానికి వాటిని నవీకరించడం అర్ధమే.
కొన్ని కీ CSS వేరియబుల్స్‌ను నవీకరించే క్రొత్త థీమ్‌ను మీరు ఈ విధంగా సృష్టించారు:
నేను ఈ పరిష్కారాన్ని ప్రేమిస్తున్నాను ఎందుకంటే ఇది రంగు దిద్దుబాటును సంగ్రహిస్తుంది మరియు ఇది మీ రంగు థీమ్‌లను ఒకే ఫైల్‌లో ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది. అలా చేయడం ద్వారా, మేము ఒక CSS తరగతిని వర్తింపజేయడం ద్వారా ప్రతి భాగం యొక్క స్థితిని (థీమ్-ఎ నుండి థీమ్-బి వరకు) మార్చగలము.
ఐచ్ఛికం 2 థీమ్ ద్వారా కనిపించే అన్ని అంశాలను లక్ష్యంగా చేసుకుంటుంది. ఈ పద్ధతి యొక్క ప్రయోజనం ఏమిటంటే దీనికి అన్ని బ్రౌజర్‌ల మద్దతు ఉంది. అయినప్పటికీ, పూర్తిగా CSS వేరియబుల్స్ ఆధారంగా పోలిస్తే నిర్వహించడం అంత సులభం కాదు.
చర్యలో ఉన్న ఎంపిక 2 యొక్క ఉదాహరణ ఇక్కడ ఉంది:
మా ఫ్రేమ్‌వర్క్‌లో రంగులను ఎలా నిర్వహించాలో ఇప్పుడు మీకు తెలుసు! మీకు అభిప్రాయం / సూచనలు ఉంటే, వ్యాఖ్యలో మాకు తెలియజేయండి!
మీరు వ్యాసాన్ని ఆస్వాదించారని నేను ఆశిస్తున్నాను! మరిన్ని వెబ్ డిజైన్ నగ్గెట్స్ కోసం, మీడియం లేదా ట్విట్టర్‌లో మమ్మల్ని అనుసరించండి.
బిల్డింగ్ బ్లాక్ డిజైన్: UXers కోసం మాడ్యులర్ డిజైన్ స్ట్రాటజీCSS సెలెక్టర్లు చీట్‌షీట్ & వివరాలుఫ్లెక్స్‌బాక్స్ మరియు గ్రిడ్‌కు డిజైనర్ గైడ్నిడస్: వేగం, పారదర్శకత మరియు విశ్వసనీయత కోసం రూపొందించిన రిస్క్ కంట్రోల్ బ్లాక్‌చెయిన్డిజైన్ సిస్టమ్స్‌లో విజువల్ బ్రేకింగ్ చేంజ్
mee dizine sistammunu srushtinchandi, part 3: rangulu 2019
cssdizine systamsphrant end devalpementteatro dizine
ee vyaasamlo, memu CSS loo rangu vyavasthanu ela sett cheyalo pariseelistaamu mariyu sistom upayoginchadam mariyu nirvahinchadam sulabham ani nirdhaarinchukovadaanika uttamamaina paddhatulu emiti.
ee vyaasam maa veb bhaagaala librari nundi prerana pondina dizine sistamelapai siriseelo bhagam. librari CSS globals yokka du system maina vyavasthapai aadhaarapadutundi. kabatti idhi maa librari yokka prapancha sailini sett cheyadam nerchukunna vishayaalanu panchukuntamu!
artical siries:
- part 1: typography
- part 2: grid & leavut
- part 3: rangulu
- part 4: antaram
- part 5: chihnalu
- part 6: batanlu
memu rangu editarnu praarambhinchaamu! kodihous framevarkyke anukuulamgaa unde rangula paletylu mariyu theemlanu roopondinche veb dizine saadhanam.
rangu variables 101
itara CSS globals maadirigaa kakunda, rangu vyavasthanu srushtinchadam coding gurinchi 10u mariyu semantics gurinchi 90u. mee _colors.scss filemlo panichestunnappudu, meeru ee krindi lakshyaalanu gurtunchukovali:
rangu variables gurtunchukovadam sulabham undaali you meeru eppudaina rangunu enchukovalasi vachinappudu global failenu tanikhee cheyakudadu.
sistom aptadet cheyadam sulabham u meeru rangulanu jodistaaru, teesivestaaru mariyu paeru marchandi. alaa cheyadam sanklishtamgaa ledani nirdhaarinchukondi.
sistamlo avasaramaina rangulu matrame undaali u memu deenni chaalaasaarlu vinnami ayinappatiki manam ellappuduu manaku avasaramaina daanikante ekkuva rangulatho mugustundi! dizine sistom yokka nijamaina suxes kee avasaram laeni vaatini tolaginchadam (rangulu cherchabaddaayi).
semantic vs diclarative rangulu
rangu variables sett cheyadaaniki vachinappudu, rendu pradhaana vidhaanaalu unnaayi: semantic mariyu diclerative collers.
semantic vidhaanam ilaa undi:
prakatana vidhaanam yokka udaaharana ikkada undi:
ee rendoo tappu kaadu. mee avasaraalanu teerchagaladaanni enchukovadam chala amsaalapai aadhaarapadi untundi (udaa., praject parimaanam, branding rangula v chityam modalainavi).
maa framework yokka _colors.scss filemlo panichestunnappudu, viniyogadaarulu deenni savarinchabotunnarani nenu parigananaloki teesukovalasi vachindi (100u). ante diclerative vidhaanam upayoginchadaaniki sulabhamainadi ayinappatiki, vyavasthanu nirvahinchadaaniki nenu daanini semantic vidhaanamtho kalapali.
avasaramaina rangula
step nambar van veb bhaagaalanu srushtinchadaaniki avasaramaina kaneesa rangulanu prakatinchindi. saadhaaranamgaa, avasaramaina rangula palet veetini kaligi untundi:
pradhaana / praadhamika rangu the linkelu, buton nepathya rangu modalaina vaati kosam upayogistaaru. saadhaaranamgaa, idhi pradhaana kaal-tu-action rangu.
yaasa rangu the paejeelo mukhyamainadaanni hylite cheyadaaniki upayoginchabadutundi. idhi praadhamika rangu yokka vaividhyam kaakuudadu, cony paripuurakaramaina rangu.
tatastha rangula sthaayi text idhi saadhaaranamgaa text eliments, suukshma amsaalu, sarihaddulu modalaina vaati kosam upayoginchaalsina graceskel tonla scale.
abhipraya rangulu u vijayam, lopam, hecharika.
ee rangulalo konnintiki vaividhyam avasaram (muduru / telikaina version), tarachugaa intaraaktivitiini hylite cheyadaaniki upayogistaaru (udaa.,: hover /: active states).
CSS loo, idhi deeniki anuvadistundi:
* gamanika: memu anni brousernalaku anukuulamgaa unde RGBA kodeloki rangu functionlanu anuvadinchadaaniki postesis-kalar-mod-function plagneennu upayogistunnamu.
paina unna snippet rangula paletynu suuchistumdi: prajectelo upayoginchina anni rangulu.
praadhamika mariyu uchchaarana rangula yokka vaividhyaalu rangu vidhulanu upayoginchi utpatti cheyabadataayi. meeku demo.hechm fail unte (mariyu memu maa framevarkri chestamu) ee vidhaanam upayogapadutundi, tadwara meeru pondina rangulatho santrupti chende varaku functionla viluvalanu sardubaatu cheyavachu. shades (leda tatastha) rangulu croma.jes upayoginchi utpatti cheyabadataayi. ee sandarbhamlo, functionlanu upayoginchadam anuvainadi kaadu, endukante meeku saadhaaranamgaa rendu vyatireka rangulu (nalupu mariyu telupu) untaayi mariyu meeru ee rendu rangula aadhaaramgaa viluvala sthaayini srushtinchaali.
mishramaaniki artha rangulanu kaluputondi
rangula palet siddhamaina tarvaata, memu artha rangulanu jodinchavachhu. semantic rangulanu srushtinchadam ante rangula sankhyanu penchadam kaadu, semantic referanselanu upayoginchi rangulanu pampinee cheyadam.
idhi manchi vidhaanam ani nenu enduku anukuntunnanu
annintilo modatidi, ee vyavastha rendu mukhyamaina rangulapai aadhaarapadutundi: praathamika mariyu yaasa rangulu. ante meeru rangu variables upayoginchaalsina avasaram vachinappudu, aa variables denini suchistayo gurtunchukovadam meeku kashtamemi kaadu (meeru "neelam" mariyu "erupu" vanti diclerative paerlanu upayoginchakapoyina).
mee sistamlo marinni rangulanu cherchalsi untundi (udaa., dviteeya rangu). meeru ippatikee kevalam moodu rangulatho vyavaharistunnaaru. meeru upayogistunna vidhaanamtho sambandham lekunda 10+ pradhaana rangula aadhaaramgaa vyavasthanu nirvahinchadam kashtam, kabatti meeru deenni saralikrutam cheyadaanni pariseelinchaalanukovachch.
graceskel rangulu vere naamakarana samavesanni upayogistaayi: variable chivarilo ekkuva sankhya, muduru rangu.
meeru e tatastha rangunu vartimpajeyaalanukuntu meeku teliyakapothe ee vidhaanam sulabhamavutundi. boodida -2 chala suukshmamgaa kanipiste, meeru boodida -3 nu prayatninchavacchu. konni shades levani meeru gamaninchi undavacchu (udaa., boodida -5). maa vishayamlo avi avasaram ledu (veb bhaagaalanu srushtinchetappudu memu vaatini eppuduu upayoginchaledu), kabatti memu vaatini rangula nundi tolaginchaamu.
semantic rangulu moodu pradhaana kaaranaala valla mishramaaniki jodinchabadataayi:
meeru eppudaina rangunu savarinchaalsina avasaram vachinappudu _colors.scss fail satyaaniki moolamgaa maarutundi. text sheershika amsaalu muduru rangulo undaalani meeru bhavistunnara? _Colors.scss failenu terichi, kalar-text-headding vaeriyabulnu savarinchandi.
meeru rangu-sarihaddunu nirvachinchinatlayite, udaaharanaku, meeru taduparisaari sarihaddu moolakaanni srushtinchinappudu itara bhaagaalalo e boodida rangunu upayogistunnaro meeru chudavalasina avasaram ledu. adhe bhavana sarihaddulu matrame kakunda aneka amsaalaku vartistundi.
vibhinna itivruttaalanu srushtinchadaaniki mariyu nirvahinchadaaniki idhi kek mukkagaa chestundi.
plaginlu leda polyphilepy aadharapadakunda memu CSS veriyabulseni upayoginchina ventane, rangu theemlanu srushtinchadam chala sulabham *! ee roju manam theemlanu srushtinchalemani deeni artham? ledu, manam cheyagalam. maaku rendu empikalu unnaayi.
* maa framevarkri, CSS variables compile cheyadaaniki memu postcss-css- variables plaginne upayogistaamu. idhi prastutam CSS taragatilo variables naveekarinchadaaniki maddatu ivvadu.
aichikam 1 emainappatiki CSS veriyabulsenu naveekaristondi. veriyabulseaku maddatu ivvani brouserlu "defalt" rangu theemnu chuuputaayi. content praapyata unnantavaraku idhi samasya kaadu.
udaaharanaku, meeku defalt kalar theem-white backeground mariyu black text kalar, mariyu .theem-dark u black backeground mariyu white text kalar unnaayi. appudu meeru rendu bhaagaalanu srushtistaaru, okati defalt theemetho, marokati .dark-theemetho. defalt theemetho rendu bhaagaalanu kaligi undatam viniyogadaaru anubhavaanni prabhaavitam cheyakapothe, meeru .dark- theemnu merugudala (aichikam) gaa pariganinchavacchu. ee sandarbhamlo, variables pratichota maddatu ivvakapoyina vibhinna itivruttaalanu srushtinchadaaniki vaatini naveekarinchadam ardhame.
konni kee CSS veriyabulsenu naveekarinche krotta theemnu meeru ee vidhamgaa srushtinchaaru:
nenu ee parishkaaraanni premistunnaanu endukante idhi rangu diddubaatunu sangrahistundi mariyu idhi mee rangu theemlanu oke filemlo unchadaaniki mimmalni anumatistundi. alaa cheyadam dwara, memu oka CSS taragatini vartimpajeyadam dwara prati bhagam yokka sthitini (theem-e nundi theem-bi varaku) maarchagalamu.
aichikam 2 theem dwara kanipinche anni amsaalanu lakshyamgaa chesukuntundi. ee paddhati yokka prayojanam emitante deeniki anni brouserla maddatu undi. ayinappatiki, puurtigaa CSS variables aadhaaramgaa poliste nirvahinchadam anta sulabham kaadu.
charyalo unna empika 2 yokka udaaharana ikkada undi:
maa framevarkri rangulanu ela nirvahinchaalo ippudu meeku telusu! meeku abhiprayam / suuchanalu unte, vyaakhyalo maaku teliyajeyandi!
meeru vyaasaanni aasvaadinchaarani nenu aasistunnaanu! marinni veb dizine naggets kosam, meedium leda twitterle mammalni anusarinchandi.
bilding black dizine: UXers kosam madular dizine strataziCSS selectorlu cheetisheet & viveraluflexibo mariyu gridke desiner gidnidus: vegam, paaradarsakata mariyu viswasaneeyata kosam roopondinchina risk control blacchecheindisine systamselo vijuval braking chenj