Lily ile başlarken

Kurulum

Lily tek bir Git monorepo'sunda yaşar; her çerçevenin başsız kütüphanesi, yardımcı paketleri ve örnek uygulaması için ayrı bir dizin vardır. Denemenin en hızlı yolu monorepo'yu klonlayıp yığınınız için başsız kütüphaneyi açmaktır:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install

Aynı kalıp diğer çerçeveler için de geçerlidir:

• @lilydesignsystem/html-headless — kurulum gerekmez; dosyalarını kopyalayın .html
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

Başsız kütüphaneler klonlanmak veya projeye alınmak üzere tasarlanmıştır — kaynak kodunu doğruluk kaynağı sayın ve ihtiyacınız olanı kopyalayın. Tercih yardımcıları ek olarak derleme ve yayın hattıyla (JS çerçeveleri için npm, Blazor için NuGet) kurulabilir paketler olarak da sunulur.

Başsız bileşen kullanma

Başsız bileşenler anlamsal HTML, ARIA ve prop'lar sunar — ama CSS sunmaz. İşte her çerçevede bir Button:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

import Button from "lily-design-system-react-headless/components/Button";

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "button" }) }}

Biçimlendirilmiş örnek kullanma

Örnek uygulamalar CSS, rotalar ve tam demo sayfaları içerir. Denemenin en hızlı yolu SvelteKit, Next, Nuxt, Analog veya Eleventy örnek uygulamasını başlatıp demoyu şurada görmektir: /components.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

Sonra http://localhost:5173 adresini açın ve şuraya göz atın: /components.

Biçimlendirme ve tasarım belirteçleri

Her bileşen, kök öğesinde tek bir kebab-case sınıfla oluşturulur. Örneğin <Button> şuna dönüşür: <button class="button">. İstediğiniz gibi biçimlendirin:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Lily'nin varsayılan renk paleti (örnek uygulamalarda kullanılır):

• Birincil: #2563eb
• Tehlike: #dc2626
• Uyarı: #f59e0b
• Başarı: #16a34a
• Sayfa arka planı: #f9fafb
• Kart arka planı: #ffffff

Bunlar öneridir, zorunluluk değil. Kendi marka paletinizle değiştirin, Lily memnuniyetle uyum sağlar.

Hazır temalar

CSS'i sıfırdan yazmak istemiyor musunuz? Lily, 57 bağımsız başvuru temasını themes/ dizininde sunar. Her biri Lily sınıf kancalarını hedefleyen tek bir stil sayfasıdır — bağlayın, biçimlendirilmiş olursunuz:

<link rel="stylesheet" href="/assets/themes/united-kingdom-government-digital-service.css" />

Küme şunları kapsar:

• Kamu sektörü — NHS England, NHS Scotland ve NHS Wales (her biri hasta ve uygulayıcı sürümleriyle), GOV.UK GDS ve U.S. Web Design System.
• Satıcılardan esinlenenler — Adobe Spectrum, Mozilla Protocol.
• Genel amaçlı — light, dark, nord, dracula, wireframe ve otuz kadar daha.

Tema seçicileri :where(...) kullanır; bu nedenle kendi CSS'iniz özgüllükte her zaman kazanır. Çalışma zamanında geçiş için bunları aşağıdaki theme-picker yardımcısıyla eşleştirin veya şunu izleyin: tema öğreticisi.

Tercih yardımcıları

Her çerçevenin sekiz küçük seçicisi vardır; her biri kendi lily-design-system-{framework}-{package} paketidir (ve bunları bir araya getiren bir picker-bar vardır). Her biri bir açılır pencere açan başsız bir simge düğmesidir — liste kutusu, bağlantı listesi, arama formu veya (date-time-picker için) bir tarih seçici iletişim kutusu — yerel bir <select> değildir; SSR güvenlidir ve CSS içermez:

• theme-picker — yönetilen bir <link>öğesini değiştirerek tema stil sayfalarını çalışma zamanında yükler, belgede data-theme ayarlar ve isteğe bağlı olarak şuraya kalıcı yazar: localStorage.
• locale-picker — lang ve dir ayarlar (otomatik RTL algılamayla); böylece i18n kütüphaneniz takip edebilir; kendisi çeviri yapmaz.
• text-size-picker — data-text-size belgede ayarlar; CSS'iniz her değeri yazı tipi boyutlandırmasına eşler.
• motion-picker — data-motion belgede ayarlar, ziyaretçinin azaltılmış hareket ayarından yola çıkar; neyin bastırılacağına CSS'iniz ve betikleriniz karar verir.
• search-picker — bir arama alanı açan simge düğmesi; gönderme bir arama sayfasına gider. Bir eylemi sahiplenir, bir tercihi değil.
• link-picker — uygulamanızın tanımladığı sayfa bağlantılarının (Ana sayfa, Hakkımızda, Bize ulaşın, Gizlilik politikası, …) menüsünü açan bir ev simgesi. Bir eylemi sahiplenir, bir tercihi değil.
• share-picker — yerel paylaşım sayfasını veya tüketicinin sağladığı hedef listesini ve URL kopyalamayı açar. Bir eylemi sahiplenir, bir tercihi değil: hiçbir şey uygulamaz, hiçbir şey kalıcı yazmaz.
• date-time-picker — bir tarih, bir saat veya her ikisi için metin alanı artı bir APG tarih seçici iletişim kutusu. Bir form değerini sahiplenir, bir tercihi değil: ISO dizesi şuna gidip gelir: <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte kataloğu kanonik başvurudur; React, Vue, Angular, HTML, Nunjucks, Web Components ve Blazor uyarlamaları ona sözleşme sözleşme uyar. yardımcılar öğreticisine.

