Lily ਦੇ ਹੱਕ ਵਿੱਚ ਦਲੀਲ

Lily ਤੁਹਾਨੂੰ ਔਖੇ ਹਿੱਸੇ ਦਿੰਦਾ ਹੈ — ਸਿਮੈਂਟਿਕਸ, ਪਹੁੰਚਯੋਗਤਾ, ਕੀਬੋਰਡ ਵਿਹਾਰ, ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ — ਅਤੇ ਦਿੱਖ ਪੂਰੀ ਤਰ੍ਹਾਂ, ਖ਼ੁਸ਼ੀ ਨਾਲ, ਤੁਹਾਡੇ ਉੱਤੇ ਛੱਡ ਦਿੰਦਾ ਹੈ।

ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ

ਤੁਹਾਡੀ ਟੀਮ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦੀ ਹੈ ਕਿ ਤੁਹਾਡਾ ਉਤਪਾਦ ਕਿਹੋ ਜਿਹਾ ਦਿਸਣਾ ਚਾਹੀਦਾ ਹੈ। Lily ਬਿਲਕੁਲ ਉੱਥੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ: ਇਹ ਉਹ ਹਿੱਸੇ ਦਿੰਦਾ ਹੈ ਜੋ ਸੱਚਮੁੱਚ ਸਹੀ ਕਰਨੇ ਔਖੇ ਅਤੇ ਦੁਬਾਰਾ ਕਰਨੇ ਮਹਿੰਗੇ ਹਨ — ਸਹੀ ਸਿਮੈਂਟਿਕ ਐਲੀਮੈਂਟ, ARIA ਸਥਿਤੀਆਂ, ਕੀਬੋਰਡ ਇਕਰਾਰਨਾਮਾ, ਫੋਕਸ ਪ੍ਰਬੰਧਨ — ਅਤੇ ਹਰ ਵਿਜ਼ੂਅਲ ਫ਼ੈਸਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ, ਖ਼ੁਸ਼ੀ ਨਾਲ, ਤੁਹਾਡੇ ਉੱਤੇ ਛੱਡਦਾ ਹੈ। ਤੁਹਾਡੀ CSS ਪਹਿਲੇ ਦਿਨ ਤੋਂ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਦੀ ਦਿੱਖ ਹੈ।

ਕਿਉਂਕਿ ਹਰ ਕੰਪੋਨੈਂਟ ਇੱਕ ਸਥਿਰ ਕਲਾਸ ਹੁੱਕ ਅਤੇ ਸ਼ੁੱਧ ਬਣਤਰ ਰੱਖਦਾ ਹੈ, ਤੁਹਾਡੀ ਸਟਾਈਲਿੰਗ ਹਰ ਅੱਪਗ੍ਰੇਡ ਵਿੱਚ ਸਾਫ਼-ਸਾਫ਼ ਤੁਹਾਡੀ ਰਹਿੰਦੀ ਹੈ — ਅਤੇ ਹੇਠਲੀ ਪਹੁੰਚਯੋਗਤਾ ਸੰਸਕਰਣ ਦਰ ਸੰਸਕਰਣ ਕੰਮ ਕਰਦੀ ਰਹਿੰਦੀ ਹੈ।

