ເຫດຜົນສຳລັບ Lily

ເລີ່ມຈາກການອອກແບບຂອງທ່ານ

ທີມຂອງທ່ານຮູ້ຢູ່ແລ້ວວ່າຜະລິດຕະພັນຄວນເບິ່ງແນວໃດ. Lily ເລີ່ມຈາກຈຸດນັ້ນພໍດີ: ມັນໃຫ້ສ່ວນທີ່ຍາກແທ້ໆທີ່ຈະເຮັດໃຫ້ຖືກ ແລະແພງທີ່ຈະເຮັດຄືນ — ອົງປະກອບທີ່ມີຄວາມໝາຍທີ່ຖືກຕ້ອງ, ສະຖານະ ARIA, ສັນຍາແປ້ນພິມ, ການຈັດການຈຸດສຸມ — ແລະປະໃຫ້ທຸກການຕັດສິນໃຈທາງສາຍຕາເປັນຂອງທ່ານທັງໝົດ ດ້ວຍຄວາມຍິນດີ. CSS ຂອງທ່ານແມ່ນຮູບລັກສະນະຂອງລະບົບການອອກແບບ ຕັ້ງແຕ່ມື້ທຳອິດ.

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

ສິ່ງທີ່ Lily ໃຫ້ຄຳໝັ້ນສັນຍາ

• ເຂົ້າເຖິງໄດ້ງ່າຍຕາມຄ່າເລີ່ມຕົ້ນ. WCAG 2.2 AAA ແມ່ນເປົ້າໝາຍສຳລັບທຸກອົງປະກອບ. ຮູບແບບປະຕິບັດຕາມ WAI-ARIA Authoring Practices; ທຸກອົງປະກອບແບບໂຕ້ຕອບໃຊ້ແປ້ນພິມໄດ້ຕາມສັນຍາທີ່ມີເອກະສານ; ແອັບຕົວຢ່າງຮັກສາ axe-core baseline ທີ່ສະອາດ.
• ແປເປັນສາກົນໄດ້ຕາມການອອກແບບ. ທຸກສາຍອັກສອນທີ່ຜູ້ໃຊ້ເຫັນ — ທຸກປ້າຍ, ຂໍ້ຜິດພາດ ແລະການປະກາດ — ແມ່ນຄຸນສົມບັດທີ່ມີຊື່ໝັ້ນຄົງຂ້າມເຟຣມເວີກ, ດັ່ງນັ້ນການແປໄຫຼຕາມທຳມະຊາດ. RTL ແລະຂໍ້ຄວາມສອງທິດທາງສືບທອດມາຈາກ dirຂອງທ່ານ. ອົງປະກອບທີ່ຮັບຮູ້ໂລແຄລຮັບໂລແຄລເປັນຄຸນສົມບັດ, ສະເໝີຢ່າງຊັດເຈນ.
• ແຄັດຕາລັອກດຽວ, ແປດເຟຣມເວີກ. ອົງປະກອບ 571 ອັນດຽວກັນ (536 ເປັນ Web Components ພື້ນເມືອງ) ດ້ວຍ class hook ແລະຂໍ້ຕົກລົງຄຸນສົມບັດດຽວກັນໃນ HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ແລະ Web Components. CSS ຂອງທ່ານ ແລະຄວາມຮູ້ຂອງທີມຖ່າຍໂອນໄດ້ຂ້າມສະແຕັກ.
• ເປັນກາງຕໍ່ຍຸດທະສາດ CSS. ຄລາສ kebab-case ທີ່ໝັ້ນຄົງໜຶ່ງອັນຕໍ່ຮາກອົງປະກອບ. CSS ທີ່ມີຄວາມໝາຍ, ຢູທິລິຕີ Tailwind, CSS-in-JS ຫຼືໜຶ່ງໃນ 57 ຮູບແບບສີສັນສຳເລັດຮູບ — Lily ຍິນດີຕ້ອນຮັບທັງໝົດ ແລະຫຼີກທາງຢ່າງສະຫງ່າງາມ.
• ຟຣີ, ຕະຫຼອດໄປ, ຕາມເງື່ອນໄຂຂອງທ່ານ. ໂອເພນຊອດພາຍໃຕ້ທາງເລືອກຂອງທ່ານຄື BSD, MIT, Apache-2.0, GPL-2.0 ຫຼື GPL-3.0. ບໍ່ມີລະດັບ pro, ບໍ່ມີໃບອະນຸຍາດຕໍ່ບ່ອນນັ່ງ, ບໍ່ມີ telemetry.

ຄວາມເລິກໃນບ່ອນທີ່ສຳຄັນ

ນອກເໜືອຈາກປຸ່ມ ແລະກ່ອງໂຕ້ຕອບທົ່ວໄປ, ແຄັດຕາລັອກຂະຫຍາຍໄປໄກກວ່າສ່ວນຫຼາຍ:

