Můj postup při tvorbě projektu

V tomto článku bych vám chtěl ukázat jak při tvorbě webových stránek postupuju já. Asi si ze mě moc neberte příklad, píšu si to hlavně pro sebe. Nejsem žádný profík, tak možná dělám nějaké věci špatně.

Pozn.: Tak jak je tu napsáno již při tvorbě projektu úplně nepostupuji. Tyto webové stránky jsem již dělal hodně dávno, takže některé věci dělám v současnosti jinak.

Vytvoření složky pro projekt

Když chci tvořit nějaké webové stránky, tak si pro ně nejdříve samozřejmě vytvořím nějakou složku. Poté si v této složce vytvořím soubor package.json, protože používám NPM, a nainstaluju si preprocesor less. Instaluju si také nějaké další balíčky, jako je třeba autoprefixer, ale to dělám většinou až když mám webové stránky hotové. Dále si vytvořím soubor index.php (většinou) pro hlavní stránku a složku less ve které budu tvořit své css styly.

Tvorba složek a pár souborů ve složce less

Poté co jsem si vytvořil složku less, vytvořím si v ní soubor main.less a složky base, components, layout, pages a abstracts. Zbylé dvě složky ze vzoru 7-1 nepoužívám.

Ve složce base si hned vytvořím soubory base.less, typography.less a utility.less protože je budu všechny potřebovat. V souboru base.less nastavím všem elementům nulový margin a padding, nastavím box-sizing na border-box a určím si že 1rem bude 10 pixelů. Na svých webových stránkách totiž používám rem jednotky namísto pixelů, protože tím tak umožním uživateli změnit si ve svém prohlížeči velikost fontu a také se potom lépe dělá responzivita. Můžu jednoduše změnit kolik pixelů se bude rovnat jeden rem a stránky se podle toho zmenší. Můj soubor base.less vypadá na začátku takto:

Jak vidíte, kolik se rovná jeden rem (root element) nastavím na vlastnosti font-size v html selektoru. Důvod proč tam nepíšu 10px, ale 62.5% je ten, že tím tak umožním uživateli změnit si v prohlížeči font. Pokud někde nastavujeme velikost fontu pomocí procent, tak se jako hodnota použije procento velikosti fontu nejbližšího předka, který má velikost fontu nastavenou. Pokud tedy bude mít předek velikost fontu 16px a potomkovi nastavíme velikost fontu 200%, potomek bude mít velikost fontu 32px. Jelikož html element žádného předka nemá, vezme se procento z velikosti fontu, kterou má uživatel nastavenou v prohlížeči. Kromě rem existuje ještě jednotka em (element). Narozdíl od rem jednotky, která odkazuje na velikost fontu root elementu, tato jednotka odkazuje na velikost fontu elementu, ve kterém tuto jednotku používáme. Pokud tedy má element velikost fontu nastavenou na 10px a nastavíme mu šířku na 2em, jeho šířka bude 20px. Je tu jen jedna vyjímka a to je ta, když pomocí jednotky em nastavujeme elementu velikost fontu. To se potom 1em rovná velikosti fontu předka. Já jednotky em používám na media queries, tam je to ale trochu jinak, to později ještě vysvětlím.

Teď se podíváme na můj typography.less soubor. Tam si na začátku jen naimportuju font z Google Fonts, který jsem se rozhodl použít a nastavím body elementu vlastnost font-family.

Do souboru utilities.less si píšu utility třídy, které v průběhu tvorby webových stránek začnu potřebovat. Tři třídy ale používám pro každé webové stránky a ty se týkají nastavování spodního marginu. Vždycky je totiž potřeba od sebe odsazovat obsah na stránce.

Jak vidíte, používám klíčové slovo !important. Je to místo kde je podle mě vhodné ho použít. Protože pokud tyto utility třídy použijeme, tak chceme aby se opravdu použili a aby je vlastnosti jiných selektorů nepřepsali.

Ve složce abstracts si vytvořím soubory variables.less a mixins.less. V souboru variables.less si vytvářím proměnné a v souboru mixins.less si vytvářím mixiny na kód, který používám častěji, např. vycentrování elementu na střed pomocí position: absolute. Proměnné používám hlavně na barvy.

