Lily Design System™

ເລີ່ມຕົ້ນກັບ Lily

ເລືອກເຟຣມເວີກ, clone monorepo ແລະເປີດໄລບຣາຣີແບບບໍ່ມີຫົວ ຫຼືແອັບຕົວຢ່າງຂອງມັນ, ແລະເລີ່ມປະກອບໜ້າຂອງທ່ານເອງ. ຕ້ອງການເສັ້ນທາງທີ່ມີຜູ້ນຳບໍ? ເລີ່ມດ້ວຍ ບົດສອນ.

ຕິດຕັ້ງ

Lily ຢູ່ໃນ Git monorepo ດຽວ, ມີໄດເຣັກທໍຣີສຳລັບໄລບຣາຣີແບບບໍ່ມີຫົວ, ແພັກເກັດຕົວຊ່ວຍ ແລະແອັບຕົວຢ່າງຂອງແຕ່ລະເຟຣມເວີກ. ວິທີທີ່ໄວທີ່ສຸດໃນການທົດລອງແມ່ນ clone monorepo ແລະເປີດໄລບຣາຣີແບບບໍ່ມີຫົວສຳລັບສະແຕັກຂອງທ່ານ: 

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

ຮູບແບບດຽວກັນໃຊ້ໄດ້ກັບເຟຣມເວີກອື່ນ:

  • @lilydesignsystem/html-headless — ບໍ່ຕ້ອງຕິດຕັ້ງ; ສຳເນົາ .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

ໄລບຣາຣີແບບບໍ່ມີຫົວຖືກອອກແບບໃຫ້ clone ຫຼື vendor — ຖືວ່າແຫຼ່ງເປັນແຫຼ່ງຄວາມຈິງ ແລະສຳເນົາສິ່ງທີ່ທ່ານຕ້ອງການ. ຕົວຊ່ວຍການຕັ້ງຄ່າ ຍັງມາເປັນແພັກເກັດທີ່ຕິດຕັ້ງໄດ້ພ້ອມທໍ່ສ້າງ ແລະເຜີຍແຜ່ (npm ສຳລັບເຟຣມເວີກ JS, NuGet ສຳລັບ Blazor).

ໃຊ້ອົງປະກອບແບບບໍ່ມີຫົວ

ອົງປະກອບແບບບໍ່ມີຫົວສົ່ງ HTML ທີ່ມີຄວາມໝາຍ, ARIA ແລະຄຸນສົມບັດ — ແຕ່ບໍ່ມີ CSS. ນີ້ແມ່ນ 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" }) }}

ໃຊ້ຕົວຢ່າງທີ່ມີຮູບແບບ

ແອັບຕົວຢ່າງລວມ CSS, ເສັ້ນທາງ ແລະໜ້າສາທິດເຕັມ. ວິທີທີ່ໄວທີ່ສຸດໃນການທົດລອງແມ່ນເລີ່ມແອັບຕົວຢ່າງ SvelteKit, Next, Nuxt, Analog ຫຼື Eleventy ແລະເບິ່ງການສາທິດທີ່ /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

ຈາກນັ້ນເປີດ http://localhost:5173 ແລະທ່ອງເບິ່ງ /components.

ການໃສ່ຮູບແບບ ແລະໂທເຄັນການອອກແບບ

ແຕ່ລະອົງປະກອບສະແດງຜົນດ້ວຍຄລາສ kebab-case ໜຶ່ງອັນໃນອົງປະກອບຮາກຂອງມັນ. ຕົວຢ່າງ, <Button> ສະແດງຜົນ <button class="button">. ໃສ່ຮູບແບບຕາມທີ່ທ່ານມັກ: 

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

ຊຸດສີ Lily ເລີ່ມຕົ້ນ (ໃຊ້ໃນແອັບຕົວຢ່າງ) ແມ່ນ:

  • ຫຼັກ: #2563eb
  • ອັນຕະລາຍ: #dc2626
  • ຄຳເຕືອນ: #f59e0b
  • ຄວາມສຳເລັດ: #16a34a
  • ພື້ນຫຼັງໜ້າ: #f9fafb
  • ພື້ນຫຼັງບັດ: #ffffff

