Lily ಎಂದರೇನು?
ಉಚಿತ, ಮುಕ್ತ ಮೂಲ, ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಮೊದಲ ಆದ್ಯತೆ ನೀಡುವ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ — ನೀವು ಕೋಡ್ ಬರೆಯುವಲ್ಲಿ ನಿಮ್ಮನ್ನು ಭೇಟಿಯಾಗುತ್ತದೆ, ಮತ್ತು ನಿಮಗೆ ಅದರ ಅಗತ್ಯವಿಲ್ಲದಾಗ ದಾರಿಯಿಂದ ಸರಿಯುತ್ತದೆ.
ಸಂಕ್ಷಿಪ್ತ ಆವೃತ್ತಿ
Lily ಒಂದು ಕ್ಯಾಟಲಾಗ್ ವೆಬ್ ಘಟಕಗಳ, ಪ್ರತಿಯೊಂದೂ ಎಂಟು ಹೆಡ್‌ಲೆಸ್ ರೂಪಗಳಲ್ಲಿ (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, ಮತ್ತು Web Components) ಅನುಷ್ಠಾನಗೊಂಡಿದೆ, ಜೊತೆಗೆ ಅವುಗಳನ್ನು ಹೇಗೆ ಶೈಲೀಕರಿಸುವುದು ಎಂದು ತೋರಿಸುವ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಒಂದು ಸಮೂಹ.
ಹೆಡ್‌ಲೆಸ್ ಆವೃತ್ತಿಗಳು ಬರುವುದು ಶೂನ್ಯ CSSನೊಂದಿಗೆ. ಅವು ನಿಮಗೆ ಶಬ್ದಾರ್ಥ HTML, ARIA ಪಾತ್ರಗಳು ಮತ್ತು ಸ್ಥಿತಿಗಳು, ಕೀಬೋರ್ಡ್ ಬೆಂಬಲ, ಮತ್ತು i18n-ಸ್ನೇಹಿ ಪ್ರಾಪ್‌ಗಳನ್ನು ನೀಡುತ್ತವೆ. ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ನೀವು ತರುತ್ತೀರಿ.
ವಿನ್ಯಾಸ ತತ್ವಗಳು
ಪ್ರವೇಶಿಸಬಹುದಾದ
ಪ್ರತಿಯೊಂದು ಘಟಕವೂ ಶಬ್ದಾರ್ಥ HTML ನಿಂದ ಆರಂಭವಾಗುತ್ತದೆ. HTML ಮಾತ್ರ ಮಾದರಿಯನ್ನು ವ್ಯಕ್ತಪಡಿಸಲಾಗದ ಸ್ಥಳದಲ್ಲಿ ಮಾತ್ರ ARIA ಅನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ. ಘಟಕಗಳು ಗುರಿಯಾಗಿಸುವುದು 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.
ಬಗ್ ಸಿಕ್ಕಿತೇ, ಒಂದು ಆಲೋಚನೆ ಇದೆಯೇ, ಘಟಕವನ್ನು ಕೊಡುಗೆ ನೀಡಲು ಬಯಸುವಿರಾ? ಇಲ್ಲಿ ಇಷ್ಯೂ ಅಥವಾ ಪುಲ್ ರಿಕ್ವೆಸ್ಟ್ ತೆರೆಯಿರಿ: GitHub.
ಸ್ಥಿತಿ: Lily ಹೊಚ್ಚಹೊಸ ಕೆಲಸ, ಮತ್ತು ನಾವು ಸಹಯೋಗ, ಮಾರ್ಗದರ್ಶನ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವಾಗತಿಸುತ್ತೇವೆ. ವಿಷಯಗಳು ಚಲಿಸುತ್ತವೆ ಮತ್ತು ವಿಕಸನಗೊಳ್ಳುತ್ತವೆ.