CSS Referenca API

Referenca CSS API pokriva pantokenov razredni sloj komponent: komponente, utilitije, globalna pravila in deklaracije zgrajene na sistemu tokenov.

Komponente

Ime	Razred	Povzetek
agent-shell	.instui-agent-shell	Površinski vsebnik za AI agente.
alert	.instui-alert	Vrstični prikaz z barvno vrstico statusa in zamaskiranim statusnim simbolom iz skupnega nabora ikon.
avatar	.instui-avatar	Uporabniški avatar, ki prikazuje začetnice ali sliko, privzeto okrogel.
badge	.instui-badge	Majhen števec ali statusna pika postavljena na kot cilja.
banner	.instui-banner	Sporazumljivo sporočilo z ikono, ki ga je mogoče zapreti, za obvestila na ravni strani ali v kontekstu.
billboard	.instui-billboard	Velik blok za prazno stanje ali poziv k dejanju: hero ikona ali slika, naslov in sporočilo.
breadcrumb	.instui-breadcrumb	Sledi drobtinic z ločili; zadnja drobtinica je trenutna stran.
breadcrumb.link	li	Drobtinica (InstUI Breadcrumb.Link), <li> v starševskem <ol>; zadnja je trenutna stran.
button	.instui-button	Dostopljiv kontrolnik za dejanje, stiliziran iz palete tokenov; privzeto primaren.
byline	.instui-byline	Medijski objekt: hero figura ob naslovu in opisu.
calendar	.instui-calendar	Statistična mreža mesecev s navigacijo, glave dni v tednu in celicami za dneve.
calendar.day	.day	Celica dneva (InstUI Calendar.Day); -today, -selected in -outside-month označujejo njen stanje.
card	.instui-card	Površinski vsebnik, ki sprejema poljubno vsebino.
checkbox	.instui-checkbox	Native potrditveno polje in njegov napis, ali stikalo preko -variant-toggle.
close-button	.instui-close-button	Prosojna ikona-gumb, ki nariše lastni × simbol, v treh velikostih in varianti za barvno ozadje.
context-view	.instui-context-view	Dvignjen izpostavljeni oblaček z zobcem, pozicioniren na katerikoli strani; deluje kot native [popover].
drawer-layout	.instui-drawer-layout	Razdeljena postavitev z zložljivim stranskim predalom in primarnim drsečim vsebinskim panelom.
drawer-layout.content	.content	Primarni vsebinski panel, ki zapolni preostali prostor ob predalu.
drawer-layout.tray	.tray	Stranski panel ob glavni vsebini, z opcijskim prekrivanjem in površinskimi modifikatorji, podobnimi predalu.
file-drop	.instui-file-drop	Cona za odlaganje datotek z motivom ob preletu, sprejeto in zavrnjeno stanje.
form-field	.instui-form-field	Ovitek polja obrazca: napis, kontrolniki in inline, required ali readonly postavitve.
form-field-group	.instui-form-field-group	<fieldset> skupina z legend, stolpčno ali vrstično postavitvijo in konfigurabilnimi razmiki.
form-field-messages	.instui-form-field-messages	Pomoč pri polju in sporočila validacije — namig, napaka, uspeh in samo-za-bralnik-zaslona — z ikonico pri napaki in uspehu.
heading	.instui-heading	Tipografija naslovov od -level-h1 do -level-h6.
img	.instui-img	Stiliziran <img> z modifierji za prikaz, obrezovanje in učinke, ki se nalagajo.
in-place-edit	.instui-in-place-edit	[contenteditable], ki se bere kot besedilo dokler ni v fokusu, nato prikaže vhodno obrobo.
input-group	.instui-input-group	Fasada okoli tekstovnega vnosa z režami za vodilne in sledilne ikone.
link	.instui-link	Stilizirana hiperpovezava z velikostmi, inverzno varianto za temna ozadja ter vrstičnimi ali nestiliziranimi oblikami.
list	.instui-list	Seznam z razmiki elementov, pogojenimi s tokeni.
list.item	.instui-list	Element seznama (InstUI List.Item).
mask	.instui-mask	Prekrivna plast v toku, ki zapolni pozicioniranega starša in centrira vsebino — npr. spinner nad kartico. Za modal raje uporabite native <dialog> (njegov ::backdrop je maska). Vsak od teh modifikatorjev je na voljo tudi globalno (golo ali zveržen na katerokoli drugo komponento) — glej mask globalno utiliteto.
menu	.instui-menu	Spustna površina z elementi, skupinami in ločili.
menu.group	.group	Označen naslov skupine (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Vnos v meniju (InstUI Menu.Item); dodajte -disabled, -highlighted ali -active/[aria-checked].
menu.separator	.separator	Delilna črta med elementi (InstUI Menu.Separator).
metric	.instui-metric	Označena statistika — velika vrednost nad napisom.
modal	.instui-modal	Pogovorno okno (deluje na native <dialog>); deleženi kot glava/telo/noga.
modal.body	.body	Vsebinski predel (InstUI Modal.Body); samostojen <img> zavzame polno širino.
modal.footer	.footer	Vrstica dejanj (InstUI Modal.Footer).
modal.header	.header	Vrstica naslova (InstUI Modal.Header).
number-input	.instui-number-input	Fasada za numerični vnos s stolpcem za +/- spinner.
pagination	.instui-pagination	Stran za navigacijo: številčne strani, prvi, prejšnji, naslednji in zadnji puščici ter elipsa za presledke.
pagination.page	.page	Povezava ali gumb strani (InstUI Pagination.Page); trenutna stran ima [aria-current].
pill	.instui-pill	Kompakten statusni napis; dodajte vodilno ikono z deljenim -icon-<name> obrazcem.
popover	.instui-popover	Dvignjena površina za native [popover], pozicionirana z CSS anchor pozicioniranjem.
progress	.instui-progress	Določena vrstica napredka z obarvanim merilnikom, velikostmi in opcijsko oznako vrednosti.
progress-circle	.instui-progress-circle	Okrogli napreden krog, pogojen s --value in --value-max CSS spremenljivkama.
radio	.instui-radio	Native radio gumb in njegov napis.
radio-input-group	.instui-radio-input-group	Enoizbirni radio <fieldset>, navaden ali kot povezan segmentirani preklop.
range-input	.instui-range-input	Stiliziran drsnik (range) z inverzno mehurčkasto prikazno vrednostjo.
rating	.instui-rating	Ocena z zvezdicami s polnimi in praznimi ikonami ter neobvezno numerično oznako.
side-nav-bar	.instui-side-nav-bar	Navpična navigacijska vrstica z ikonami nad oznakami, z zmanjšanim načinom, kjer so prikazane samo ikone.
side-nav-bar.item	.item	Navigacijski vnos (InstUI SideNavBar.Item); -selected označi aktivnega.
simple-select	.instui-simple-select	Stiliziran nativen <select> s kazalcem, ki ustreza stanjem in velikostim vnosnega polja za besedilo.
spinner	.instui-spinner	Animirano naložno kolo; dodelite mu role="status" in aria-label.
table	.instui-table	Stilizirana podatkovna tabela za th in td plus neobvezni naslov, z razporeditvami za lebdenje, fiksno postavitev in zlagane kartice.
table.body	tbody	Skupina podatkovnih vrstic tabele (InstUI Table.Body).
table.cell	td	Podatkovna celica (InstUI Table.Cell).
table.col-header	th	Glava stolpčne celice (InstUI Table.ColHeader); privzeto oblikovanje th je pregllašeno z table.row-header za th[scope="row"].
table.head	thead	Skupina vrstic z glavo tabele (InstUI Table.Head).
table.row	tr	Vrstica tabele (InstUI Table.Row).
table.row-header	th[scope="row"]	Celica z glavo vrstice (InstUI Table.RowHeader); oblikovana iz tokenov glave vrstice, ne iz tokenov glave stolpca.
tabs	.instui-tabs	Nabor zavihkov: seznam zavihkov, izbirni zavihki in njihove plošče.
tabs.panel	.panel	Vsebinski panel za zavihek (InstUI Tabs.Panel).
tabs.tab	.tab	Posamezni gumb zavihka (InstUI Tabs.Tab, konfiguriran preko starševskega Tabs seznam zavihkov); -selected označi aktivnega.
tag	.instui-tag	Vrstični čip za ključne besede ali filter.
text	.instui-text	Tipografija osnovnega besedila z možnostmi velikosti, teže, barve in sloga.
text-area	.instui-text-area	Stiliziran, spremenljive velikosti nativni <textarea> z enakimi stanji in velikostmi kot vnosno polje za besedilo.
text-input	.instui-text-input	Stiliziran nativni <input> — vključno z date, time in datetime-local, kjer brskalnik zagotovi izbirnik — z validacijskimi stanji in velikostmi.
toggle-details	.instui-toggle-details	Stilizirano nativno <details> razkrivalo s vrtljivim chevronom.
toggle-group	.instui-toggle-group	Omejeno razkrivalo z obrobo, zgrajeno na <details>: vrstica povzetka s chevronom in zložljiva vsebina.
tooltip	.instui-tooltip	Orodni namig za lebdenje in fokus v CSS-u, mogoče postaviti na katerokoli stran.
tray	.instui-tray	Panel pripet na rob, ki drsi v iz katere koli strani; nativen [popover] ali <dialog>.
tree-browser	.instui-tree-browser	Drevo razkrivanja z vdelanimi zbirkami in listnimi elementi, z vrtljivimi chevroni.
view	.instui-view	Primitiv View: nevtralna škatla z modifikatorji ključ-vrednost za ozadje, obrobo, zaobljenost, senco, prikaz, položaj, prelivanje in kazalec. Vsak od teh modifikatorjev je na voljo tudi globalno (samostojno ali zaporedno na katerem koli drugem komponentu) — glej pripomočke background/border/shadow/display/position/overflow/cursor.

Pripomočki

Ime	Razred	Povzetek
color	.--text-danger	Semantični barvni pripomočki: .--bg-<name>, .--text-<name> (z vzdevkom .--color-<name>) in .--border-<name> za kurirano semantično paleto. Vsak od teh ima tudi priponko kot modifier, pritrjeno na komponento (na primer -bg-danger na katerem koli .instui-<component>).
cursor	.--cursor-pointer	cursor kot sestavljiva globalna razredna oznaka — .--cursor-<value> — uporabna samostojno ali zaporedno na katerikoli komponenti (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid pripomočki gap na merskem razmiku razmika, kratka (--gap-sm) ali dolga (--gap-small) črkovna oblika. Uporabno samostojno ali zaporedno na katerikoli komponenti (.instui-view.--gap-sm) — komponente, ki že nastavijo svoj gap iz komponentno-specifičnega tokena, ga lahko preglasijo.
icon	.instui-icon	Sistem ikon: velikosti .instui-icon in deljeni slikarski mehanizem -icon-<name>, ki maskira simbol (v currentColor) pred katerimkoli elementom.
layout	.--display-flex	Pripomočki za prikaz in poravnavo besedila — .--display-<value> in .--text-align-<value> — kot sestavljivi globalni razredi, uporabni samostojno ali zaporedno na katerikoli komponenti.
maskglobal	.--mask-overlay	Globalna, dvojna kopija prekrivnih modifikatorjev komponente mask — --mask-overlay, --mask-fullscreen, --mask-blur — uporabna samostojno ali zaporedno na katerikoli komponenti, brez ovijanja v element .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y kot sestavljivi globalni razredi — .--overflow-x-<value> / .--overflow-y-<value> — uporabni samostojno ali zaporedno na katerikoli komponenti.
position	.--position-relative	position kot sestavljiva globalna razredna oznaka — .--position-<value> — uporabna samostojno ali zaporedno na katerikoli komponenti (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Razredi za prikaz/skritje glede na širino vidnega polja ali vsebnika po tematski lestvici prelomnih točk.
screen-reader-content	.instui-screen-reader-content	Videz skrije vsebino, hkrati pa jo ohranja dostopno pomožni tehnologiji (standardni clip vzorec).
spacing	.--p-md	Pripomočki za margin in padding — .--m<side>-<step> / .--margin-<side>-<step> in .--p<side>-<step> / .--padding-<side>-<step> na lestvici razmika (strani t/b/s/e/x/y ali noben, kratko ali polno zapisano — na primer --mb-sm in --margin-bottom-small sta isto pravilo; margin sprejme tudi auto). Uporabno samo ali veriženo na katerikoli komponenti (na primer class="instui-view --mb-sm").
stacking	.--stack-topmost	Pripomočki za globino z-index — .--stack-<level> (deepest, below, above, topmost) — uporabno samo ali veriženo na katerikoli komponenti, da se sloji zložijo predvidljivo namesto z ročno nastavljenimi številkami.
transition	.instui-transition.-transition-fade-entering	Razredi stanja animacije za komponento Transition — .instui-transition in razredi stanja (-transition-fade-entering, -transition-scale-exited itd.) — uporabno samo ali veriženo na katerikoli komponenti.
truncate	.--truncate	Okrajšanje z elipsami z omejitvijo vrstic, ki jo nadzoruje --lines — uporabno samo ali veriženo na katerikoli komponenti (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Obroba za razhroščevanje postavitve: združite .-with-visual-debug na kateremkoli elementu, da obrobite škatlo in njene neposredne otroke, tako da je struktura postavitve takoj vidna.

Pravila

Ime	Razred	Povzetek
base	*	Globalni reset, ki ga izberete: box-sizing, površina strani, osnovna barva besedila in pisava, color-scheme ter privzete nastavitve povezav.
prose	:where(body)	Tipografske privzetosti za surovi HTML — naslovi, odstavki, seznami, povezave in koda — se samodejno uporabijo kjerkoli je uvožen (privzeto :where(body)); posredujte options.scope za ciljanje druge vsebinske korenine (npr. .vp-doc).

Plugins

Ime	Razred	Povzetek
logos	.logos	Logotipi izdelkov Instructure kot CSS image tokeni: --instui-logo-<product>-<layout>-<mode> vsebuje SVG kot data-URI, zato se logotip upodobi npr. z background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Izbirni pripomočki za surovo primitivno paleto: .instui-bg-/fg-/border-primitive-color-<name> obarvajo z barvo iz primitivnih barvnih tokenov, plus pripomočki font-family/font-weight za primitivne pisavne tokene. Izločeni iz semantičnih pripomočkov, da tam ostanejo le semantične zamenjave.
visual-debug	.-with-visual-debug	Obroba za razhroščevanje postavitve: združite .-with-visual-debug na kateremkoli elementu, da obrobite škatlo in njene neposredne otroke, tako da je struktura postavitve takoj vidna.

layout

Ime	Razred	Povzetek
callout	div[class~="instui-callout"]	Vrstični informativni opozorilnik za kratek opomnik ali beležko.
hero	div[class~="instui-hero"]	Celostranski glavni odsek s naslovom, podnaslovom in izbirno ozadno sliko.
page-layout	div[class~="instui-page-layout"]	Standardna tridelnika postavitev strani z glavo, stransko vrstico in glavnim vsebinskim poljem.
rubric-note	div[class~="instui-rubric-note"]	Strukturirana opomba z rubricami in indikatorji točkovanja.
testimonial	div[class~="instui-testimonial"]	Prikaz citata ali izjave s podatki o avtorju in neobvezno sliko.
two-column	div[class~="instui-two-column"]	Dvodelnica postavitev z levim in desnim vsebinskim območjem.
wrapper	body[class~="instui-display-flex"]	Vrstica aplikacijskega ogrodja: stranski meni, vsebnik z glavo in izbirni panel.