ເຫຼົ່ານີ້ແມ່ນຄຳແນະນຳ, ບໍ່ແມ່ນຄວາມຕ້ອງການ. ປ່ຽນພວກມັນດ້ວຍຊຸດສີແບຣນຂອງທ່ານເອງ ແລະ Lily ຈະມາຕາມຢ່າງຍິນດີ.

ຮູບແບບສີສັນສຳເລັດຮູບ

ບໍ່ຢາກຂຽນ CSS ຈາກສູນບໍ? Lily ມາພ້ອມ 57 ຮູບແບບສີສັນອ້າງອີງທີ່ເປັນອິດສະຫຼະ ໃນໄດເຣັກທໍຣີ themes/ . ແຕ່ລະອັນແມ່ນ stylesheet ໜຶ່ງອັນທີ່ຕັ້ງເປົ້າໝາຍ class hook ຂອງ Lily — ເຊື່ອມຕໍ່ມັນ ແລ້ວທ່ານມີຮູບແບບ: 

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

ຊຸດນີ້ກວມເອົາ:

  • ພາກລັດ — NHS England, NHS Scotland ແລະ NHS Wales (ແຕ່ລະອັນມີສະບັບສຳລັບຜູ້ປ່ວຍ ແລະຜູ້ປະຕິບັດ), GOV.UK GDS, ແລະ U.S. Web Design System.
  • ໄດ້ແຮງບັນດານໃຈຈາກຜູ້ຂາຍ — Adobe Spectrum, Mozilla Protocol.
  • ວັດຖຸປະສົງທົ່ວໄປ — light, dark, nord, dracula, wireframe, ແລະອີກສາມສິບກວ່າອັນ.

ຕົວເລືອກຮູບແບບສີສັນໃຊ້ :where(...), ສະນັ້ນ CSS ຂອງທ່ານເອງຊະນະສະເໝີໃນຄວາມສະເພາະ. ຈັບຄູ່ພວກມັນກັບຕົວຊ່ວຍ theme-picker ຂ້າງລຸ່ມສຳລັບການສະຫຼັບຕອນແລ່ນ, ຫຼືຕາມ ບົດສອນຮູບແບບສີສັນ.

ຕົວຊ່ວຍການຕັ້ງຄ່າ

