Lily ಯೊಂದಿಗೆ ಆರಂಭಿಸುವುದು

ಸ್ಥಾಪಿಸಿ

Lily ಒಂದು Git ಮೊನೊರೆಪೊದಲ್ಲಿ ವಾಸಿಸುತ್ತದೆ, ಪ್ರತಿ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಹೆಡ್‌ಲೆಸ್ ಲೈಬ್ರರಿ, ಸಹಾಯಕ ಪ್ಯಾಕೇಜ್‌ಗಳು ಮತ್ತು ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಒಂದು ಡೈರೆಕ್ಟರಿಯೊಂದಿಗೆ. ಪ್ರಯತ್ನಿಸಲು ವೇಗವಾದ ಮಾರ್ಗವೆಂದರೆ ಮೊನೊರೆಪೊವನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ ನಿಮ್ಮ ಸ್ಟ್ಯಾಕ್‌ನ ಹೆಡ್‌ಲೆಸ್ ಲೈಬ್ರರಿಯನ್ನು ತೆರೆಯುವುದು:

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

ಹೆಡ್‌ಲೆಸ್ ಲೈಬ್ರರಿಗಳನ್ನು ಕ್ಲೋನ್ ಅಥವಾ ವೆಂಡರ್ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ — ಮೂಲವನ್ನು ಸತ್ಯದ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಿ ಮತ್ತು ನಿಮಗೆ ಬೇಕಾದದ್ದನ್ನು ನಕಲಿಸಿ. ಆದ್ಯತೆ ಸಹಾಯಕಗಳು ಹೆಚ್ಚುವರಿಯಾಗಿ ಸ್ಥಾಪಿಸಬಹುದಾದ ಪ್ಯಾಕೇಜ್‌ಗಳಾಗಿ ಬರುತ್ತವೆ, ಬಿಲ್ಡ್ ಮತ್ತು ಪ್ರಕಟಣೆ ಪೈಪ್‌ಲೈನ್‌ನೊಂದಿಗೆ (JS ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಗೆ npm, Blazor ಗೆ NuGet).

ಹೆಡ್‌ಲೆಸ್ ಘಟಕವನ್ನು ಬಳಸಿ

ಹೆಡ್‌ಲೆಸ್ ಘಟಕಗಳು ಶಬ್ದಾರ್ಥ 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/ ಡೈರೆಕ್ಟರಿ. ಪ್ರತಿಯೊಂದೂ 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 ಅವನ್ನು ಜೋಡಿಸುತ್ತದೆ). ಪ್ರತಿಯೊಂದೂ ಪಾಪ್‌ಅಪ್ ತೆರೆಯುವ ಹೆಡ್‌ಲೆಸ್ ಐಕಾನ್-ಬಟನ್ — ಲಿಸ್ಟ್‌ಬಾಕ್ಸ್, ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿ, ಹುಡುಕಾಟ ಫಾರ್ಮ್, ಅಥವಾ (date-time-picker ಗೆ) ದಿನಾಂಕ ಆಯ್ಕೆ ಸಂವಾದ — ಸ್ಥಳೀಯ <select>ಅಲ್ಲ; SSR-ಸುರಕ್ಷಿತ; ಮತ್ತು CSS ಇಲ್ಲದೆ ಬರುತ್ತದೆ:

• theme-picker — ನಿರ್ವಹಿಸಲ್ಪಡುವ <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"> ಲೇಬಲ್‌ಗಳನ್ನು ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ.
• aria-labelledby / aria-describedby ಅಡ್ಡ-ಉಲ್ಲೇಖಗಳಿಗಾಗಿ.
• aria-invalid + aria-errormessage ದೋಷ ಸ್ಥಿತಿಗಳಿಗಾಗಿ.
• role="alert" ಮತ್ತು aria-live ಡೈನಾಮಿಕ್ ವಿಷಯಕ್ಕಾಗಿ.
• aria-pressed, aria-expanded, aria-current ಸ್ಥಿತಿಗಾಗಿ.
• Roving tabindex ಗ್ರಿಡ್‌ಗಳಿಗಾಗಿ.