Lily ਕਿਸ ਲਈ ਵਚਨਬੱਧ ਹੈ

  • ਮੂਲ ਰੂਪ ਵਿੱਚ ਪਹੁੰਚਯੋਗ। WCAG 2.2 AAA ਹਰ ਕੰਪੋਨੈਂਟ ਦਾ ਨਿਸ਼ਾਨਾ ਹੈ। ਪੈਟਰਨ WAI-ARIA Authoring Practices ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ; ਹਰ ਇੰਟਰਐਕਟਿਵ ਕੰਪੋਨੈਂਟ ਦਸਤਾਵੇਜ਼ੀ ਇਕਰਾਰਨਾਮੇ ਨਾਲ ਕੀਬੋਰਡ ਤੋਂ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ; ਉਦਾਹਰਨ ਐਪਾਂ ਸਾਫ਼ axe-core ਬੇਸਲਾਈਨ ਰੱਖਦੀਆਂ ਹਨ।
  • ਬਣਤਰ ਤੋਂ ਹੀ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ ਯੋਗ। ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਸਣ ਵਾਲੀ ਹਰ ਸਟ੍ਰਿੰਗ — ਹਰ ਲੇਬਲ, ਗ਼ਲਤੀ ਅਤੇ ਘੋਸ਼ਣਾ — ਫ੍ਰੇਮਵਰਕਾਂ ਵਿੱਚ ਸਥਿਰ ਨਾਵਾਂ ਵਾਲਾ ਪ੍ਰੋਪ ਹੈ, ਇਸ ਲਈ ਅਨੁਵਾਦ ਸੁਭਾਵਿਕ ਵਗਦਾ ਹੈ। RTL ਅਤੇ ਦੋ-ਦਿਸ਼ਾਈ ਟੈਕਸਟ ਤੁਹਾਡੇ dir ਤੋਂ ਵਿਰਸੇ ਵਿੱਚ ਲੈਂਦੇ ਹਨ। ਲੋਕੇਲ-ਜਾਗਰੂਕ ਕੰਪੋਨੈਂਟ ਲੋਕੇਲ ਨੂੰ ਪ੍ਰੋਪ ਵਜੋਂ ਲੈਂਦੇ ਹਨ, ਹਮੇਸ਼ਾ ਸਪੱਸ਼ਟ ਤੌਰ ਤੇ।
  • ਇੱਕ ਕੈਟਾਲਾਗ, ਅੱਠ ਫ੍ਰੇਮਵਰਕ। ਉਹੀ 571 ਕੰਪੋਨੈਂਟ (536 ਨੇਟਿਵ Web Components ਵਜੋਂ) ਉਹੀ ਕਲਾਸ ਹੁੱਕਾਂ ਅਤੇ ਪ੍ਰੋਪ ਰੀਤਾਂ ਨਾਲ HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ਅਤੇ Web Components ਵਿੱਚ। ਤੁਹਾਡੀ CSS ਅਤੇ ਟੀਮ ਦਾ ਗਿਆਨ ਸਟੈਕਾਂ ਵਿੱਚ ਤਬਦੀਲ ਹੁੰਦਾ ਹੈ।
  • CSS ਰਣਨੀਤੀ ਤੋਂ ਸੁਤੰਤਰ। ਹਰ ਕੰਪੋਨੈਂਟ ਰੂਟ ਲਈ ਇੱਕ ਸਥਿਰ ਕਬਾਬ-ਕੇਸ ਕਲਾਸ। ਸਿਮੈਂਟਿਕ CSS, Tailwind ਯੂਟਿਲਿਟੀਆਂ, CSS-in-JS, ਜਾਂ 57 ਤਿਆਰ ਥੀਮਾਂ ਵਿੱਚੋਂ ਇੱਕ — Lily ਸਭ ਦਾ ਸਵਾਗਤ ਕਰਦਾ ਹੈ ਅਤੇ ਸਲੀਕੇ ਨਾਲ ਰਾਹ ਵਿੱਚੋਂ ਹਟ ਜਾਂਦਾ ਹੈ।
  • ਮੁਫ਼ਤ, ਹਮੇਸ਼ਾ ਲਈ, ਤੁਹਾਡੀਆਂ ਸ਼ਰਤਾਂ ਉੱਤੇ। BSD, MIT, Apache-2.0, GPL-2.0, ਜਾਂ GPL-3.0 ਦੀ ਤੁਹਾਡੀ ਚੋਣ ਅਧੀਨ ਓਪਨ ਸੋਰਸ। ਕੋਈ ਪ੍ਰੋ ਦਰਜਾ ਨਹੀਂ, ਕੋਈ ਸੀਟ ਲਾਇਸੰਸ ਨਹੀਂ, ਕੋਈ ਟੈਲੀਮੈਟਰੀ ਨਹੀਂ।

ਜਿੱਥੇ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਉੱਥੇ ਡੂੰਘਾਈ

