Z Figmy do webu

Krok 1: Dizajnový jazyk: Farby, fonty, základné štýly projektu

Na príklade nižšie môžete vidieť zadefinovanie CSS premenných (sekcia :root{}) a ich použitie var(--nazov-premennej na definovanie CSS štýlov pre celý projekt.

:root {
--color--primary-white: #FFF;
--color--primary-black: #1E1E1E;
--color--secondary-blue-light: #A3E9F6;
--color--grayscale-gray100: #F5F5F5;

--text-color: var(--color--primary-black);
--text-color-secondary: #757575;
--title-hero: 4.5rem;
--subtitle: 2rem;
--heading: 1.5rem;
}

body {
  font-family: "Roboto Condensed", serif; font-optical-sizing: auto;
  color: var(--text-color); line-height: 100%;
}

h1, h2, h3, h4, h5 { line-height: 120%; }

h1 { font-size: var(--title-hero); }
h2 { font-size: var(--subtitle); color: var(--text-color-secondary); }

Krok 2: Usporiadanie obsahu: Layout, flexbox

Začíname zatiaľ jednou obrazovkou, pretože zvyšné obrazovky môžu mať spoločný layout, iba budú zobrazovať iný obsah. Cieľom nemá byť viacero HTML súborov, pričom každé bude mať iný obsah, ale skôr jedno HTML s množstvom komponentov. Technológia React v spolupráci s nástrojom Figma presne mapujú tento komponentový prístup. Začneme ho aplikovať na budúci týždeň.

Vo vzorovom príklade príkladu titulky.com (na konci tohto modulu) môžete vidieť základ definície usporiadania hlavnej obrazovky pomocou flexibilného usporiadania, ktoré sa presne mapuje na štruktúru modelu hlavnej stránky vo Figme.

Alternatíva k flexibilnému usporiadaniu: mriežka (grid)

Ako alternatíva k flexibilnému usporiadaniu (ktoré sa automaticky prispôsobuje šírke obrazovky a dokáže obsah aj zalamovať podľa potreby, no nedokáže efektívne definovať presný počet riadkov alebo stĺpcov ako mriežku) napríklad pre tabuľky, je možné použiť štýl mriežky (grid).

Na zadefinovanie presného počtu riadkov alebo stĺpcov, do ktorých sa budú elementy automaticky usporadúvať, je možné použiť štýly grid-template-rows a grid-template-columns.

Krok 3: Responzívny web

Flexibilné usporiadanie prvkov alebo mriežka nám do istej miery zabezpečia prispôsobenie rozhrania veľkosti obrazovky. Na overenie použite vývojárske nástroje prehliadača, konkrétne nástroj pre testovanie responzívneho dizajnu.

Pri zabezpečení responzívneho zobrazenia však je niekedy potrebné preusporiadať obsah obrazovky tak, že staticky definované štýly na to už nestačia. Napríklad, v našej prípadovej štúdii zoznam top filmov alebo seriálov je možné usporiadať do riadka, no na úzkej obrazovke by to kvôli nedostatku priestoru chcelo už zobrazenie do stĺpca. Na zadefinovanie vlastností pre zobrazenie na rôznych veľkostiach obrazoviek sa používajú tzv. media queries.

Príklad pre top filmy:

HTML:

<div class="section top-movies">
    <h3> Top Filmy </h3>
    <div class="card-list">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</div>

CSS:

.card-list { display: flex; flex-direction: row; gap: 48px; /*...*/ }

@media (max-width: 360px) {
  .card-list { flex-direction: column; gap: 16px; }
}
@media (max-width: 680px) {
  .card-list { gap: 24px; }
}

Zoznam kariet v sekcii top filmov je usporiadaný do riadka, no ak bude mať obrazovka menej ako 360px, bude sa zobrazovať do stĺpca. S rôznou šírkou obrazovky taktiež prispôsobujeme medzery medzi kartami (gap). Vyskúšajte si responzívnosť stránky v prehliadači.

Krok 4: Individuálne zadanie