ಫೋಕಸ್ ಸೂಚಕಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಗ್ರಾಹಕರು ಒದಗಿಸುತ್ತಾರೆ — Lily ಎಂದೂ ನಿಮ್ಮ ವಿನ್ಯಾಸಕ್ಕೆ ಘರ್ಷಿಸುವ ಡೀಫಾಲ್ಟ್ ಫೋಕಸ್ ರಿಂಗ್ ಅನ್ನು ಬಿಡಿಸುವುದಿಲ್ಲ. ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ತಮ್ಮ ಮಾರ್ಗಗಳಾದ್ಯಂತ ಶುದ್ಧ axe-core ಮೂಲರೇಖೆಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತವೆ.

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ

ಪ್ರತಿ ಲೇಬಲ್, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್, ದೋಷ ಸಂದೇಶ ಮತ್ತು ಬಟನ್ ಪಠ್ಯ ಒಂದು ಪ್ರಾಪ್. ಹಾರ್ಡ್‌ಕೋಡ್ ಸ್ಟ್ರಿಂಗ್‌ಗಳಿಲ್ಲ. ನಿಮ್ಮ ಆಯ್ಕೆಯ ಅನುವಾದ ಫ್ರೇಮ್‌ವರ್ಕ್ ಸೇರಿಸಿ — 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.

ಪರೀಕ್ಷೆಗಳು ಬಳಸುತ್ತವೆ Vitest ನ ಅಂತರ್ನಿರ್ಮಿತ ಮ್ಯಾಚರ್‌ಗಳು ಮಾತ್ರ — ಎಂದಿಗೂ ಇಲ್ಲ jest-dom ಮ್ಯಾಚರ್‌ಗಳು. ಇದು ಪರೀಕ್ಷಾ ಸೂಟ್‌ಗಳನ್ನು ಒಯ್ಯಬಲ್ಲವಾಗಿ ಇರಿಸುತ್ತದೆ. ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು Playwright ಎಂಡ್-ಟು-ಎಂಡ್ ಸೂಟ್‌ಗಳು, axe-core ಪ್ರವೇಶಿಸುವಿಕೆ ಮೂಲರೇಖೆಗಳು ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವ್ಯೂಪೋರ್ಟ್ ಸ್ವೀಪ್ ಸೇರಿಸುತ್ತವೆ.

AI ಏಜೆಂಟ್‌ಗಳು

ಈ ಸೈಟ್ ಪ್ರಕಟಿಸುತ್ತದೆ llms.txt ಮತ್ತು llms.json ಅದರ ರೂಟ್‌ನಲ್ಲಿ — ಅದರ ಅತ್ಯಂತ ಮುಖ್ಯ ಪುಟಗಳ ಆಯ್ದ ನಕ್ಷೆ, ಇದನ್ನು ಅನುಸರಿಸುವ ಯಾವುದೇ ಸಾಧನಕ್ಕಾಗಿ llms.txt ಸಂಪ್ರದಾಯ.

ಅಧಿಕೃತ ಮೊನೊರೆಪೊ ಹೆಚ್ಚುವರಿಯಾಗಿ ಎರಡು ಕಳುಹಿಸುತ್ತದೆ Claude Skills: lily-design-system-skill, ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸುವ ಯಾರಿಗಾದರೂ Lily ಯ ಪರಿಕಲ್ಪನೆಗಳು, ಪರಿಭಾಷೆ ಮತ್ತು ಸಂಯೋಜನೆ ಮಾದರಿಗಳನ್ನು ಒಳಗೊಳ್ಳುವ ಸಾಮಾನ್ಯ ಉದ್ದೇಶದ ಕೌಶಲ್ಯ, ಮತ್ತು lily-design-system-maintainer-skill, ಅದರ ಮೇಲೆ ಕೆಲಸ ಮಾಡುವ ಯಾರಿಗಾದರೂ ಮೊನೊರೆಪೊದ ಅಗತ್ಯ-ಫೈಲ್‌ಗಳ ವಿನ್ಯಾಸ ಮತ್ತು ಉಪಕರಣಗಳನ್ನು ಒಳಗೊಳ್ಳುವ ತಾಂತ್ರಿಕ ಕೌಶಲ್ಯ. ಎರಡೂ ಇದರ ರೂಟ್‌ನಲ್ಲಿವೆ ಅಧಿಕೃತ ಮೊನೊರೆಪೊ.