ແຕ່ລະເຟຣມເວີກມີຕົວເລືອກນ້ອຍໆແປດອັນ, ແຕ່ລະອັນຢູ່ໃນແພັກເກັດ lily-design-system-{framework}-{package} ຂອງຕົນເອງ (ແລະ picker-bar ທີ່ປະກອບພວກມັນ). ແຕ່ລະອັນແມ່ນປຸ່ມໄອຄອນແບບບໍ່ມີຫົວທີ່ເປີດປັອບອັບ — listbox, ລາຍການລິ້ງ, ແບບຟອມຄົ້ນຫາ, ຫຼື (ສຳລັບ date-time-picker) ກ່ອງໂຕ້ຕອບເລືອກວັນທີ — ບໍ່ແມ່ນ <select>ພື້ນເມືອງ; ປອດໄພສຳລັບ SSR; ແລະມາໂດຍບໍ່ມີ CSS:

  • theme-picker — ໂຫຼດ stylesheet ຮູບແບບສີສັນຕອນແລ່ນໂດຍການສະຫຼັບ <link>ທີ່ຖືກຈັດການ, ຕັ້ງ data-theme ໃນເອກະສານ, ແລະເກັບໄວ້ໃນ localStorage.
  • locale-picker — ຕັ້ງ lang ແລະ dir (ພ້ອມການກວດພົບ RTL ອັດຕະໂນມັດ) ເພື່ອໃຫ້ໄລບຣາຣີ i18n ຂອງທ່ານຕາມໄດ້; ມັນເອງບໍ່ແປ.
  • text-size-picker — ຕັ້ງ data-text-size ໃນເອກະສານ; CSS ຂອງທ່ານແມັບແຕ່ລະຄ່າໄປຫາຂະໜາດຕົວອັກສອນ.
  • motion-picker — ຕັ້ງ data-motion ໃນເອກະສານ, ເລີ່ມຈາກການຕັ້ງຄ່າການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງຜູ້ເຂົ້າຊົມ; CSS ແລະສະຄຣິບຂອງທ່ານຕັດສິນວ່າຈະສະກັດອັນໃດ.
  • search-picker — ປຸ່ມໄອຄອນທີ່ເປີດຊ່ອງຄົ້ນຫາ; ການສົ່ງນຳທາງໄປໜ້າຄົ້ນຫາ. ເປັນເຈົ້າຂອງການກະທຳ, ບໍ່ແມ່ນການຕັ້ງຄ່າ.
  • link-picker — ໄອຄອນເຮືອນທີ່ເປີດເມນູລິ້ງໜ້າທີ່ແອັບຂອງທ່ານກຳນົດ (ໜ້າຫຼັກ, ກ່ຽວກັບພວກເຮົາ, ຕິດຕໍ່ພວກເຮົາ, ນະໂຍບາຍຄວາມເປັນສ່ວນຕົວ, …). ເປັນເຈົ້າຂອງການກະທຳ, ບໍ່ແມ່ນການຕັ້ງຄ່າ.
  • share-picker — ເປີດແຜ່ນແບ່ງປັນພື້ນເມືອງ ຫຼືລາຍການປາຍທາງທີ່ຜູ້ບໍລິໂພກສະໜອງ, ບວກການສຳເນົາ URL. ເປັນເຈົ້າຂອງການກະທຳ, ບໍ່ແມ່ນການຕັ້ງຄ່າ: ບໍ່ນຳໃຊ້ຫຍັງ, ບໍ່ເກັບຫຍັງ.
  • date-time-picker — ຊ່ອງຂໍ້ຄວາມບວກກ່ອງໂຕ້ຕອບເລືອກວັນທີ APG ສຳລັບວັນທີ, ເວລາ, ຫຼືທັງສອງ. ເປັນເຈົ້າຂອງຄ່າແບບຟອມ, ບໍ່ແມ່ນການຕັ້ງຄ່າ: ສາຍ ISO ໄປ-ກັບໄປທີ່ <input type="date">. 
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

ແຄັດຕາລັອກ Svelte ແມ່ນການອ້າງອີງມາດຕະຖານ; ພອດ React, Vue, Angular, HTML, Nunjucks, Web Components ແລະ Blazor ກົງກັບມັນສັນຍາຕໍ່ສັນຍາ. ເບິ່ງ ບົດສອນຕົວຊ່ວຍ.

ການເຂົ້າເຖິງໄດ້ງ່າຍ

ອົງປະກອບຕັ້ງເປົ້າໝາຍ WCAG 2.2 AAA. ພວກມັນປະຕິບັດຕາມຮູບແບບເຫຼົ່ານີ້:

  • ອົງປະກອບ HTML ທີ່ມີຄວາມໝາຍແທນທົ່ວໄປ <div>s.
  • <label for="id"> ເຊື່ອມປ້າຍກັບ input.
  • aria-labelledby / aria-describedby ສຳລັບການອ້າງອີງຂ້າມ.
  • aria-invalid + aria-errormessage ສຳລັບສະຖານະຂໍ້ຜິດພາດ.
  • role="alert" ແລະ aria-live ສຳລັບເນື້ອໃນແບບໄດນາມິກ.
  • aria-pressed, aria-expanded, aria-current ສຳລັບສະຖານະ.
  • Roving tabindex ສຳລັບຕາຕະລາງຕາໜ່າງ.

ຕົວຊີ້ບອກຈຸດສຸມຖືກສະໜອງໂດຍຜູ້ບໍລິໂພກຢ່າງຕັ້ງໃຈ — Lily ບໍ່ເຄີຍທາວົງແຫວນຈຸດສຸມເລີ່ມຕົ້ນທີ່ຂັດກັບການອອກແບບຂອງທ່ານ. ແອັບຕົວຢ່າງຮັກສາ axe-core baseline ທີ່ສະອາດຕະຫຼອດເສັ້ນທາງຂອງມັນ.

