Pure.css

Navigace

• Úvod
• Odkazy
• Rejstřík
• Maturita z IVT
• Lekce 19
• Lekce 18
• Lekce 17
• Lekce 16
• Lekce 15
• Lekce 14
• Lekce 13
• Lekce 12
• Lekce 11
• Lekce 10
• Lekce 9
• Lekce 8
• Lekce 7
• Lekce 6
• Lekce 5
• Lekce 4
• Lekce 3
  • SSG
  • Hugo
  • Pure.css
• Lekce 2
• Lekce 1

• domovská stránka
• malá CSS knihovna
• připravné třídy pro obvyklé potřeby

Gridy

• rozmístění objektů na stránce do mřížky

<div class="pure-g">
    <div class="pure-u-1-3"><p>Třetina</p></div>
    <div class="pure-u-1-3"><p>Třetina</p></div>
    <div class="pure-u-1-3"><p>Třetina</p></div>
</div>

• mnohem zajímavější je responzivní rozmístění
  • šířka sloupců se mění podle velikosti zařízení
  • možnost zapnout rozšíření ve Firefoxu
  • nebo jen změnit velikost okna prohlížeče

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

Vyzkoušejte si

• upravte Hugo web aby používal Pure.Css
  • menu do sloupečku vedle hlavního obsahu
  • menu pomocí pure-menu