Karkas · pattern

Xususiyatlar bölimi

Landingdagi xususiyatlar bölimi (4.171): markazlaşgan sarlavha bloki (eyebrow, sarlavha, izoh) va ikonli tör — har bandda rangli ikon (toifa ranglari), nom va qisqa izoh; data-layout="cards" — har band karta içida. Ikkinçi şakl — almaşinuvçi qatorlar (.fx-features__rows): matn va media yonma-yon, har keyingi qatorda örin almaşadi; matn ostida ✓ röyxat. Telefonda bitta ustun.

beta0.28.0 dan.fx-featuresFaqat CSS

Nega FoxUI

Bir marta quriladi — hamma joyda işlaydi

Şakl va tizim FoxUI'dan, rang va şrift — tanlanadigan kutubxonadan.

8 rang mavzusi
Brendingizga eng yaqinini tanlang — pastel, neytral va holat ranglari mavzu bilan birga keladi.
Kontrast qöriqçisi
Har mavzu yoruğ va qoronği rejimda WCAG AA tekşiruvidan ötadi — build'da, avtomatik.
Özbekça şriftlar
Kutubxonadagi har şrift ʻ belgisini töğri çiqaradi; almaşsa ham ölçam buzilmaydi.
AI agent uçun MCP
Agent komponent, token va qoidalarni özi oladi — öylab topmaydi.
Yangilaniş — taklif
npx foxui update nima özgarganini körsatadi; qabul qiliş sizning qölingizda.
Yengil va tez
Boğliqliksiz CSS va kiçik JS xulqlar; ikonlar sahifada bir marta.

Mexanizm va libos

Avval işlaydi, keyin çiroyli böladi

Sahifa, forma va ma'lumot «kulrang qolip»da quriladi; libos tokenlar orqali keyin kiyiladi — mexanizm özgarmaydi.

Mavzu bitta atribut bilan almaşadi
Uslub: Qattiq, Örta, Momiq, Aylana
Yoruğ va qoronği — avtomatik

Qöriqçi

Xato kodga yetib bormaydi

HEX rang, qölda yozilgan oraliq yoki notöğri ʻ — npx foxui check hammasini topadi va qanday tuzatişni aytadi.

Variantlar

Atribut	Qiymatlar	Standart
`data-layout`	`cards` har band karta içida	`grid`
`data-align`	`start` sarlavha çapda	`center`
`data-color`	`blue` `green` `pink` `yellow` `coral` `purple`	`brand`

Anatomiya

root.fx-featuresşart
head.fx-features__headixtiyoriy
eyebrow.fx-features__eyebrowixtiyoriy
title.fx-features__titleixtiyoriy
text.fx-features__textixtiyoriy
grid.fx-features__gridixtiyoriy
item.fx-features__itemşart
icon.fx-features__iconixtiyoriy
name.fx-features__nameşart
desc.fx-features__descixtiyoriy
more (havola).fx-features__moreixtiyoriy
rows.fx-features__rowsixtiyoriy
row.fx-features__rowixtiyoriy
media.fx-features__mediaixtiyoriy
list (✓ röyxat).fx-features__listixtiyoriy

Klaviatura va kiriş

<section aria-labelledby> + h2; bandlar — röyxat (ul/li), nomlar h3. Ikon va media bezak (aria-hidden). ✓ belgili röyxat CSS'da — matn özi tuşunarli bölsin.

Kod

AI uçun: qaçon işlatiladi

Işlating

Landingda mahsulot imkoniyatlarini 3–6 band bilan körsatiş.
Muhim 2–3 imkoniyatni media bilan batafsil oçiş (rows).

Işlatmang

Turli ölçamdagi vizual mozaika → bento
Tariflarni taqqoslaş → pricing
Törga 9 tadan ortiq band qöymang — eng muhim 3–6 tasi.
Har bandga uzun abzats yozmang — nom + 1–2 qator.
Ikonlarni bezak uçun turli uslubda aralaştirmang — bitta çiziq qalinligi.

npx foxui add features

