מהי Lily?
מערכת עיצוב חופשית, בקוד פתוח, שמעמידה את הנגישות במקום הראשון, פוגשת אתכם במקום שבו אתם כותבים קוד — ומתחמקת מהדרך כשאין בה צורך.
בקצרה
Lily היא קטלוג של רכיבי ווב, שכל אחד מהם ממומש בשמונה גרסאות ללא ראש (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ו-Web Components), בצירוף סדרת אפליקציות דוגמה מלאות שמראות כיצד לעצב אותם.
הגרסאות ללא הראש מגיעות עם אפס CSS. הן נותנות לכם HTML סמנטי, תפקידים ומצבים של ARIA, תמיכה במקלדת ומאפיינים ידידותיים לבינאום. את העיצוב החזותי אתם מביאים.
עקרונות עיצוב
נגישה
כל רכיב מתחיל מ-HTML סמנטי. ARIA מתווסף רק במקום שבו HTML לבדו אינו יכול לבטא את התבנית. הרכיבים מכוונים אל WCAG 2.2 AAA — צבעים, ריווח, מיקוד וניווט במקלדת נלקחים כולם בחשבון.
ניתנת להרכבה
Lily מעדיפה רכיבים קטנים בעלי תכלית אחת שמתחברים זה לזה. תבניות מורכבות חוזרות שוב ושוב:
Nav → List → ListItem— עבור פירורי לחם, רשימות תוכן, תפריטי אקורדיון, תפריטי עץ ועימודForm → Field → Input— עבור כל פריסת טופס עם תוויות, רמזים ושגיאותTable → Head/Body/Foot → Row → Data— עבור טבלאות, לוחות שנה, תרשימי גנט ולוחות קנבןBar → BarButton— עבור סרגלי כלים, סרגלי לשוניות, סרגלי משימות, סרגלי פעולות וסרגלי תפריטPicker → PickerButton— עבור בוחרי צבע, בוחרי דירוג, בוחרי ערכת נושא
ניתנת לבינאום
אף מחרוזת שהמשתמש רואה אינה מקודדת בקוד. תוויות, מצייני מיקום, הודעות שגיאה, טקסט כפתורים — כולם פרמטרים. חברו את מערכת התרגום שלכם ו-Lily תדבר כל שפה שאתם מדברים.
ללא ראש
לרכיבים ללא ראש אין CSS, אין
<style> בלוקים, ואין אסימוני עיצוב שלא בחרתם. הם חושפים שם מחלקה יחיד בסגנון kebab-case בכל אלמנט שורש, כך שתוכלו למקד אותם איך שתרצו — 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 (ממשלת אוסטרליה)
- Mozilla Protocol
- Adobe Spectrum
- Ant Design
- Wonderflow Wanda
- DaisyUI
- shadcn/ui
- רכיבי הגרפיקה של Reuters
רישיון
Lily מורשית במספר רישיונות תחת BSD, MIT, Apache-2.0, GPL-2.0 או GPL-3.0. בחרו את הרישיון שמתאים לפרויקט שלכם. אם אף אחד מהם אינו מתאים, צרו קשר.
יצירת קשר
מוביל הפרויקט: Joel Parker Henderson — joel@joelparkerhenderson.com.
מצאתם באג, יש לכם רעיון, רוצים לתרום רכיב? פתחו issue או pull request ב- GitHub.
סטטוס: Lily היא עבודה חדשה לגמרי ואנו מקבלים בברכה שיתוף פעולה, הכוונה ומשוב. דברים יזוזו ויתפתחו.