Düzen ve ızgara

Kırılımlar

Ekranlar üç genişlikte tasarlanır: 390, 1024 ve 1440 px. Kodda bu genişlikler Tailwind’in kırılım önekleriyle seçilir.

Aralık	Tailwind öneki	Tasarım genişliği	Sütun	Oluk ve kenar boşluğu	Kenar menü
0-767 px	(öneksiz)	390	4	16 px	Çekmece
768-1023 px	md:	1024	8	24 px	Çekmece
1024-1279 px	lg:	1024	12	24 px	Daraltılmış (72 px)
1280 px ve üstü	xl:	1440	12	32 px	Açık (264 px)

• Tasarım küçük ekrandan başlar; geniş ekran kuralları md:, lg:, xl: önekleriyle eklenir.
• Ara genişliklerde düzen kırılmaz: sütunlar esner, içerik akar.
• 390 px kırılımında birincil kontroller 48 px yüksekliğe çıkar.

Izgara

12

6

6

3

3

3

3

• Sütun genişliği esnektir; oluk (sütunlar arası boşluk) ve kenar boşluğu sabittir.
• İçerik alanının en büyük genişliği 1104 px’tir. Daha geniş ekranlarda içerik ortalanır ya da tablo gibi geniş içerik için tam genişlik seçilir.
• Bölgeler sütunlara oturur; bir bölgenin içindeki boşluklar boşluk token’larından gelir.
• Izgara tablo verisi için kullanılmaz; tablolar Data table ile kurulur.

Uygulama kabuğu

Bölge	Ölçü	Davranış
Üst çubuk	64 px yükseklik	Yapışkandır; içerik altında kayar ve odaktaki öğeyi örtmez.
Kenar menü, açık	264 px	1280 px ve üstünde.
Kenar menü, daraltılmış	72 px	1024-1279 px arasında; yalnızca ikonlar ve ipucu.
Kenar menü, çekmece	Tam yükseklik kaplama	1024 px altında; menü düğmesiyle açılır, Esc ile kapanır.
İçerik	Kalan alan, en çok 1104 px	Kendi içinde kayar; sayfa başlığı içeriğin ilk öğesidir.

Kullanıcının kenar menüyü daraltma tercihi saklanır; kırılım değişince menü kırılımın varsayılanına döner.

Gösterge paneli ızgarası

Gösterge panelleri 12 sütunlu ızgaraya standart genişliklerle yerleşir. Aynı satırdaki kartlar aynı yüksekliktedir.

Kart	1280 px ve üstü	1024 px	768 px	390 px
Gösterge kutusu (tek sayı)	3 sütun	4 sütun	4 sütun (8 içinde)	Tam genişlik
Grafik	6 ya da 8 sütun	6 sütun	Tam genişlik	Tam genişlik
Liste ya da özet	4 ya da 6 sütun	6 sütun	Tam genişlik	Tam genişlik
Tablo	12 sütun	12 sütun	Tam genişlik, kendi içinde yatay kayar	Tam genişlik, kendi içinde yatay kayar

• Kartlar arası boşluk ızgara oluğuyla aynıdır.
• Önem sırası soldan sağa ve yukarıdan aşağıdır; dar ekranda kartlar bu sırayla alt alta dizilir.
• Bir satırda en çok dört gösterge kutusu olur.

Yoğunluk

Yoğunluk data-density özniteliğiyle seçilir ve boşluk ile kontrol yüksekliklerini birlikte değiştirir. Ekranlar yoğunluk için ayrı ölçü yazmaz. Ayrıntılar Boşluk sayfasındadır.

Kaydırma ve yeniden akış

• Sayfa yalnızca dikey kayar. 320 CSS px genişlikte yatay kaydırma olmaz (WCAG 1.4.10).
• Tablo ve grafik gibi iki boyutlu içerik kendi kapsayıcısı içinde yatay kayar; kapsayıcının klavyeyle odaklanabilir bir adı vardır.
• Yapışkan başlık ve alt çubuk ekranın yüksekliğinin üçte birinden fazlasını kaplamaz.
• Kaydırma kapsayıcılarına yapışkan bölgeler kadar scroll-padding verilir; böylece odaktaki öğe örtülmez.

Token’lar

Düzen ölçüleri:

Token (önerilen)	Değer
layout.content.max-width	1104 px
layout.gutter	16 px (390), 24 px (1024), 32 px (1440)
app-shell.sidebar.width (exists)	256 px
app-shell.sidebar.width-collapsed (exists)	48 px
layout.topbar.height	64 px

Yönergeler

Bölgeleri ızgaraya oturtun

YapınKartlar sütunlara oturur; kenarlar hizalanır.

YapmayınElle verilen genişlikler hizayı bozar ve dar ekranda taşar.