Lily Design System™

Czym jest Lily?

Darmowy system projektowy o otwartym kodzie, w którym dostępność jest na pierwszym miejscu: spotyka cię tam, gdzie piszesz kod, i schodzi z drogi, gdy go nie potrzebujesz.

W skrócie

Lily to katalog komponentów webowych, z których każdy jest zaimplementowany w ośmiu wariantach bezgłowych (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks i Web Components), a także zestaw gotowych aplikacji przykładowych pokazujących, jak je stylizować.

Wersje bezgłowe nie zawierają żadnego CSS. Dają ci semantyczny HTML, role i stany ARIA, obsługę klawiatury oraz właściwości przyjazne internacjonalizacji. Projekt wizualny przynosisz ty.

Zasady projektowe

Dostępny

Każdy komponent wychodzi od semantycznego HTML. ARIA dokładamy tylko tam, gdzie sam HTML nie potrafi wyrazić wzorca. Komponenty celują w poziom WCAG 2.2 AAA — kolory, odstępy, fokus i nawigacja klawiaturą są brane pod uwagę.

Składalny

Lily preferuje małe komponenty o jednym przeznaczeniu, które do siebie pasują. Wzorce złożone powtarzają się raz po raz:

  • Nav → List → ListItem — do okruszków nawigacyjnych, spisów treści, menu akordeonowych, menu drzewiastych i paginacji
  • Form → Field → Input — do każdego układu formularza z etykietami, podpowiedziami i błędami
  • Table → Head/Body/Foot → Row → Data — do tabel, kalendarzy, wykresów Gantta i tablic kanban
  • Bar → BarButton — do pasków narzędzi, pasków kart, pasków zadań, pasków akcji i pasków menu
  • Picker → PickerButton — do selektorów kolorów, selektorów ocen, selektorów motywów

Gotowy do internacjonalizacji

Ani jeden ciąg widoczny dla użytkownika nie jest wpisany na sztywno. Etykiety, symbole zastępcze, komunikaty o błędach, teksty przycisków — wszystko to parametry. Podłącz własny system tłumaczeń, a Lily mówi w każdym języku, w którym ty mówisz.

Bezgłowy

Komponenty bezgłowe mają zero CSS, żadnych bloków <style> , żadnych tokenów projektowych, których nie wybrałeś. Udostępniają jedną nazwę klasy w kebab-case na każdym elemencie głównym, więc możesz je wybierać jak chcesz — semantyczny CSS, Tailwind, CSS-in-JS, twoja decyzja.

Kompletne przykłady

Aplikacje przykładowe pokazują, jak stylizować komponenty do rzeczywistego użytku — jakie tokeny projektowe ustawić, jakie warianty dodać, jak składać strony. To pełne aplikacje SvelteKit, Next.js, Nuxt, Blazor i Eleventy, a nie tylko piaskownice.

Źródła inspiracji

Lily czerpie wzorce i język z celowo szerokiego zbioru systemów projektowych:

Licencja

Lily jest wielolicencyjny: BSD, MIT, Apache-2.0, GPL-2.0 lub GPL-3.0. Wybierz licencję pasującą do twojego projektu. Jeśli żadna nie pasuje, skontaktuj się z nami.

Kontakt

Kierownik projektu: Joel Parker Henderson — joel@joelparkerhenderson.com.

Znalazłeś błąd, masz pomysł, chcesz wnieść komponent? Otwórz zgłoszenie lub pull request na GitHub.

Status: Lily to zupełnie nowa praca i witamy współpracę, wskazówki oraz opinie. Rzeczy będą się zmieniać i rozwijać.