Lily అంటే ఏమిటి?

సంక్షిప్తంగా

Lily అనేది వెబ్ భాగాల జాబితా; ప్రతి భాగం ఎనిమిది హెడ్‌లెస్ రూపాల్లో (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks మరియు Web Components) అమలు చేయబడింది, వాటికి శైలి ఎలా ఇవ్వాలో చూపే పూర్తి ఉదాహరణ యాప్‌ల సమితితో పాటు.

హెడ్‌లెస్ వెర్షన్లు వస్తాయి సున్నా CSS తో. అవి మీకు సెమాంటిక్ HTML, ARIA పాత్రలు మరియు స్థితులు, కీబోర్డ్ మద్దతు మరియు అంతర్జాతీయీకరణకు అనుకూలమైన ప్రాప్‌లను ఇస్తాయి. దృశ్య రూపకల్పనను మీరు తీసుకువస్తారు.

డిజైన్ సూత్రాలు

అందుబాటులో ఉండేది

ప్రతి భాగం సెమాంటిక్ HTML నుండి మొదలవుతుంది. HTML ఒక్కటే నమూనాను వ్యక్తపరచలేని చోట మాత్రమే ARIA జోడించబడుతుంది. భాగాలు లక్ష్యంగా పెట్టుకునేది: WCAG 2.2 AAA — రంగులు, ఖాళీలు, ఫోకస్ మరియు కీబోర్డ్ నావిగేషన్ అన్నీ పరిగణనలోకి తీసుకోబడతాయి.

కలపదగినది

Lily ఒకదానిలో ఒకటి ఇమిడే చిన్న, ఏకైక-ఉద్దేశ్య భాగాలను ఇష్టపడుతుంది. సంయుక్త నమూనాలు మళ్ళీ మళ్ళీ కనిపిస్తాయి:

• Nav → List → ListItem — బ్రెడ్‌క్రంబ్స్, విషయ జాబితాలు, అకార్డియన్ మెనూలు, ట్రీ మెనూలు మరియు పేజీల విభజన కోసం
• Form → Field → Input — లేబుళ్లు, సూచనలు మరియు లోపాలతో ఏ ఫారమ్ లేఅవుట్ కైనా
• Table → Head/Body/Foot → Row → Data — పట్టికలు, క్యాలెండర్లు, గాంట్ చార్టులు మరియు కాన్బన్ బోర్డుల కోసం
• Bar → BarButton — టూల్ బార్లు, ట్యాబ్ బార్లు, టాస్క్ బార్లు, యాక్షన్ బార్లు మరియు మెనూ బార్ల కోసం
• Picker → PickerButton — రంగు ఎంపికలు, రేటింగ్ ఎంపికలు, థీమ్ ఎంపికల కోసం

అంతర్జాతీయీకరించదగినది

వినియోగదారుకు కనిపించే ఒక్క స్ట్రింగ్ కూడా కోడ్‌లో స్థిరంగా రాయబడలేదు. లేబుళ్లు, ప్లేస్‌హోల్డర్లు, లోప సందేశాలు, బటన్ టెక్స్ట్ — అన్నీ పరామితులే. మీ స్వంత అనువాద వ్యవస్థను జోడించండి, మీరు మాట్లాడే ఏ భాషనైనా Lily మాట్లాడుతుంది.

హెడ్‌లెస్

హెడ్‌లెస్ భాగాలకు CSS ఉండదు, ఏ <style> బ్లాకులు ఉండవు, మీరు ఎంచుకోని డిజైన్ టోకెన్లు ఉండవు. అవి ప్రతి రూట్ ఎలిమెంట్‌పై ఒకే కబాబ్-కేస్ క్లాస్ పేరును బహిర్గతం చేస్తాయి, కాబట్టి మీరు కోరినట్లు వాటిని లక్ష్యంగా చేసుకోవచ్చు — సెమాంటిక్ CSS, Tailwind, CSS-in-JS, మీ ఎంపిక.

పూర్తి ఉదాహరణలు

ఉదాహరణ యాప్‌లు నిజమైన వినియోగం కోసం భాగాలకు శైలి ఎలా ఇవ్వాలో చూపుతాయి — ఏ డిజైన్ టోకెన్లు సెట్ చేయాలి, ఏ వైవిధ్యాలు జోడించాలి, పేజీలను ఎలా కూర్చాలి. అవి పూర్తి SvelteKit, Next.js, Nuxt, Blazor మరియు Eleventy యాప్‌లు, కేవలం శాండ్‌బాక్స్‌లు కావు.

స్ఫూర్తి మూలాలు

Lily ఉద్దేశపూర్వకంగా విస్తృతంగా ఎంచుకున్న డిజైన్ వ్యవస్థల నుండి నమూనాలను మరియు భాషను తీసుకుంటుంది:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

లైసెన్స్

Lily బహుళ-లైసెన్స్ పొందింది: BSD, MIT, Apache-2.0, GPL-2.0, లేదా GPL-3.0. మీ ప్రాజెక్టుకు సరిపోయేదాన్ని ఎంచుకోండి. వాటిలో ఏదీ పనిచేయకపోతే, మమ్మల్ని సంప్రదించండి.

సంప్రదింపు

ప్రాజెక్ట్ నాయకుడు: Joel Parker Henderson — joel@joelparkerhenderson.com.

బగ్ కనుగొన్నారా, ఆలోచన ఉందా, భాగాన్ని అందించాలనుకుంటున్నారా? ఇక్కడ issue లేదా pull request తెరవండి: GitHub.