ການແປເປັນສາກົນ

ທຸກປ້າຍ, ຕົວແທນບ່ອນຫວ່າງ, ຂໍ້ຄວາມຜິດພາດ ແລະຂໍ້ຄວາມປຸ່ມແມ່ນຄຸນສົມບັດ. ບໍ່ມີສາຍອັກສອນຕາຍຕົວ. ໃສ່ເຟຣມເວີກແປພາສາທີ່ທ່ານເລືອກ — Paraglide, i18next, vue-i18n, react-intl, ໄຟລ໌ .resx, ອັນໃດກໍໄດ້.

ສຳລັບວັນທີ, ຕົວເລກ ແລະສະກຸນເງິນ, ອົງປະກອບຮັບສາຍທີ່ຈັດຮູບແບບແລ້ວ: ທ່ານຈັດຮູບແບບດ້ວຍ Intl.DateTimeFormat / Intl.NumberFormat / ໄລບຣາຣີທີ່ທ່ານມັກ ແລະສົ່ງຜົນລັບ.

ຕົວຊ່ວຍ locale-picker ສົ່ງສັນຍານໂລແຄລທີ່ເລືອກໄປຫາໄລບຣາຣີ i18n ຂອງທ່ານໂດຍການຕັ້ງ lang ແລະ dir ໃນຮາກເອກະສານ.

ການທົດສອບ

ແຕ່ລະໂຄງການຍ່ອຍຂອງເຟຣມເວີກສົ່ງການທົດສອບຂອງຕົນເອງໂດຍໃຊ້ສະແຕັກທີ່ເປັນເອກະລັກຂອງມັນ:

  • HTML: WebDriverIO ແລ່ນບຣາວເຊີຈິງ.
  • Svelte: Vitest + @testing-library/svelte.
  • React: Vitest + @testing-library/react.
  • Vue: Vitest + @testing-library/vue.
  • Angular: Vitest + TestBed (ຜ່ານປລັກອິນ Analog Vite).
  • Nunjucks: Vitest ພ້ອມຕົວຊ່ວຍສະແດງຜົນ.
  • Blazor: bUnit.

ການທົດສອບໃຊ້ ສະເພາະ matcher ໃນຕົວຂອງ Vitest — ບໍ່ເຄີຍ jest-dom matcher. ນີ້ເຮັດໃຫ້ຊຸດທົດສອບເຄື່ອນຍ້າຍໄດ້. ແອັບຕົວຢ່າງເພີ່ມຊຸດ Playwright ແຕ່ຕົ້ນຈົນຈົບ, axe-core accessibility baseline ແລະການກວາດ viewport ແບບຕອບສະໜອງ.

ຕົວແທນ AI

ເວັບໄຊນີ້ເຜີຍແຜ່ llms.txt ແລະ llms.json ທີ່ຮາກຂອງມັນ — ແຜນທີ່ທີ່ຄັດເລືອກຂອງໜ້າທີ່ສຳຄັນທີ່ສຸດຂອງມັນ, ສຳລັບເຄື່ອງມືໃດໆທີ່ປະຕິບັດຕາມ ຂໍ້ຕົກລົງ llms.txt.

monorepo ມາດຕະຖານຍັງສົ່ງສອງ Claude Skills: lily-design-system-skill, ທັກສະທົ່ວໄປທີ່ກວມເອົາແນວຄິດ, ຄຳສັບ ແລະຮູບແບບການປະກອບຂອງ Lily ສຳລັບທຸກຄົນທີ່ສ້າງດ້ວຍລະບົບ, ແລະ lily-design-system-maintainer-skill, ທັກສະດ້ານເຕັກນິກທີ່ກວມເອົາໂຄງຮ່າງໄຟລ໌ທີ່ຕ້ອງມີ ແລະເຄື່ອງມືຂອງ monorepo ສຳລັບທຸກຄົນທີ່ເຮັດວຽກກັບມັນ. ທັງສອງຢູ່ທີ່ຮາກຂອງ monorepo ມາດຕະຖານ.

