Lily ແມ່ນຫຍັງ?

ສະບັບຫຍໍ້

Lily ແມ່ນແຄັດຕາລັອກຂອງ ອົງປະກອບເວັບ, ແຕ່ລະອັນຖືກນຳໃຊ້ໃນແປດຮູບແບບແບບບໍ່ມີຫົວ (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ແລະ Web Components) ພ້ອມກັບຊຸດແອັບຕົວຢ່າງທີ່ສົມບູນທີ່ສະແດງວິທີໃສ່ຮູບແບບໃຫ້ພວກມັນ.

ສະບັບແບບບໍ່ມີຫົວມາພ້ອມກັບ CSS ສູນ. ພວກມັນໃຫ້ HTML ທີ່ມີຄວາມໝາຍ, ບົດບາດ ແລະສະຖານະ ARIA, ການຮອງຮັບແປ້ນພິມ, ແລະຄຸນສົມບັດທີ່ເໝາະກັບ i18n. ທ່ານເປັນຜູ້ນຳມາຊຶ່ງການອອກແບບທີ່ເຫັນດ້ວຍຕາ.

ຫຼັກການການອອກແບບ

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

ທຸກອົງປະກອບເລີ່ມຈາກ HTML ທີ່ມີຄວາມໝາຍ. ARIA ຖືກເພີ່ມເຂົ້າມາເມື່ອ HTML ຢ່າງດຽວບໍ່ສາມາດສະແດງຮູບແບບໄດ້ເທົ່ານັ້ນ. ອົງປະກອບມີເປົ້າໝາຍທີ່ WCAG 2.2 AAA — ສີ, ໄລຍະຫ່າງ, ຈຸດສຸມ, ແລະການນຳທາງດ້ວຍແປ້ນພິມ ລ້ວນໄດ້ພິຈາລະນາແລ້ວ.

ປະກອບກັນໄດ້

Lily ມັກອົງປະກອບນ້ອຍໆທີ່ມີຈຸດປະສົງດຽວ ທີ່ເຂົ້າກັນໄດ້ງ່າຍ. ຮູບແບບປະສົມປາກົດຊ້ຳແລ້ວຊ້ຳອີກ:

• Nav → List → ListItem — ສຳລັບ breadcrumbs, ລາຍການເນື້ອໃນ, ເມນູ accordion, ເມນູຕົ້ນໄມ້ ແລະການແບ່ງໜ້າ
• Form → Field → Input — ສຳລັບໂຄງຮ່າງແບບຟອມໃດໆທີ່ມີປ້າຍ, ຄຳແນະນຳ ແລະຂໍ້ຜິດພາດ
• Table → Head/Body/Foot → Row → Data — ສຳລັບຕາຕະລາງ, ປະຕິທິນ, ແຜນພາບ Gantt ແລະກະດານ kanban
• 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.