Erişilebilirlik

Bileşenler WCAG 2.2 AAAdüzeyini hedefler. Şu desenleri izlerler:

• Genel <div>s.
• <label for="id"> öğeler yerine anlamsal HTML öğeleri; etiketleri girdilere bağlayan
• aria-labelledby / aria-describedby çapraz başvurular için.
• aria-invalid + aria-errormessage hata durumları için.
• role="alert" ve aria-live dinamik içerik için.
• aria-pressed, aria-expanded, aria-current durum için.
• Izgaralar için hareketli tabindex .

Odak göstergeleri kasıtlı olarak tüketici tarafından sağlanır — Lily, tasarımınızla çakışan varsayılan bir odak halkası asla çizmez. Örnek uygulamalar tüm rotalarında temiz bir axe-core temel çizgisini korur.

Uluslararasılaştırma

Her etiket, yer tutucu, hata iletisi ve düğme metni bir prop'tur. Koda gömülü dize yoktur. Tercih ettiğiniz çeviri çerçevesini bağlayın — Paraglide, i18next, vue-i18n, react-intl, .resx dosyaları, her şey olur.

Tarihler, sayılar ve para birimleri için bileşenler önceden biçimlendirilmiş dizeler kabul eder: siz Intl.DateTimeFormat / Intl.NumberFormat / tercih ettiğiniz kütüphaneyle biçimlendirir ve sonucu iletirsiniz.

locale-picker yardımcısı, belge kökünde lang ve dir ayarlayarak seçilen yerel ayarı i18n kütüphanenize bildirir.

Test

Her çerçeve alt projesi, kendi deyimsel yığınını kullanan kendi testleriyle gelir:

• HTML: gerçek tarayıcıları çalıştıran WebDriverIO.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite eklentisi aracılığıyla).
• Nunjucks: render yardımcılı Vitest.
• Blazor: bUnit.

Testler yalnızca Vitest'in yerleşik eşleştiricilerini kullanır — asla jest-dom eşleştiricilerini değil. Bu, test takımlarını taşınabilir tutar. Örnek uygulamalar Playwright uçtan uca takımlarını, axe-core erişilebilirlik temel çizgilerini ve duyarlı görünüm alanı taramasını ekler.

Yapay zekâ ajanları

Bu site kökünde llms.txt ve llms.json yayımlar — llms.txt kuralını.

izleyen her araç için en önemli sayfalarının derlenmiş bir haritası. Kanonik monorepo ayrıca iki Claude Skills: lily-design-system-skilliçerir: Lily'nin kavramlarını, terminolojisini ve birleştirme desenlerini sistemle geliştiren herkes için kapsayan genel amaçlı bir skill ve lily-design-system-maintainer-skill, monorepo'nun zorunlu dosya düzenini ve araçlarını üzerinde çalışan herkes için kapsayan teknik bir skill. İkisi de kanonik monorepo'nun.

Sorun giderme

Katkıda bulunma

Lily gençtir ve iş birliğini memnuniyetle karşılar. Şu anda en yararlı katkılar:

• Yeni bileşenler (özellikle yerleşik tasarım sistemlerinden desenler).
• Yeni temalar — her biri bağımsız bir stil sayfası, kapsamı iyi belirlenmiş bir ilk PR.
• Daha iyi örnek biçimlendirme — nelerin mümkün olduğunu gösterin.
• Örnek uygulama dizelerinin çevirileri.
• Asgari yeniden üretimli hata raporları.
• Ekran okuyucular ve yardımcı teknolojilerle erişilebilirlik denetimleri.

Issue ve PR'ları şurada açın: github.com/LilyDesignSystem/lily-design-system.

Topluluk ve destek

• Sorular ve hata raporları — şurada bir issue açın: github.com/LilyDesignSystem/lily-design-system.
• E-posta — bakımcı joel@joelparkerhenderson.com adresini okur ve iş birliğini, yönlendirmeyi ve geri bildirimi memnuniyetle karşılar.
• Aynalar — Lily ayrıca şuralara da gönderilir: Codeberg ve GitLab, böylece tercih ettiğiniz forge'dan katılabilirsiniz.
• Davranış — proje standart bir davranış kurallarını izler; nazik olun, iyi niyet varsayın.

SSS