ການແກ້ໄຂບັນຫາ

ອົງປະກອບສະແດງຜົນແຕ່ເບິ່ງບໍ່ມີຮູບແບບ

ນັ້ນແມ່ນແບບບໍ່ມີຫົວທີ່ເຮັດວຽກຕາມທີ່ຕັ້ງໃຈ — ບໍ່ມີ CSS ມາພ້ອມອົງປະກອບ. ຂຽນ CSS ຕໍ່ຄລາສ kebab-case ຂອງອົງປະກອບ (ສະແດງໃນທຸກ ໜ້າແຄັດຕາລັອກ) ຫຼືເຊື່ອມຕໍ່ໜຶ່ງໃນ 57 ຮູບແບບສີສັນສຳເລັດຮູບ.

CSS ຂອງຂ້ອຍເບິ່ງຄືບໍ່ນຳໃຊ້ເໜືອຮູບແບບສີສັນ

ມັນຄວນຈະນຳໃຊ້ — ຕົວເລືອກຮູບແບບສີສັນຖືກຫໍ່ໃນ :where(...), ເຊິ່ງມີຄວາມສະເພາະສູນ. ຖ້າກົດຍັງແພ້, ກວດວ່າ stylesheet ຂອງທ່ານໂຫຼດຫຼັງຂອງຮູບແບບສີສັນ <link> ແລະຕົວເລືອກກົງກັບ class hook ຂອງອົງປະກອບແທ້ໆ.

pnpm install ລົ້ມເຫຼວດ້ວຍຂໍ້ຜິດພາດ peer ຫຼືເວີຊັນ

ໃຊ້ pnpm ປັດຈຸບັນ (v10+) ແລະ Node 22+. ແຕ່ລະໂຄງການຍ່ອຍປັກເວີຊັນເຟຣມເວີກຂອງມັນໃນ package.jsonຂອງຕົນເອງ; ຖ້າຊຸດເຄື່ອງມືທົ່ວໂລກຂອງທ່ານເກົ່າກວ່າ, pnpm env use --global lts ແມ່ນການແກ້ໄຂທີ່ໄວທີ່ສຸດ.

ໂປຣແກຣມອ່ານໜ້າຈໍປະກາດຊື່ຜິດສຳລັບການຄວບຄຸມ

ກວດສອບ label ຄຸນສົມບັດທີ່ຈຳເປັນຂອງອົງປະກອບ — ອົງປະກອບທີ່ບໍ່ມີຂໍ້ຄວາມທີ່ເຫັນໄດ້ຕ້ອງການໜຶ່ງ, ແລະ aria-label / aria-labelledby ທີ່ຜູ້ບໍລິໂພກສະໜອງທີ່ຜ່ານທາງ rest-props ຊະນະຢ່າງຕັ້ງໃຈເໜືອການເຊື່ອມຕໍ່ໃນຕົວ. ທຸກໜ້າແຄັດຕາລັອກບັນທຶກສັນຍາ ARIA ຂອງອົງປະກອບ.

ຕົວຊ່ວຍ theme-picker ບໍ່ສະຫຼັບ stylesheet

ຢືນຢັນວ່າ themesUrl ຊີ້ໄປຫາໄດເຣັກທໍຣີທີ່ບຣາວເຊີດຶງໄດ້ (ໃຫ້ບໍລິການ themes/ ໄຟລ໌ເປັນຊັບສິນຄົງທີ່) ແລະສະລັກຮູບແບບສີສັນໃນ themes ຄຸນສົມບັດກົງກັບຊື່ໄຟລ໌. ຕົວຊ່ວຍສະຫຼັບ href ຂອງ <link data-lily-theme-picker> ທີ່ຖືກຈັດການໜຶ່ງ — ກວດສອບມັນໃນ devtools ເພື່ອເບິ່ງ URL ທີ່ກຳລັງຖືກຮ້ອງຂໍ.

