CSS: page-layout

div[class~="instui-page-layout"] — Başlık, kenar çubuğu ve ana içerikli standart üç sütunlu sayfa düzeni.

✅ Page-Layout şu durumlarda kullanın:

• Navigasyon ve içerik alanlarına sahip klasik bir sayfa yapısına ihtiyacınız varsa

• Sayfanın belirgin bir ana içerik alanı ve ona eşlik eden bölgeler varsa

• Düzen genelinde tutarlı boşluk ve hizalama istiyorsanız 🚫 Page-Layout'i şu durumlarda kullanmayın:

• Tek sütunlu bir sayfa oluşturuyorsanız — bunun yerine daha basit bir düzen kullanın

• Kenar çubuğu ana içerikle önem açısından yarışıyorsa

Erişilebilirlik

• Ana içerik alanını bir <main> landmark'ına eşleyin
• Kenar çubuğuna uygun şekilde role="navigation" veya role="complementary" verin
• Landmark bölgelerin benzersiz aria-label'lara sahip olduğundan emin olun

Kullanım

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

Örnekler

Bölümler

Parça	Açıklama
.instui-body	Kenar çubuğu ve içeriği içeren ana gövde.
.instui-footer	Alt bilgi (footer) bölgesi.
.instui-header	Üst başlık bölgesi.
.instui-main	Merkezi içerik alanı.
.instui-sidebar	Sol navigasyon veya yardımcı sütun.

Durumlar

Durum	Açıklama
:optional	—

Tüketilen tokenler

Token	Tür	Değer
--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	—	—

İlgili

• wrapper