Lily nedir?

Kısa özet

Lily, bir web bileşenleri kataloğudur; her biri sekiz başsız (headless) çeşitte uygulanmıştır (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ve Web Components). Ayrıca bunların nasıl biçimlendirileceğini gösteren, her şeyi içeren bir dizi örnek uygulama sunar.

Başsız sürümler sıfır CSS ile gelir. Size anlamsal HTML, ARIA rolleri ve durumları, klavye desteği ve çok dilliliğe uygun prop'lar sunar. Görsel tasarımı siz getirirsiniz.

Tasarım ilkeleri

Erişilebilir

Her bileşen anlamsal HTML ile başlar. ARIA yalnızca HTML'nin tek başına deseni ifade edemediği yerlerde eklenir. Bileşenler WCAG 2.2 AAA düzeyini hedefler — renkler, boşluklar, odak ve klavye gezinmesi hep göz önünde bulundurulur.

Birleştirilebilir

Lily, birbirine geçen küçük, tek amaçlı bileşenleri tercih eder. Bileşik desenler tekrar tekrar karşımıza çıkar:

• Nav → List → ListItem — ekmek kırıntıları, içindekiler listeleri, akordeon menüler, ağaç menüler ve sayfalama için
• Form → Field → Input — etiketli, ipuçlu ve hatalı her form düzeni için
• Table → Head/Body/Foot → Row → Data — tablolar, takvimler, Gantt şemaları ve kanban panoları için
• Bar → BarButton — araç çubukları, sekme çubukları, görev çubukları, eylem çubukları ve menü çubukları için
• Picker → PickerButton — renk seçiciler, derecelendirme seçiciler, tema seçiciler için

Uluslararasılaştırılabilir

Kullanıcıya dönük tek bir dize bile koda gömülü değildir. Etiketler, yer tutucular, hata iletileri, düğme metinleri — hepsi parametredir. Kendi çeviri sisteminizi bağlayın; Lily siz hangi dili konuşuyorsanız onu konuşur.

Başsız

Başsız bileşenlerde CSS yoktur, hiçbir <style> bloğu yoktur, sizin seçmediğiniz hiçbir tasarım belirteci yoktur. Her kök öğede tek bir kebab-case sınıf adı sunarlar; böylece istediğiniz gibi hedefleyebilirsiniz — anlamsal CSS, Tailwind, CSS-in-JS, karar sizin.

Her şeyi içeren örnekler

Örnek uygulamalar, bileşenlerin gerçek kullanım için nasıl biçimlendirileceğini gösterir — hangi tasarım belirteçleri ayarlanmalı, hangi varyasyonlar eklenmeli, sayfalar nasıl oluşturulmalı. Bunlar yalnızca deneme alanları değil, tam SvelteKit, Next.js, Nuxt, Blazor ve Eleventy uygulamalarıdır.

İlham kaynakları

Lily, kasıtlı olarak geniş tutulmuş bir tasarım sistemleri kümesinden desenler ve dil alır:

• 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

Lisans

Lily, şu lisanslar altında çoklu lisanslıdır: BSD, MIT, Apache-2.0, GPL-2.0 veya GPL-3.0. Projenize uyanı seçin. Hiçbiri uymuyorsa bizimle iletişime geçin.

İletişim

Proje lideri: Joel Parker Henderson — joel@joelparkerhenderson.com.

Bir hata mı buldunuz, bir fikriniz mi var, bir bileşen katkısı yapmak mı istiyorsunuz? Şurada bir issue veya pull request açın: GitHub.