Rozcestník HTML šablon

Rozcestník šablon slouží pouze k interním potřebám.

Stránky

Produkty

DL550-7

Vývojové prostředí kodéra

Návod na instalaci stejného vývojového prostředí je možný prohlédnout zde.

Informace k HTML/CSS/JS

HTML a CSS je tvořeno pomocí metodiky BEM.

Na elementu <body> je pro homepage CLASS homepage pro ostatní strany dle potřeby.

Na homepage je logo v elementu <h1 class="sitelogo">logo</h1> na ostatních stranách již v odstavci <p class="sitelogo">logo</p>.

Písmo

Použitá písma: FF Meta Pro (Typekit) <link rel="stylesheet" href="https://use.typekit.net/pny3rbx.css">

Typekit si dodejte váš, tento je pouze pro šablony.

Normal, Normal Italic
Bold, Bold Italic

CSS

je vygenerované z SCSS, zdrojové soubory pro SCSS jsou ve složce source/styles/*.scss.
Z SCSS jsou vygenerována 2 totožná CSS (běžná css/style.cssa minifikovaná verze css/style.min.css, která má source maps).

Obrázky

Obrázky pro CSS jsou datově komprimované. Nezkomprimavá podoba je ve složce source/images.

JavaScripty

Všechny prvky, které jsou propojeny s JavaScriptem mají class popřípadě ID js-nazev-propojeni.

Scripty jsou sloučené do jednoho souboru js/compiled.js a komprimované podoby js/compiled.min.js. Nezkomprimovaná podoba všech scriptů je ve složce source/scripts.

Spouštení jmenných prostorů a inicializace pluginů je v source/scripts/init/site.js

JS pluginy a jmenné prostory

jQuery js/jquery.min.js
Licence MIT
Dokumentace dostupná zde.

Modernizr source/scripts/_vendor-plugin/modernizr-3.5.0.min.js
Licence MIT
Detekce vlastností prohlížeče. Dokumentace dostupná zde.

CSS browser selector source/scripts/_vendor-plugin/css.browser.selector.js
Licence CC BY 2.5
Detekce OS, verze prohlížeče atd. Dokumentace dostupná zde.

Lazy načítání obrázků, iframů source/scripts/_vendor-plugin/lazyload.min.js
Licence MIT
Incializace přes class js-lazy. Dokumentace dostupná zde.
Nastavení scriptu v source/scripts/init/site.js

Responzivní obrázky source/scripts/_vendor-plugin/picturefill.min.js
Licence MIT
Použit Picturefill. Dokumentace dostupná zde.

HTML 5 placeholder source/scripts/_vendor-plugin/jquery.placeholder.js
Licence MIT
Javascriptová podpora pro prohlížeče, které neumí HTML5 placeholder. Dokumentace dostupná zde.

Magnific Popup source/scripts/_vendor-plugin/jquery.magnific-popup-1.1.0.js
Licence MIT
Magnific Popup je knihovna pro responzivní lightboxy a dialogy. Dokumentace dostupná zde.
Práce s jednotlivými komponentami je vysvětlena níže.

Lightbox source/scripts/init/site.js
Navázáno na Magnific Popup.
Popis obrázků pro lightbox se vytváří přes HTML5 datové atributy.
Class "js-lightbox" je primární inicializace. Asociace fotografií do galerie se provede automaticky.
<a href="#" class="js-lightbox" data-lightbox-title="Popis obrázku">
Seskupování pro oddělení jednotlivých skupin fotografií do galerie se provádí přes delegované odkazy přes mateřskou vrstvu s classem js-lightbox-gallery
<div class="js-lightbox-gallery"><a href="#" data-lightbox-title="Popis obrázku"><a> , <a href="#"><a></div>

Dialogy source/scripts/init/site.js
Navázáno na Magnific Popup.
Na potřebný odkaz se použije class js-open-dialog a na DIV s classem dialog se přiřadí ID, které má shodný název s hrefem asociovaného odkazu.
Odkaz na dialog
<a href="#nazev-dialogu" class="js-open-dialog">Text odkazu</a>
<div id="nazev-dialogu" class="dialog mfp-hide"><div>
Odkaz na ajax dialog (U ajax dialogu již nepoužívat třídu mfp-hide)
<a href="cesta/dialog.html" class="ajax-dialog">Text odkazu</a>

Video v iframe dialogu source/scripts/init/site.js
Navázáno na Magnific Popup.
Na potřebný odkaz se použije class js-iframe.
Odkaz na video
<a href="https://www.youtube.com/watch?v=VYF7V_WaQ4Q" class="js-iframe">Odkaz na video</a>

Carousely source/scripts/_vendor-plugin/jquery.slick.js
Licence MIT
Použit plugin Slick. Dokumentace dostupná zde.
Inicializace v source/scripts/init/site.js

Řazení/filtrování v tabulkách source/scripts/_vendor-plugin/tablesorter.js
Licence MIT
Použit plugin Tablesorter. Dokumentace dostupná zde.
Inicializace v source/scripts/init/site.js

Javascript antispam u formulářů source/scripts/custom/jquery.antispam.js
Licence MIT
Inicializace přes class js-antispam. Script provede vyplnění hodnoty z HTML5 data atributu data-value z inputu. Prvek, který má nastaven class js-antispam je skryt. V případě, že v inputu nebude hodnota z data atributu, nemělo by dojít k odeslání formuláře.

Jednoduché komponenty
Hamburger tlačítko source/scripts/custom/jquery.nav.js
Přepínač jazyků source/scripts/custom/jquery.lang-switch.js
Harmonika jazyků source/scripts/custom/jquery.accordion.js
Záložky source/scripts/custom/jquery.tabs.js
Odskrolování dokumentu source/scripts/custom/jquery.document-scroll.js
Výběr telefonních předvoleb source/scripts/custom/jquery.phoneswitch.js
Bagrování source/scripts/custom/jquery.digging.js
Cookie source/scripts/custom/jquery.cookie-info.js
Footer source/scripts/custom/jquery.footer.js