CSS: page-layout

div[class~="instui-page-layout"] — Vakio kolmen sarakkeen sivuasettelu, jossa on yläosa, sivupalkki ja pääsisältö.

✅ Käytä Page-Layoutia, kun:

• Tarvitset klassisen sivurakenteen navigaatiolla ja sisältöalueilla

• Sivulla on selkeä pääsisältöalue, jota täydentävät alueet sivuilla

• Haluat johdonmukaisen välin ja tasaauksen koko asettelussa 🚫 Älä käytä Page-Layoutia, kun:

• Rakennat yksisarakkeista sivua — käytä sen sijaan yksinkertaisempaa asettelua

• Sivupalkki kilpailee pääsisällön kanssa merkityksellisyydestä

Saavutettavuus

• Määritä pääsisältöalue <main>-maamerkille
• Anna sivupalkille role="navigation" tai role="complementary" tarpeen mukaan
• Varmista, että maamerkkialueilla on erilliset aria-labelit

Käyttö

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

Esimerkit

Osat

Osa	Kuvaus
.instui-body	Päärunko, joka sisältää sivupalkin ja sisällön.
.instui-footer	Alin alatunnistealue.
.instui-header	Ylin otsikkoalue.
.instui-main	Keskeinen sisältöalue.
.instui-sidebar	Vasen navigaatio- tai apusarake.

Tilat

Tila	Kuvaus
:optional	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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	—	—

Liittyvät

• wrapper