Protože začínám s tvorbou hlavní stránky tak si ve složce pages přichystám ještě soubor home.less, kde budu stylovat části týkající se jen hlavní stránky a to je vše. Poté si všechny dosud vytvořené soubory naimportuju do souboru main.less a můžu se pustit do práce. Ještě vlastně ne, ještě nevím jak by moje webové stránky měli alespoň zhruba vypadat.

Výběr designu webových stránek

Protože nejsem dizajnér, tak si design webových stránek nevymýšlím sám, ale hledám si na internetu PSD, které někdo vytvořil ve Photoshopu nebo jiném programu. Takto to stejně v praxi chodí, dizajnér vytvoří nějaký návrh jak by webové stránky měli vypadat a kodér z něj potom vytvoří webové stránky. Na PSD, podle kterého jsem vytvářel tyto stránky se můžete podívat zde. Nevytvářím to úplně identicky jak to vypadá, ale musím mít něco na co se můžu dívat.

Tvorba stránek

Poté co jsem si vybral nějaké PSD, podle kterého budu webové stránky vytvářet se pustím do práce. Používám metodu Desktop-First, takže nejprve vytvářím webové stránky pro počítač a až poté se starám o to aby to vypadalo dobře i na mobilu. Mobile-First jsem zatím nikdy nezkoušel, ale někdy bych určitě měl. Také používám systém zápisu tříd BEM, o kterém se zmiňuji ve článku o CSS metodikách.

Responzivita

Poté co své webové stránky dokončím, začnu se starat o to aby vypadali dobře na různých zařízeních. V media queries používám jako jednotku em. U podmínek media queries fungují jednotky rem a em jinak než jinde. Obě tyto jednotky odkazují na velikost fontu, kterou má uživatel nastavenou v prohlížeči. Není mezi nimi tedy žádný rozdíl, ale je lepší používat em, protože rem nemusí fungovat dobře ve všech prohlížečích. Doporučuji podívat se na tento článek, který se zabývá tím, jakou jednotku je v media queries nejlepší použít.

Před psaním media queries si vždy na začátku určím nějaké základní a vytvořím si pro ně mixiny. Takže si otevřu soubor mixins.less do kterého píšu mixiny a napíšu tam něco takového:

Při psaní podmínek media queries používám funkci, která mi umožňuje převádět pixely na em jednotky. Funkce nepíšu do souboru pro mixiny ale mám na ně soubor functions.less. Do něj jsem tedy napsal následující mixin, který je v podstatě funkce:

Poté co jsem si vytvořil mixiny pro pár základních media queries, tak se pustím do jejich psaní. Nepoužívám jen tyto základní media queries ale vytvářím i hodně jiných. Vždy začínám se změnou hodnoty rem jednotky v souboru base.less, potom zajišťuji aby byl responzivní layout a nakonec vše ostatní. Hodnotu rem jednotky měním nějak takto:

Sloučení, prefixnutí a minifikování CSS stylů

Až mám své webové stránky hotové, tak si sloučím své styly se styly, které jsem si stáhnul z internetu. Já pro své stránky skoro vždy používám nějaké ikony, tak si jejich styly sloučím s těmi mými. Díky tomu může proběhnout jen jeden HTTP request namísto dvou a načtení stránky je o něco rychlejší. Pro tuto operaci používám nástroj concat. Poté použiji nástroj autoprefixer, který mi zajistí prefixnutí novějších CSS vlastností. Díky tomu mohou tyto vlastnosti fungovat i v prohlížečích, které je zatím podporují jen experimentálně. Nakonec ještě své styly minifikuji, na to ale používám tento webový nástroj. Zde přidávám můj package.json z kterého můžete vyčíst co za balíčky používám a podívat se jak se dají použít:

Publikování stránek na internetu

Po sloučení, prefixnutí a zminifikování css stylů jsou moje stránky připraveny pro publikaci na internetu. Své stránky publikuji na endoře, protože je to zdarma.

A to je konec popisu mého postupu tvorby webových stránek.