ਆਮ ਬਟਨਾਂ ਅਤੇ ਡਾਇਲਾਗਾਂ ਤੋਂ ਪਰੇ, ਕੈਟਾਲਾਗ ਜ਼ਿਆਦਾਤਰ ਨਾਲੋਂ ਅੱਗੇ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ:

  • ਜਨਤਕ ਖੇਤਰ ਦੇ ਪੈਟਰਨ NHS UK, GOV.UK, USWDS ਅਤੇ ONS ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਤੋਂ ਖੋਜੇ ਗਏ — ਗ਼ਲਤੀ ਸਾਰ, ਚੇਤਾਵਨੀ ਬਕਸੇ, ਸਾਰ ਸੂਚੀਆਂ, ਪੜਾਅ ਬੈਨਰ, ਛੱਡਣ ਵਾਲੇ ਲਿੰਕ।
  • 140 ਰਾਸ਼ਟਰੀ ਨਿੱਜੀ ਪਛਾਣਕਰਤਾ ਕੰਪੋਨੈਂਟ ਜੋ 50 ਤੋਂ ਵੱਧ ਦੇਸ਼ਾਂ ਵਿੱਚ ਸਿਹਤ ਸੰਭਾਲ, ਰਾਸ਼ਟਰੀ ਪਛਾਣ, ਟੈਕਸ ਅਤੇ ਪਾਸਪੋਰਟ ਪਛਾਣਕਰਤਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ, ਹਰੇਕ ਆਪਣਾ ਫਾਰਮੈਟ ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਐਲਗੋਰਿਥਮ ਦਸਤਾਵੇਜ਼ੀ ਕਰਦਾ ਹੈ।
  • ਸੰਪਾਦਕੀ ਅਤੇ scrollytelling ਮੁੱਢਲੇ ਤੱਤ Reuters Graphics ਤੋਂ ਅਪਣਾਏ ਗਏ — ਲੇਖ ਲੇਆਉਟ, ਸਕ੍ਰੋਲਰ, ਟਾਈਮਲਾਈਨਾਂ, ਟਾਈਲ ਨਕਸ਼ੇ।
  • ਚੋਣਕਾਰ ਸਹਾਇਕ — ਛੋਟੇ ਪੈਕੇਜ ਜੋ ਇੱਕ ਪਰਸਪਰ ਕਿਰਿਆ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ ਸੰਭਾਲਦੇ ਹਨ: ਥੀਮ ਬਦਲਣਾ (ਰਨਟਾਈਮ ਸਟਾਈਲਸ਼ੀਟ ਲੋਡਿੰਗ ਨਾਲ), ਭਾਸ਼ਾ, ਟੈਕਸਟ ਆਕਾਰ, ਘਟਾਈ ਗਤੀ, ਖੋਜ, ਪੰਨਾ ਲਿੰਕ, ਸਾਂਝਾ ਕਰਨਾ, ਅਤੇ ਤਾਰੀਖ਼-ਸਮਾਂ ਦਾਖ਼ਲਾ। ਹਰੇਕ ਇੱਕ ਹੈੱਡਲੈੱਸ ਆਈਕਨ ਬਟਨ ਹੈ ਜੋ ਪੌਪਅੱਪ ਖੋਲ੍ਹਦਾ ਹੈ — ਨੇਟਿਵ <select> ਨਹੀਂ — ਬਿਲਟ-ਇਨ ਸਥਾਈਪਣ ਅਤੇ SSR ਸੁਰੱਖਿਆ ਨਾਲ।

ਜਨਤਕ ਖੇਤਰ ਲਈ ਥੀਮ, ਡੱਬੇ ਵਿੱਚੋਂ ਹੀ ਤਿਆਰ

Lily 57 ਸੁਤੰਤਰ ਹਵਾਲਾ ਥੀਮ ਦਿੰਦਾ ਹੈ ਜੋ ਸਿੱਧਾ ਇਸ ਦੇ ਕਲਾਸ ਹੁੱਕਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ: NHS England, NHS Scotland ਅਤੇ NHS Wales (ਹਰੇਕ ਮਰੀਜ਼-ਮੁਖੀ ਅਤੇ ਪ੍ਰੈਕਟੀਸ਼ਨਰ-ਮੁਖੀ ਰੂਪਾਂ ਵਿੱਚ), GOV.UK, USWDS, Adobe Spectrum ਅਤੇ Mozilla Protocol ਤੋਂ ਪ੍ਰੇਰਿਤ ਰੰਗ-ਪੱਟੀਆਂ, ਅਤੇ ਆਮ-ਮੰਤਵ ਹਲਕੇ ਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਦਾ ਇੱਕ ਸੈੱਟ। ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਜੋੜੋ ਅਤੇ ਸਰਕਾਰੀ ਪੱਧਰ ਦੀ ਦਿੱਖ ਚਾਲੂ ਹੋ ਜਾਂਦੀ ਹੈ; ਸਹਾਇਕ theme-picker ਇਨ੍ਹਾਂ ਨੂੰ ਰਨਟਾਈਮ ਤੇ ਬਦਲਦਾ ਹੈ।

Lily ਦੀ ਤੁਲਨਾ ਕਿਵੇਂ ਹੁੰਦੀ ਹੈ

