Skip to content

CSS: page-layout

div[class~="instui-page-layout"] — Staðlað þriggja dálka síðuskipulag með haus, hliðarspjaldi og aðalinnihaldi.

✅ Notaðu Page-Layout þegar:

  • Þú þarft klassískt síðuskipan með leiðsögn og efnis-svæðum

  • Síðan hefur skýrt aðalinnihaldssvæði með hliðarsvæðum

  • Þú vilt samræmd bil og jöfnun yfir skipulagið 🚫 Ekki nota Page-Layout þegar:

  • Að byggja ein-dálka síðu — notaðu einfaldara skipulag í staðinn

  • Hliðarspjaldið keppir við aðalinnihald um mikilvægi

Aðgengi

  • Kortleggðu aðalinnihaldssvæðið við <main> kennileiti
  • Gefðu hliðarspjaldinu role="navigation" eða role="complementary" eftir því sem við á
  • Tryggðu að kennileitis-svæði hafi aðgreind aria-merkingar

Notkun

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

Hlutar

HlutiLýsing
.instui-bodyAðalhluti sem inniheldur hliðarspjald og innihald.
.instui-footerNeðri fótssvæði.
.instui-headerEfri haus-svæði.
.instui-mainMiðsvæði innihalds.
.instui-sidebarVinstri leiðsögn eða aukadálkur.

Stöður

StaðaLýsing
:optional

Notuð tákn

TokenTegundGildi
--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

Tengdar