ಸಮಸ್ಯೆ ನಿವಾರಣೆ

ಕೊಡುಗೆ

Lily ಯುವ ಮತ್ತು ಸಹಯೋಗವನ್ನು ಸ್ವಾಗತಿಸುತ್ತದೆ. ಈಗ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಕೊಡುಗೆಗಳು:

• ಹೊಸ ಘಟಕಗಳು (ವಿಶೇಷವಾಗಿ ಸ್ಥಾಪಿತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳ ಮಾದರಿಗಳು).
• ಹೊಸ ಥೀಮ್‌ಗಳು — ಪ್ರತಿಯೊಂದೂ ಒಂದು ಸ್ವತಂತ್ರ ಸ್ಟೈಲ್‌ಶೀಟ್, ಚೆನ್ನಾಗಿ ವ್ಯಾಪ್ತಿ ನಿರ್ಧರಿಸಿದ ಮೊದಲ PR.
• ಉತ್ತಮ ಉದಾಹರಣೆ ಶೈಲೀಕರಣ — ಏನು ಸಾಧ್ಯ ಎಂದು ತೋರಿಸಿ.
• ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಅನುವಾದಗಳು.
• ಕನಿಷ್ಠ ಪುನರುತ್ಪಾದನೆಯೊಂದಿಗೆ ಬಗ್ ವರದಿಗಳು.
• ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ಪ್ರವೇಶಿಸುವಿಕೆ ಲೆಕ್ಕಪರಿಶೋಧನೆಗಳು.

ಇಲ್ಲಿ ಇಷ್ಯೂಗಳು ಮತ್ತು PR ಗಳನ್ನು ತೆರೆಯಿರಿ github.com/LilyDesignSystem/lily-design-system.

ಸಮುದಾಯ ಮತ್ತು ಬೆಂಬಲ

• ಪ್ರಶ್ನೆಗಳು ಮತ್ತು ಬಗ್ ವರದಿಗಳು — ಇಲ್ಲಿ ಇಷ್ಯೂ ತೆರೆಯಿರಿ github.com/LilyDesignSystem/lily-design-system.
• ಇಮೇಲ್ — ನಿರ್ವಾಹಕರು ಓದುತ್ತಾರೆ joel@joelparkerhenderson.com ಮತ್ತು ಸಹಯೋಗ, ಮಾರ್ಗದರ್ಶನ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವಾಗತಿಸುತ್ತಾರೆ.
• ಕನ್ನಡಿಗಳು — Lily ಯನ್ನು ಇಲ್ಲಿಗೂ ತಳ್ಳಲಾಗುತ್ತದೆ Codeberg ಮತ್ತು GitLab, ಹೀಗಾಗಿ ನೀವು ಇಷ್ಟಪಡುವ ಫೋರ್ಜ್‌ನಿಂದ ಭಾಗವಹಿಸಬಹುದು.
• ನಡವಳಿಕೆ — ಯೋಜನೆಯು ಪ್ರಮಾಣಿತ ನೀತಿಸಂಹಿತೆಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ; ದಯೆಯಿಂದಿರಿ, ಒಳ್ಳೆಯ ಉದ್ದೇಶವನ್ನು ಊಹಿಸಿ.

FAQ