Moderní rozložení
flexbox

WBA


Bc. Matěj Cajthaml — SSPŠ

©

Fonty

Když chceme aktuálně využívat fonty, musí být nainstalované na daném zařízení.

Nyní si ukážeme jak je používat bez instalace.

Webové fonty

  • fonty se importují ze stránek (stáhnou se)
  • fonty se uloží do cache a příště se již nestahují
  • vkládáme pomocí CSS

Kolik typů písmen je optimální?

Fonty

  • relativně velké soubory
  • velký počet ruší uživatele
  • optimálně jednotky
  • každé písmo můžeme mít různé varianty a ty musíme taktéž limitovat

Google Fonts

  • odkaz
  • fonty k dispozici zdarma
  • písma Latin Extended většinou obsahují znaky, které potřebuje Český jazyk
  • vybrané písma můžeme stáhnout nebo rovnou vložit do stránky

Tagy moderního rozložení

Tagy moderního rozložení

  • v HTML5 byly přidány nové značky
  • značky popisují nejčastější části stránek
  • tyto tagy se od nyní budou muset používat
  • tyto tagy nemají žádné styly — pouze se zobrazují blokově

Tagy rozložení

  • header — hlavička — logo, navigace, ...
  • nav — navigace — odkazy, mapy, ...
  • article — příspěvek — ucelený celek informací
  • section — sekce — sekce příspěvku
  • main — hlavní část — obsahuje informace, které se na stránkách často mění
  • aside — boční část — nejsou hlavní informace, např. autor článku, ...
  • footer — patička — navigace, copyright, ...

A proč by se měly tyto značky využívat?

Rozložení v minulosti

Využívání tabulek

  • vnořené tabulky
  • webové stránky na levé straně
  • hloupé tabulky
  • šířky zařízení

K čemu jsou určeny tabulky?

Webové stránky nejsou seznam informací.

Motivace rozložení

  • zarovnání dvou věcí vedle sebe je v (nám známem) CSS hrozné
  • v CSS3: vytvořeny dva nástroje — flexbox & grid
  • přidávají různé příkazy k umisťování prvků na stránce
  • to bude naší náplní dalších hodin

Flexbox

  • nejpoužívanější nástroj na rozložení
  • spoustu příkazů
  • nutná praxe a investování času
  • podporované všude, skvělá responzivita
  • flexbox zapneme na prvku tak, že nastavíme display: flex;

Kontejner

  • = obal okolo prvků
  • = container
  • určuje jak se prvky budou zarovnávat
  • prvky se vždy zobrazují jako blok
  • pro nás blok na kterém flexbox zapneme

Předměty

  • = jednotlivý prvek uvnitř flexboxu
  • = dítě, child, item, prvek

Osy

  • dvě osy
  • hlavní — určuje hlavní směr posunu, obyčejně osa X
  • vedlejší — určuje vedlejší směr posunu, obyčejně osa Y

Zarovnání na hlavní ose

justify-content

Zarovnání na vedlejší ose

align-items

Prohození os

flex-direction

Zalomení

flex-wrap

Flexení

  • všechny rozložení lze tvořit pomocí uvedených vlastností
  • přemýšlení co je flexbox

A Complete Guide to Flexbox

Overflow

  • určuje jak se prvek bude chovat při přetečení
  • hidden, visible, auto, scroll

Tečky

Společná práce

YouTube videa

Společná práce

SSPŠ

Společná práce

Řešení

Webový portál → Lekce → Rozložení → Řešené úlohy

Správný kód

Jak by dle Vás měl vypadat správný kód?

Názvy tříd a identifikátorů: Anglicky, krátce, výstižně

Formáty: (camelCase / snake_case / PascalCase)

HTML tagy sémanticky, v CSS používat volné selektory.

Proč bychom ale měli mít správný kód?

Formátování kódu je důležité. Používáme tedy buď mezery a nebo taby. Nekombinujeme je.

Pro formátování můžeme využít F1 → Format document.

Vlastnost gap

Vlastnost row-gap a
column-gap

Vlastnost box-shadow

  • vytvoří na daném prvku stín
  • hodnoty:
    • horizontální offset (povinné)
    • vertikální offset (povinné)
    • rozmazání
    • šířka / šíření
    • barva (povinné)
    • pozice (inset)

Vlastnost box-shadow

Stínu lze aplikovat více
pomocí rozdělení hodnot pomocí znaku ,.

Vlastnost box-shadow

Vlastnost filter

Vlastnost filter

Dvě strany

Práce

Moderní rozložení s navigací

Práce

SSPŠuper

Práce

Flexbox

  • dvě osy
  • justify-content
  • align-items
  • flex-direction
  • flex-wrap
  • gap / row-gap / column-gap

Dokončení flexboxu

Pořadí

Zarovnání na sekundární ose

Existuje zarovnání na hlavní ose pro určitý prvek?

Růst / roztažení

Prvek se bude moci roztahovat 3x více, než ostatní.

Zmenšení / stažení

flex-shrink

Jaká je základní hodnota flex-shrink a flex-grow?

Základní velikost

Určuje taktéž jakým směrem dle flex-direction.

Ikony

Ikony

  • nacházejí se skoro na každé stránce
  • sociální sítě
  • přehlednost, jednoduchost pro uživatele
  • designově zabírají méně místa a řeknou více

Pro WBA budeme používat ikony od služby Font Awesome

Ve verzi free máme k dispozici 1.600 ikon zdarma.

Ikony můžeme stáhnout a implementovat pomocí dokumentace. Pro účely prací budeme použivat CDN.

https://fontawesome.com

Obrázky pozadí

https://heropatterns.com

Barvy

https://flatuicolors.com

https://colorhunt.co

DevTools

DevTools

  • nástroje pro zlepšení vývoje webových stránek
  • všechny moderní prohlížeče
  • F12 / inspect element / CTRL + I

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/