Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Mřížkové rozvržení

mdui poskytuje responzivní, mobile-first systém mřížky se 12 sloupci.

Související čtení

Designové zásady Material Design: Layout - Responsive UI

Kontejner rozvržení

mdui vyžaduje obalení obsahu stránky a systému mřížky v kontejneru .mdui-container. Poskytujeme dvě třídy pro tento účel.

Třída .mdui-container zabírá 92% - 96% šířky obrazovky a maximální šířka je 1280px.

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

Třída .mdui-container-fluid bude vždy zabírat 100% šířky obrazovky.

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

Základní mřížka

.mdui-row musí být obsažen v .mdui-container nebo .mdui-container-fluid, aby mu byl přiřazen správný alignment a padding.

V .mdui-row uveďte řadu prvků s třídou .mdui-col-xs-[1-12], kde číslo v .mdui-col-xs-[1-12] znamená, kolik sloupců daný prvek zabírá.

Pokud řada obsahuje více sloupců než 12, budou nadbytečné sloupce položeny na nový řádek.

Příklad

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

Responzivní mřížka

.mdui-col-xs-[1-12] Bude platit na všech zařízeních, jako jsou telefony a počítače.
.mdui-col-sm-[1-12] Bude platit na malých zařízeních a větších, jako jsou tablety.
.mdui-col-md-[1-12] Bude platit na středních zařízeních a větších, jako jsou notebooky.
.mdui-col-lg-[1-12] Bude platit na velkých zařízeních a větších, jako jsou stolní počítače.
.mdui-col-xl-[1-12] Bude platit na velmi velkých zařízeních, jako jsou televizory.

Kombinací těchto tříd dosáhnete responzivního efektu.

Responzivní breakpointy jsou následující:

class	Rozsah	Rozestup mezi sloupci
`.mdui-col-xs-[1-12]`	> 0px	16px (každý sloupec má 8px vlevo a vpravo)
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Příklad

<!-- Na velmi malých zařízeních je první sloupec 100% šířky, druhý sloupec 50% šířky. Na malých zařízeních a větších je první sloupec 66.6% šířky, druhý sloupec 33.3% šířky. -->
<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 velmi malých zařízeních je každý sloupec 50% šířky, na malých zařízeních a větších je každý sloupec 33.3% šířky. -->
<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 všech zařízeních je každý sloupec 50% šířky. -->
<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>

Mezera mezi sloupci

Ve výchozím nastavení je mezi sloupci mezera 16px. Přidáním třídy .mdui-row-gapless na .mdui-row lze mezeru odstranit.

Příklad

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

Posun sloupců

Pomocí .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] a .mdui-col-offset-xl-[1-12] můžete sloupec posunout doprava. Číslo v názvu třídy znamená, o kolik sloupců má být sloupec posunut doprava.

Příklad

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

Vnořené sloupce

Vnořování sloupců se dosahuje přidáním nových prvků .mdui-row a .mdui-col-[*] do existujících sloupců. Vnořené řady nesmí obsahovat více než 12 sloupců.

Příklad

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

Sloupce se stejným rozdělením

V .mdui-row-xs-[1-12] uveďte řadu prvků s třídou .mdui-col, které budou rozděleny rovnoměrně. Například: každý prvek .mdui-col v .mdui-row-xs-5 zabírá 20% šířky.

Příklad

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

Kombinací .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] dosáhnete responzivního rozvržení.

Seznam CSS tříd

Název třídy	Popis
`.mdui-container`	Kontejner rozvržení s omezenou šířkou
`.mdui-container-fluid`	Kontejner rozvržení se 100% šířkou
`.mdui-row`	Definuje řadu
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	Definuje sloupec
`.mdui-row-gapless`	Odstranit mezeru mezi sloupci
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Posun sloupců
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Sloupce se stejným rozdělením

Písmo Roboto

Typografie