• ຮູບແບບພາກລັດ ຄົ້ນຄວ້າຈາກລະບົບການອອກແບບ NHS UK, GOV.UK, USWDS ແລະ ONS — ສະຫຼຸບຂໍ້ຜິດພາດ, ກ່ອງເຕືອນ, ລາຍການສະຫຼຸບ, ແບນເນີຂັ້ນຕອນ, ລິ້ງຂ້າມ.
• 140 ອົງປະກອບຕົວລະບຸຕົວຕົນສ່ວນບຸກຄົນແຫ່ງຊາດ ກວມເອົາຕົວລະບຸດ້ານສຸຂະພາບ, ບັດປະຈຳຕົວແຫ່ງຊາດ, ພາສີ ແລະໜັງສືຜ່ານແດນໃນຫຼາຍກວ່າ 50 ປະເທດ, ແຕ່ລະອັນບັນທຶກຮູບແບບ ແລະອະລະກອຣິທຶມການກວດສອບຂອງມັນ.
• ພື້ນຖານບັນນາທິການ ແລະ scrollytelling ດັດແປງຈາກ Reuters Graphics — ໂຄງຮ່າງບົດຄວາມ, ຕົວເລື່ອນ, ເສັ້ນເວລາ, ແຜນທີ່ແຜ່ນ.
• ຕົວຊ່ວຍຕົວເລືອກ — ແພັກເກັດນ້ອຍໆທີ່ເປັນເຈົ້າຂອງການໂຕ້ຕອບໜຶ່ງຢ່າງແຕ່ຕົ້ນຈົນຈົບ: ການສະຫຼັບຮູບແບບສີສັນ (ພ້ອມການໂຫຼດ stylesheet ຕອນແລ່ນ), ພາສາ, ຂະໜາດຕົວອັກສອນ, ການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ, ການຄົ້ນຫາ, ລິ້ງໜ້າ, ການແບ່ງປັນ ແລະການປ້ອນວັນທີ-ເວລາ. ແຕ່ລະອັນແມ່ນປຸ່ມໄອຄອນແບບບໍ່ມີຫົວທີ່ເປີດປັອບອັບ — ບໍ່ແມ່ນ <select> ພື້ນເມືອງ — ພ້ອມຄວາມຄົງຢູ່ ແລະຄວາມປອດໄພ SSR ໃນຕົວ.

ຮູບແບບສີສັນສຳລັບພາກລັດ, ພ້ອມໃຊ້ທັນທີ

Lily ມາພ້ອມກັບຮູບແບບສີສັນອ້າງອີງທີ່ເປັນອິດສະຫຼະ 57 ແບບທີ່ຕັ້ງເປົ້າໝາຍ class hook ຂອງມັນໂດຍກົງ: NHS England, NHS Scotland ແລະ NHS Wales (ແຕ່ລະອັນມີສະບັບສຳລັບຜູ້ປ່ວຍ ແລະຜູ້ປະຕິບັດ), GOV.UK, USWDS, ຊຸດສີທີ່ໄດ້ແຮງບັນດານໃຈຈາກ Adobe Spectrum ແລະ Mozilla Protocol, ແລະຊຸດຮູບແບບສີສັນສະຫວ່າງ ແລະມືດທົ່ວໄປ. ເຊື່ອມຕໍ່ stylesheet ໜຶ່ງອັນ ແລະລັກສະນະລະດັບລັດຖະບານກໍເປີດ; ຕົວຊ່ວຍ theme-picker ສະຫຼັບພວກມັນຕອນແລ່ນ.

Lily ປຽບທຽບແນວໃດ

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

ໃຜຢູ່ເບື້ອງຫຼັງ

Lily ເປັນໂຄງການໂອເພນຊອດເອກະລາດທີ່ຍັງໜຸ່ມ ທີ່ຍິນດີຕ້ອນຮັບການຮ່ວມມື, ຄຳແນະນຳ ແລະຄຳຕິຊົມ — ເບິ່ງ ກ່ຽວກັບ ສຳລັບເລື່ອງລາວ ແລະແຮງບັນດານໃຈ. ທຸກຢ່າງ — ຂໍ້ກຳນົດ, ການທົດສອບ, ແຜນງານ, ແມ່ນແຕ່ເຄື່ອງມືກວດສອບ — ເປີດເຜີຍຢູ່ທີ່ github.com/LilyDesignSystem.

ຊ່ວຍ Lily ເຕີບໂຕ

ຖ້າ Lily ມີປະໂຫຍດຕໍ່ທ່ານ, ສິ່ງທີ່ມີຄ່າທີ່ສຸດທີ່ທ່ານສາມາດເຮັດໄດ້:

• ໃຫ້ດາວ ແລະແບ່ງປັນ. ໃຫ້ດາວ ຄັງຫຼັກ ແລະສະແດງໃຫ້ເພື່ອນຮ່ວມງານເຫັນ ແຄັດຕາລັອກ — ຄວາມຮັບຮູ້ແມ່ນຊັບພະຍາກອນທີ່ຂາດແຄນທີ່ສຸດຂອງໂຄງການໜຸ່ມ.
• ສ້າງບາງຢ່າງ ແລ້ວບອກພວກເຮົາ. ລາຍງານການນຳໃຊ້ໃນໂລກຄວາມຈິງ — ສິ່ງທີ່ໄດ້ຜົນ, ສິ່ງທີ່ອາດລຽບກວ່າ — ປັ້ນແຜນງານຫຼາຍກວ່າສິ່ງອື່ນໃດ.
• ກວດສອບການເຂົ້າເຖິງໄດ້ງ່າຍ. ການກວດດ້ວຍໂປຣແກຣມອ່ານໜ້າຈໍ (VoiceOver, NVDA, JAWS) ໃນ ແອັບຕົວຢ່າງ ມີຄ່າດັ່ງທອງຄຳ; ຍື່ນສິ່ງທີ່ທ່ານພົບ.
• ປະກອບສ່ວນຮູບແບບສີສັນ ຫຼືການແປ. ທັງສອງແມ່ນການປະກອບສ່ວນຄັ້ງທຳອິດທີ່ຄົບຖ້ວນໃນຕົວ ແລະມີຂອບເຂດດີ.
• ແບ່ງປັນສິ່ງທີ່ທ່ານພົບ, ພ້ອມການຈຳລອງຂັ້ນຕ່ຳ, ທີ່ຄັງ GitHub, ຫຼືສົ່ງອີເມວຫາ joel@joelparkerhenderson.com.