<section class="fx-features" aria-labelledby="ft-t">
  <header class="fx-features__head"><p class="fx-features__eyebrow">Nega FoxUI</p><h2 class="fx-features__title" id="ft-t">Bir marta quriladi — hamma joyda işlaydi</h2><p class="fx-features__text">Şakl va tizim FoxUI'dan, rang va şrift — tanlanadigan kutubxonadan.</p></header>
  <ul class="fx-features__grid">
    <li class="fx-features__item"><span class="fx-features__icon" data-color="purple" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 0 18c1.1 0 1.6-.9 1.2-1.8-.5-1.1.3-2.2 1.5-2.2H17a4 4 0 0 0 4-4c0-5-4-10-9-10z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10.5" cy="7" r="1"/><circle cx="15.5" cy="7.5" r="1"/></svg></span><h3 class="fx-features__name">8 rang mavzusi</h3><p class="fx-features__desc">Brendingizga eng yaqinini tanlang — pastel, neytral va holat ranglari mavzu bilan birga keladi.</p></li>
    <li class="fx-features__item"><span class="fx-features__icon" data-color="green" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z"/><path d="M8.5 12l2.5 2.5 4.5-5"/></svg></span><h3 class="fx-features__name">Kontrast qöriqçisi</h3><p class="fx-features__desc">Har mavzu yoruğ va qoronği rejimda WCAG AA tekşiruvidan ötadi — build'da, avtomatik.</p></li>
    <li class="fx-features__item"><span class="fx-features__icon" data-color="blue" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V5h16v2M9 19h6M12 5v14"/></svg></span><h3 class="fx-features__name">Özbekça şriftlar</h3><p class="fx-features__desc">Kutubxonadagi har şrift ʻ belgisini töğri çiqaradi; almaşsa ham ölçam buzilmaydi.</p></li>
    <li class="fx-features__item"><span class="fx-features__icon" data-color="pink" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/></svg></span><h3 class="fx-features__name">AI agent uçun MCP</h3><p class="fx-features__desc">Agent komponent, token va qoidalarni özi oladi — öylab topmaydi.</p></li>
    <li class="fx-features__item"><span class="fx-features__icon" data-color="yellow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11a8 8 0 0 0-14.5-4.5L4 8M4 4v4h4M4 13a8 8 0 0 0 14.5 4.5L20 16M20 20v-4h-4"/></svg></span><h3 class="fx-features__name">Yangilaniş — taklif</h3><p class="fx-features__desc">npx foxui update nima özgarganini körsatadi; qabul qiliş sizning qölingizda.</p></li>
    <li class="fx-features__item"><span class="fx-features__icon" data-color="coral" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg></span><h3 class="fx-features__name">Yengil va tez</h3><p class="fx-features__desc">Boğliqliksiz CSS va kiçik JS xulqlar; ikonlar sahifada bir marta.</p></li>
  </ul>
</section>
<section class="fx-features" style="margin-block-start:var(--fx-space-12)" aria-label="Batafsil">
  <div class="fx-features__rows">
    <div class="fx-features__row"><div class="fx-features__item"><p class="fx-features__eyebrow">Mexanizm va libos</p><h3 class="fx-features__name">Avval işlaydi, keyin çiroyli böladi</h3><p class="fx-features__desc">Sahifa, forma va ma'lumot «kulrang qolip»da quriladi; libos tokenlar orqali keyin kiyiladi — mexanizm özgarmaydi.</p><ul class="fx-features__list"><li>Mavzu bitta atribut bilan almaşadi</li><li>Uslub: Qattiq, Örta, Momiq, Aylana</li><li>Yoruğ va qoronği — avtomatik</li></ul></div><div class="fx-features__media" aria-hidden="true"><div class="fx-bg" data-pattern="dots"></div><div class="fx-card" style="inline-size:min(100%,20rem)"><h4 class="fx-card__title">Yangi ariza</h4><p class="fx-card__text">Aziz Karimov · +998 90 123 45 67</p><button class="fx-btn" data-variant="primary" type="button" tabindex="-1">Qabul qiliş</button></div></div></div>
    <div class="fx-features__row"><div class="fx-features__item"><p class="fx-features__eyebrow">Qöriqçi</p><h3 class="fx-features__name">Xato kodga yetib bormaydi</h3><p class="fx-features__desc">HEX rang, qölda yozilgan oraliq yoki notöğri ʻ — npx foxui check hammasini topadi va qanday tuzatişni aytadi.</p></div><div class="fx-features__media" aria-hidden="true"><div class="fx-code" data-variant="snippet"><pre class="fx-code__pre"><code>npx foxui check</code></pre></div></div></div>
  </div>
</section>

Tokenlar: --fx-bg-brand-subtle --fx-bg-category-blue-subtle --fx-bg-category-coral-subtle --fx-bg-category-green-subtle --fx-bg-category-pink-subtle --fx-bg-category-purple-subtle --fx-bg-category-yellow-subtle --fx-bg-subtle --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-dialog-width --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-weight-semibold --fx-popover-width --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-shadow-sm --fx-size-control-md --fx-size-icon-lg --fx-size-icon-md --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary

Şu toifadan

AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).

Xususiyatlar bölimi

Bir marta quriladi — hamma joyda işlaydi

8 rang mavzusi

Kontrast qöriqçisi

Özbekça şriftlar

AI agent uçun MCP

Yangilaniş — taklif

Yengil va tez

Avval işlaydi, keyin çiroyli böladi

Yangi ariza

Xato kodga yetib bormaydi

Variantlar

Anatomiya

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik