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.