CSS: page-layout

div[class~="instui-page-layout"] — Standardowy układ strony w trzech kolumnach z nagłówkiem, paskiem bocznym i główną zawartością.

✅ Użyć Page-Layout gdy:

• Potrzebujesz klasycznej struktury strony z nawigacją i obszarami zawartości

• Strona ma wyraźny główny obszar zawartości otoczony regionami uzupełniającymi

• Chcesz zachować spójne odstępy i wyrównanie w całym układzie 🚫 Nie używać Page-Layout gdy:

• Tworzysz stronę jednokolumnową — użyj prostszego układu

• Pasek boczny konkuruje z główną zawartością o ważność

Dostępność

• Zmapuj główny obszar zawartości do punktu orientacyjnego <main>
• Nadaj paskowi bocznemu role="navigation" lub role="complementary" w zależności od potrzeb
• Upewnij się, że regiony punktów orientacyjnych mają odrębne aria-label

Użycie

@import "@pantoken/plugin-layouts/layouts.css";

Części

Część	Opis
.instui-body	Główne ciało zawierające pasek boczny i zawartość.
.instui-footer	Dolny obszar stopki.
.instui-header	Górny obszar nagłówka.
.instui-main	Centralny obszar zawartości.
.instui-sidebar	Lewy słupek nawigacyjny lub kolumna pomocnicza.

Stany

Stan	Opis
:optional	—

Zużyte tokeny

Token	Typ	Wartość
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

Powiązane

• wrapper