ਅਸੀਂ ਇੱਕ ਇਮਾਨਦਾਰ, ਕੰਪੋਨੈਂਟ-ਦਰ-ਕੰਪੋਨੈਂਟ ਹੋਰ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਨਾਲ ਤੁਲਨਾ ਰੱਖਦੇ ਹਾਂ — ਸਟਾਈਲ ਕੀਤੇ ਅਤੇ ਹੈੱਡਲੈੱਸ, ਵਪਾਰਕ ਅਤੇ ਜਨਤਕ ਖੇਤਰ ਦੇ। ਜਿੱਥੇ ਕੋਈ ਹੋਰ ਲਾਇਬ੍ਰੇਰੀ ਤੁਹਾਡੇ ਲਈ ਬਿਹਤਰ ਫਿੱਟ ਹੈ, ਤੁਲਨਾ ਇਹ ਦਿਖਾਏਗੀ; Lily ਸਭ ਤੋਂ ਸਿੱਖਦਾ ਹੈ ਅਤੇ ਆਪਣੀ ਪ੍ਰੇਰਨਾ ਦੇ ਸਰੋਤ ਖੁੱਲ੍ਹੇਆਮ ਦੱਸਦਾ ਹੈ।

ਇਸ ਦੇ ਪਿੱਛੇ ਕੌਣ ਹੈ

Lily ਇੱਕ ਨੌਜਵਾਨ, ਸੁਤੰਤਰ ਓਪਨ-ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ ਸਹਿਯੋਗ, ਮਾਰਗਦਰਸ਼ਨ ਅਤੇ ਫੀਡਬੈਕ ਦਾ ਸਵਾਗਤ ਕਰਦਾ ਹੈ — ਵੇਖੋ ਬਾਰੇ ਕਹਾਣੀ ਅਤੇ ਪ੍ਰੇਰਨਾਵਾਂ ਲਈ। ਸਭ ਕੁਝ — ਵਿਸ਼ੇਸ਼ਤਾ, ਟੈਸਟ, ਰੋਡਮੈਪ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਆਡਿਟ ਟੂਲ ਵੀ — ਖੁੱਲ੍ਹੇ ਹਨ: github.com/LilyDesignSystem.

Lily ਨੂੰ ਵਧਣ ਵਿੱਚ ਮਦਦ ਕਰੋ

ਜੇ Lily ਤੁਹਾਡੇ ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਤਾਂ ਸਭ ਤੋਂ ਕੀਮਤੀ ਚੀਜ਼ਾਂ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:

  • ਤਾਰਾ ਦਿਓ ਅਤੇ ਸਾਂਝਾ ਕਰੋ। ਨੂੰ ਤਾਰਾ ਦਿਓ ਮੁੱਖ ਰੈਪੋ ਅਤੇ ਕਿਸੇ ਸਹਿਕਰਮੀ ਨੂੰ ਕੈਟਾਲਾਗ ਦਿਖਾਓ — ਜਾਗਰੂਕਤਾ ਇੱਕ ਨੌਜਵਾਨ ਪ੍ਰੋਜੈਕਟ ਕੋਲ ਸਭ ਤੋਂ ਦੁਰਲੱਭ ਸਰੋਤ ਹੈ।
  • ਕੁਝ ਬਣਾਓ ਅਤੇ ਸਾਨੂੰ ਦੱਸੋ। ਅਸਲ-ਸੰਸਾਰ ਵਰਤੋਂ ਦੀਆਂ ਰਿਪੋਰਟਾਂ — ਕੀ ਕੰਮ ਕੀਤਾ, ਕੀ ਹੋਰ ਸੁਚਾਰੂ ਹੋ ਸਕਦਾ ਸੀ — ਰੋਡਮੈਪ ਨੂੰ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨਾਲੋਂ ਵੱਧ ਰੂਪ ਦਿੰਦੀਆਂ ਹਨ।
  • ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਆਡਿਟ ਕਰੋ। ਸਕ੍ਰੀਨ-ਰੀਡਰ ਪਾਸ (VoiceOver, NVDA, JAWS) ਉਦਾਹਰਨ ਐਪਾਂ ਉੱਤੇ ਸੋਨੇ ਦੇ ਬਰਾਬਰ ਹਨ; ਜੋ ਮਿਲੇ ਉਹ ਦਰਜ ਕਰੋ।
  • ਇੱਕ ਥੀਮ ਜਾਂ ਅਨੁਵਾਦ ਦਾ ਯੋਗਦਾਨ ਪਾਓ। ਦੋਵੇਂ ਸਵੈ-ਸੰਪੂਰਨ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਹੱਦਬੰਦੀ ਵਾਲੇ ਪਹਿਲੇ ਯੋਗਦਾਨ ਹਨ।
  • ਜੋ ਤੁਹਾਨੂੰ ਮਿਲੇ ਉਹ ਘੱਟੋ-ਘੱਟ ਮੁੜ-ਉਤਪਾਦਨ ਸਮੇਤ ਸਾਂਝਾ ਕਰੋ, GitHub ਰਿਪੋਜ਼ਟਰੀ ਉੱਤੇ, ਜਾਂ ਈਮੇਲ ਕਰੋ joel@joelparkerhenderson.com.