Układ siatki
mdui oferuje responsywny system siatki (grid) oparty na 12 kolumnach, stworzony z myślą o urządzeniach mobilnych.
Powiązane artykuły
Kontenery układu
mdui wymaga opakowania treści strony i systemu siatki w kontener .mdui-container. Udostępniamy do tego celu dwie klasy.
Klasa .mdui-container zajmuje 92% - 96% szerokości ekranu, przy maksymalnej szerokości 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>Klasa .mdui-container-fluid zawsze zajmuje 100% szerokości ekranu.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Podstawowa siatka
.mdui-row musi znajdować się wewnątrz .mdui-container lub .mdui-container-fluid, aby zapewnić odpowiednie dopasowanie (alignment) i dopełnienie (padding).
Wewnątrz .mdui-row znajduje się kilka klas .mdui-col-xs-[1-12], gdzie liczba w .mdui-col-xs-[1-12] określa, ile kolumn zajmuje dany element.
Jeśli suma kolumn w jednym wierszu przekroczy 12, nadmiarowe kolumny zostaną przeniesione do nowego wiersza.
<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>
Siatka responsywna
.mdui-col-xs-[1-12]Działa na wszystkich urządzeniach, np. telefonach, komputerach..mdui-col-sm-[1-12]Działa na małych ekranach i większych, np. tabletach..mdui-col-md-[1-12]Działa na średnich ekranach i większych, np. laptopach..mdui-col-lg-[1-12]Działa na dużych ekranach i większych, np. komputerach stacjonarnych..mdui-col-xl-[1-12]Działa na bardzo dużych ekranach, np. telewizorach.
Mieszanie tych klas pozwala uzyskać efekt responsywności.
Punkty przerwania (breakpoints) są następujące:
| class | Zakres | Szerokość rynienki |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (8px po lewej i prawej stronie każdej kolumny) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- Na bardzo małych ekranach pierwsza kolumna ma 100% szerokości, a druga 50%. Na małych ekranach i większych pierwsza kolumna ma 66.6% szerokości, a druga 33.3%. -->
<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>
<!-- Na bardzo małych ekranach każda kolumna ma 50% szerokości, na małych i większych każda ma 33.3%. -->
<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>
<!-- Na wszystkich urządzeniach każda kolumna ma 50% szerokości. -->
<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>Odstępy między kolumnami
Domyślnie między kolumnami występuje odstęp 16px. Aby go usunąć, należy dodać klasę .mdui-row-gapless do elementu .mdui-row.
<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>Przesunięcie kolumn
Użycie .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] oraz .mdui-col-offset-xl-[1-12] pozwala przesunąć kolumny w prawo; liczba określa o ile kolumn nastąpi przesunięcie.
<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>Zagnieżdżanie kolumn
Zagnieżdżanie kolumn odbywa się poprzez dodanie nowej klasy .mdui-row i elementów .mdui-col-[*] wewnątrz istniejących kolumn. Zagnieżdżone wiersze nie mogą przekraczać 12 kolumn.
<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>Kolumny o równej szerokości
W .mdui-row-xs-[1-12] znajduje się kilka elementów z klasą .mdui-col, które zostaną podzielone po równo. Na przykład w .mdui-row-xs-5 każdy element .mdui-col zajmuje 20% szerokości.
<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>Mieszanie klas .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] pozwala na uzyskanie układu responsywnego.
Lista klas CSS
| Nazwa klasy | Opis |
|---|---|
.mdui-container | Kontener układu z ograniczoną szerokością |
.mdui-container-fluid | Kontener układu o szerokości 100% |
.mdui-row | Definiuje wiersz |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Definiuje kolumnę |
.mdui-row-gapless | Usuwa odstępy między kolumnami |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Przesunięcie kolumn |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Kolumny o równej szerokości |