Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Izgara Düzeni

mdui, duyarlı ve mobil öncelikli 12 sütunlu bir ızgara düzeni sistemi sunar.

İlgili Okumalar

Material Design tasarım yönergeleri: Düzen - Duyarlı UI

Düzen Kapsayıcısı

mdui, sayfa içeriği ve ızgara düzeni sistemi için bir .mdui-container kapsayıcısına ihtiyaç duyar. Bu amaçla iki sınıf sunuyoruz.

.mdui-container sınıfı ekran genişliğinin %92 - %96'sını kaplar ve maksimum genişliği 1280px'dir.

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

.mdui-container-fluid sınıfı her zaman ekran genişliğinin %100'ünü kaplar.

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

Temel Izgara

.mdui-row, uygun hizalama (alignment) ve iç boşluk (padding) sağlamak için .mdui-container veya .mdui-container-fluid içine dahil edilmelidir.

.mdui-row içinde birkaç .mdui-col-xs-[1-12] sınıfı bulunur; burada .mdui-col-xs-[1-12] içindeki sayı, öğenin kaç sütun kapladığını belirtir.

Bir satırdaki sütun sayısı 12'den fazlaysa, fazla sütunlar yeni bir satıra yerleştirilir.

Örnek

<div class="mdui-row">
  <div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>

Duyarlı Izgara

.mdui-col-xs-[1-12] Telefonlar, bilgisayarlar vb. gibi tüm ekranlı cihazlarda geçerli olur.
.mdui-col-sm-[1-12] Tabletler gibi küçük ve daha büyük ekranlı cihazlarda geçerli olur.
.mdui-col-md-[1-12] Dizüstü bilgisayarlar gibi orta ve daha büyük ekranlı cihazlarda geçerli olur.
.mdui-col-lg-[1-12] Masaüstü bilgisayarlar gibi büyük ve daha büyük ekranlı cihazlarda geçerli olur.
.mdui-col-xl-[1-12] Televizyonlar gibi ultra büyük ekranlı cihazlarda geçerli olur.

Bu sınıfları karıştırarak kullanmak duyarlı bir efekt sağlayabilir.

Duyarlı kesme noktaları (breakpoints) şunlardır:

class	Aralık	Oluk Genişliği
`.mdui-col-xs-[1-12]`	> 0px	16px (her sütunun solunda ve sağında 8px)
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Örnek

<!-- Ultra küçük ekranlı cihazlarda ilk sütun %100 genişlikte, ikinci sütun %50 genişliktedir. Küçük ve daha büyük ekranlı cihazlarda ilk sütun %66,6 genişlikte, ikinci sütun %33,3 genişliktedir. -->
<div class="mdui-row">
  <div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Ultra küçük ekranlı cihazlarda her sütun %50 genişlikte, küçük ve daha büyük ekranlı cihazlarda her sütun %33,3 genişliktedir. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Tüm cihazlarda her sütun %50 genişliktedir. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>

Sütun Aralığı

Varsayılan olarak sütunlar arasında 16px boşluk vardır, sütunlar arasındaki boşluğu kaldırmak için .mdui-row üzerine .mdui-row-gapless sınıfını eklemeniz yeterlidir.

Örnek

<div class="mdui-row mdui-row-gapless">
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>

Sütun Kaydırma (Offset)

Sütunları sağa kaydırmak için .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] ve .mdui-col-offset-xl-[1-12] kullanabilirsiniz; sınıf adındaki sayı kaç sütun sağa kaydırılacağını belirtir.

Örnek

<div class="mdui-row">
  <div class="mdui-col-md-4">.mdui-col-md-4</div>
  <div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>

İç İçe Sütunlar

Mevcut sütunların içine yeni .mdui-row ve .mdui-col-[*] öğeleri ekleyerek sütunları iç içe yerleştirebilirsiniz. İç içe yerleştirilen satırların içerdiği sütun sayısı 12'yi geçemez.

Örnek

<div class="mdui-row">
  <div class="mdui-col-xs-9">
    Level 1: .col-xs-9
    <div class="mdui-row">
      <div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Eşit Bölünmüş Sütunlar

.mdui-row-xs-[1-12] içinde .mdui-col sınıfına sahip birkaç öğe bulunur ve bu öğeler eşit olarak bölünür. Örneğin: .mdui-row-xs-5 içindeki her bir .mdui-col öğesi %20 genişlik kaplar.

Örnek

<div class="mdui-row-xs-5">
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
</div>

.mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12], .mdui-row-xl-[1-12] sınıflarını karıştırarak kullanmak duyarlı mizanpaj sağlayabilir.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-container`	Genişlik sınırı olan düzen kapsayıcısı
`.mdui-container-fluid`	%100 genişlikte düzen kapsayıcısı
`.mdui-row`	Satırı tanımlar
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	Sütunu tanımlar
`.mdui-row-gapless`	Sütun boşluğunu kaldırır
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Sütun kaydırma
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Eşit bölünmüş sütunlar

Roboto Yazı Tipi

Tipografi