ມີບາງຢ່າງອື່ນເສຍ

ເປີດ issue ພ້ອມການຈຳລອງຂັ້ນຕ່ຳທີ່ github.com/LilyDesignSystem/lily-design-system — ຫຼືເບິ່ງ ຊຸມຊົນ ແລະການຮອງຮັບ.

ການປະກອບສ່ວນ

Lily ຍັງໜຸ່ມ ແລະຍິນດີຕ້ອນຮັບການຮ່ວມມື. ການປະກອບສ່ວນທີ່ມີປະໂຫຍດທີ່ສຸດຕອນນີ້ແມ່ນ:

  • ອົງປະກອບໃໝ່ (ໂດຍສະເພາະຮູບແບບຈາກລະບົບການອອກແບບທີ່ສ້າງຕັ້ງແລ້ວ).
  • ຮູບແບບສີສັນໃໝ່ — ແຕ່ລະອັນແມ່ນ stylesheet ເອກະລາດໜຶ່ງ, PR ທຳອິດທີ່ມີຂອບເຂດດີ.
  • ການໃສ່ຮູບແບບຕົວຢ່າງທີ່ດີກວ່າ — ສະແດງສິ່ງທີ່ເປັນໄປໄດ້.
  • ການແປສາຍອັກສອນແອັບຕົວຢ່າງ.
  • ລາຍງານບັກພ້ອມການຈຳລອງຂັ້ນຕ່ຳ.
  • ການກວດສອບການເຂົ້າເຖິງໄດ້ງ່າຍດ້ວຍໂປຣແກຣມອ່ານໜ້າຈໍ ແລະເຕັກໂນໂລຢີຊ່ວຍເຫຼືອ.

ເປີດ issue ແລະ PR ທີ່ github.com/LilyDesignSystem/lily-design-system.

ຊຸມຊົນ ແລະການຮອງຮັບ

  • ຄຳຖາມ ແລະລາຍງານບັກ — ເປີດ issue ທີ່ github.com/LilyDesignSystem/lily-design-system.
  • ອີເມວ — ຜູ້ບຳລຸງຮັກສາອ່ານ joel@joelparkerhenderson.com ແລະຍິນດີຕ້ອນຮັບການຮ່ວມມື, ຄຳແນະນຳ ແລະຄຳຕິຊົມ.
  • ກະຈົກ — Lily ຍັງຖືກ push ໄປທີ່ Codeberg ແລະ GitLab, ເພື່ອໃຫ້ທ່ານເຂົ້າຮ່ວມຈາກ forge ທີ່ທ່ານມັກ.
  • ຄວາມປະພຶດ — ໂຄງການປະຕິບັດຕາມຈັນຍາບັນມາດຕະຖານ; ຈົ່ງເປັນມິດ, ສົມມຸດເຈດຕະນາດີ.

ຄຳຖາມທີ່ພົບເລື້ອຍ

ເປັນຫຍັງແບບບໍ່ມີຫົວແທນທີ່ຈະມີຮູບແບບ?

ອົງປະກອບທີ່ມີຮູບແບບມາກ່ອນສະດວກ — ຈົນກວ່າມັນບໍ່ກົງກັບແບຣນຂອງທ່ານ. ອົງປະກອບແບບບໍ່ມີຫົວຕ້ອງໃຊ້ວຽກເພີ່ມເລັກນ້ອຍໃນຕອນຕົ້ນ ແຕ່ໃຫ້ທ່ານຄວບຄຸມການອອກແບບທີ່ເຫັນດ້ວຍຕາໄດ້ເຕັມທີ່. ແອັບຕົວຢ່າງ ແລະ 57 ຮູບແບບສີສັນສະແດງວິທີໃສ່ຮູບແບບໃຫ້ພວກມັນ; ທ່ານສາມາດເອົາພວກມັນ ຫຼືປ່ຽນໃໝ່ທັງໝົດ. ຂໍ້ໂຕ້ແຍ້ງທີ່ຍາວກວ່າຢູ່ທີ່ ເປັນຫຍັງຕ້ອງ Lily.

