Lily ਕੀ ਹੈ?
ਇੱਕ ਮੁਫ਼ਤ, ਓਪਨ-ਸੋਰਸ, ਪਹੁੰਚਯੋਗਤਾ-ਪਹਿਲਾਂ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਜੋ ਤੁਹਾਨੂੰ ਉੱਥੇ ਮਿਲਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਕੋਡ ਲਿਖਦੇ ਹੋ — ਅਤੇ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਤਾਂ ਰਾਹ ਵਿੱਚੋਂ ਹਟ ਜਾਂਦਾ ਹੈ।
ਸੰਖੇਪ ਰੂਪ
Lily ਇੱਕ ਕੈਟਾਲਾਗ ਹੈ ਵੈੱਬ ਕੰਪੋਨੈਂਟਾਂ ਦਾ, ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਅੱਠ ਹੈੱਡਲੈੱਸ ਰੂਪਾਂ (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ਅਤੇ Web Components) ਵਿੱਚ ਲਾਗੂ ਹੈ, ਨਾਲ ਹੀ ਪੂਰੀਆਂ ਉਦਾਹਰਨ ਐਪਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਜੋ ਦਿਖਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇਨ੍ਹਾਂ ਨੂੰ ਸਟਾਈਲ ਕਿਵੇਂ ਕਰਨਾ ਹੈ।
ਹੈੱਡਲੈੱਸ ਸੰਸਕਰਣ ਆਉਂਦੇ ਹਨ ਜ਼ੀਰੋ CSS ਨਾਲ। ਇਹ ਤੁਹਾਨੂੰ ਸਿਮੈਂਟਿਕ HTML, ARIA ਭੂਮਿਕਾਵਾਂ ਅਤੇ ਸਥਿਤੀਆਂ, ਕੀਬੋਰਡ ਸਮਰਥਨ ਅਤੇ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ-ਅਨੁਕੂਲ ਪ੍ਰੋਪਸ ਦਿੰਦੇ ਹਨ। ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਤੁਸੀਂ ਲਿਆਉਂਦੇ ਹੋ।
ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤ
ਪਹੁੰਚਯੋਗ
ਹਰ ਕੰਪੋਨੈਂਟ ਸਿਮੈਂਟਿਕ HTML ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ। ARIA ਸਿਰਫ਼ ਉੱਥੇ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ ਜਿੱਥੇ ਇਕੱਲਾ HTML ਪੈਟਰਨ ਨੂੰ ਪ੍ਰਗਟ ਨਹੀਂ ਕਰ ਸਕਦਾ। ਕੰਪੋਨੈਂਟ ਇਸ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ: 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.
ਸਥਿਤੀ: Lily ਬਿਲਕੁਲ ਨਵਾਂ ਕੰਮ ਹੈ ਅਤੇ ਅਸੀਂ ਸਹਿਯੋਗ, ਮਾਰਗਦਰਸ਼ਨ ਅਤੇ ਫੀਡਬੈਕ ਦਾ ਸਵਾਗਤ ਕਰਦੇ ਹਾਂ। ਚੀਜ਼ਾਂ ਬਦਲਣਗੀਆਂ ਅਤੇ ਵਿਕਸਿਤ ਹੋਣਗੀਆਂ।