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.
સ્થિતિ: Lily તદ્દન નવું કામ છે અને અમે સહયોગ, માર્ગદર્શન અને પ્રતિસાદનું સ્વાગત કરીએ છીએ. વસ્તુઓ બદલાશે અને વિકસશે.