ເປັນຫຍັງຈຶ່ງມີອົງປະກອບຫຼາຍແທ້?

Lily ມີເປົ້າໝາຍກວມເອົາຮູບແບບທີ່ແອັບສ່ວນໃຫຍ່ຕ້ອງການ ໂດຍບໍ່ບັງຄັບໃຫ້ທ່ານສ້າງມັນຈາກສູນ — ລວມທັງສິ່ງທີ່ເລິກຄືການປ້ອນຕົວລະບຸແຫ່ງຊາດ ແລະ scrollytelling ບັນນາທິການ. ແຄັດຕາລັອກດຶງຈາກລະບົບການອອກແບບທີ່ສ້າງຕັ້ງແລ້ວໜຶ່ງໂຫລ ບວກກັບງານຕົ້ນສະບັບ — ເບິ່ງ ກ່ຽວກັບ.

ຂ້ອຍໃຊ້ Lily ກັບ Tailwind ໄດ້ບໍ?

ໄດ້. ແຕ່ລະອົງປະກອບເປີດເຜີຍຄລາສຮາກ kebab-case ໜຶ່ງອັນບວກ className / classທີ່ຜູ້ບໍລິໂພກສະໜອງ. ວາງຢູທິລິຕີ Tailwind ທັບຢູ່ເທິງຕາມທີ່ທ່ານມັກ.

ຂ້ອຍໃຊ້ Lily ກັບເຟຣມເວີກ CSS ທີ່ມີຄວາມໝາຍເຊັ່ນ DaisyUI ໄດ້ບໍ?

ໄດ້. ຊື່ຄລາສ kebab-case ໃນອົງປະກອບຮາກເຮັດວຽກເປັນ CSS hook ທີ່ມີຄວາມໝາຍ. ຈັບຄູ່ Lily ກັບເຟຣມເວີກທີ່ມີຄວາມໝາຍ ແລ້ວທ່ານໄດ້ອົງປະກອບທີ່ມີຮູບແບບມາກ່ອນທີ່ຍັງເຄົາລົບ ARIA ແລະ i18n.

ມີແພັກເກັດ npm ບໍ?

ຕົວຊ່ວຍ ຕົວຊ່ວຍການຕັ້ງຄ່າ ສົ່ງເປັນແພັກເກັດພ້ອມທໍ່ເຜີຍແຜ່ npm/NuGet. ໄລບຣາຣີອົງປະກອບແບບບໍ່ມີຫົວຖືກອອກແບບໃຫ້ clone ຫຼື vendor — ແຫຼ່ງແມ່ນສິ່ງທີ່ສົ່ງມອບ, ເພື່ອໃຫ້ທ່ານອ່ານ, ຕັດ ແລະເປັນເຈົ້າຂອງສິ່ງທີ່ທ່ານສົ່ງໄດ້ຢ່າງແນ່ນອນ. ການເຜີຍແຜ່ registry ສຳລັບໄລບຣາຣີແບບບໍ່ມີຫົວຍັງຢູ່ໃນແຜນງານ.

ເປັນຫຍັງຈຶ່ງມີຫຼາຍໃບອະນຸຍາດ?

ໂຄງການທີ່ແຕກຕ່າງກັນມີຄວາມຕ້ອງການໃບອະນຸຍາດທີ່ແຕກຕ່າງກັນ. BSD ແລະ MIT ແມ່ນຜ່ອນຜັນ, Apache-2.0 ມີການໃຫ້ສິດທິບັດ, ແລະຕົວເລືອກ GPL ສະໜັບສະໜູນ copyleft. ເລືອກອັນທີ່ເໝາະກັບສະຖານະການຂອງທ່ານ.

ຂ້ອຍລາຍງານບັກ ຫຼືຮ້ອງຂໍຄຸນສົມບັດແນວໃດ?

ເປີດ issue ໃນຄັງ GitHub, ຫຼືສົ່ງອີເມວຫາ joel@joelparkerhenderson.com.