Lily Design System™

Mikä on Lily?

Ilmainen, avoimen lähdekoodin suunnittelujärjestelmä, jossa saavutettavuus on etusijalla ja joka kohtaa sinut siellä, missä koodaat – ja väistyy, kun et tarvitse sitä.

Lyhyesti

Lily on verkkokomponenttien luettelo, jonka jokainen komponentti on toteutettu kahdeksana päättömänä variaationa (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ja Web Components), sekä valmiiden esimerkkisovellusten joukko, joka näyttää, miten niitä tyylitellään.

Päättömissä versioissa on nolla CSS:ää. Ne antavat semanttisen HTML:n, ARIA-roolit ja -tilat, näppäimistötuen ja kansainvälistämiseen sopivat ominaisuudet. Visuaalisen suunnittelun tuot itse.

Suunnitteluperiaatteet

Saavutettava

Jokainen komponentti lähtee semanttisesta HTML:stä. ARIA lisätään vain siellä, missä pelkkä HTML ei pysty ilmaisemaan mallia. Komponentit tavoittelevat WCAG 2.2 AAA -tasoa – värit, välit, kohdistus ja näppäimistönavigointi huomioidaan kaikki.

Yhdisteltävä

Lily suosii pieniä, yhteen tarkoitukseen tehtyjä komponentteja, jotka loksahtavat yhteen. Yhdistetyt mallit toistuvat yhä uudelleen:

  • Nav → List → ListItem – leipäpolkuihin, sisällysluetteloihin, haitarivalikoihin, puuvalikoihin ja sivutukseen
  • Form → Field → Input – mihin tahansa lomakeasetteluun, jossa on nimiöt, vihjeet ja virheet
  • Table → Head/Body/Foot → Row → Data – taulukoihin, kalentereihin, Gantt-kaavioihin ja kanban-tauluihin
  • Bar → BarButton – työkalupalkkeihin, välilehtipalkkeihin, tehtäväpalkkeihin, toimintopalkkeihin ja valikkopalkkeihin
  • Picker → PickerButton – värinvalitsimiin, arvosteluvalitsimiin ja teemavalitsimiin

Kansainvälistettävä

Yhtäkään käyttäjälle näkyvää merkkijonoa ei ole kovakoodattu. Nimiöt, paikkamerkit, virheilmoitukset ja painiketekstit ovat kaikki parametreja. Liitä oma käännösjärjestelmäsi, niin Lily puhuu mitä tahansa kieltä, jota sinäkin puhut.

Päätön

Päättömissä komponenteissa on ei CSS:ää, ei <style> -lohkoja eikä suunnittelutunnisteita, joita et ole itse valinnut. Ne tarjoavat yhden kebab-case-luokkanimen jokaiselle juurielementille, jotta voit kohdistaa niihin haluamallasi tavalla – semanttinen CSS, Tailwind, CSS-in-JS, sinä päätät.

Valmiit esimerkit

Esimerkkisovellukset näyttävät, miten komponentit tyylitellään oikeaa käyttöä varten – mitkä suunnittelutunnisteet asetetaan, mitä variaatioita lisätään ja miten sivut kootaan. Ne ovat täysiä SvelteKit-, Next.js-, Nuxt-, Blazor- ja Eleventy-sovelluksia, ei pelkkiä hiekkalaatikoita.

Vaikutteiden lähteet

Lily ammentaa malleja ja kieltä tarkoituksella laajasta joukosta suunnittelujärjestelmiä:

Lisenssi

Lilyllä on useita lisenssejä: BSD, MIT, Apache-2.0, GPL-2.0 tai GPL-3.0. Valitse projektiisi sopiva. Jos mikään niistä ei käy, ota yhteyttä.

Yhteystiedot

Projektin vetäjä: Joel Parker Henderson – joel@joelparkerhenderson.com.

Löysitkö virheen, onko sinulla idea vai haluatko lahjoittaa komponentin? Avaa issue tai pull request osoitteessa GitHub.

Tila: Lily on aivan uutta työtä, ja toivotamme tervetulleeksi yhteistyön, ohjauksen ja palautteen. Asiat tulevat muuttumaan ja kehittymään.