Na Vedeme.cz používáme určité typografické konvence, které Vám mají usnadnit orientaci v textu. Základní typografie je typografií Bootstrap. Seznamte se s alespoň některými specialitami našeho webu.
Základní styly
Toto označuje varování. Něco, co byste dělat neměli.
Použití:
<blockquote class="notewarning">...</blockquote>
Označuje velmi důležitou skutečnost.
Použití:
<blockquote class="noteimportant">...</blockquote>
A toto označuje nějaký tip.
Použití:
<blockquote class="notetip">...</blockquote>
Otázka ke zvážení.
Použití:
<blockquote class="notehelp">...</blockquote>
Poznámka, vsuvka, komentář autora příspěvku k nějaké cizí myšlence, apod.
Použití:
<blockquote class="note">...</blockquote>
Použití:
<blockquote class="noteinfo">...</blockquote>Neutrální informace.
Citace nějakého textu.
nebo také kódově korektnější
A zde je uveden Zdroj citace
Použití:
<blockquote class="notequote">...<p><small>A zde je uveden <cite title="Zdroj">Zdroj citace</cite></small></p></blockquote>
Tool tipy
Můžete se také setkat s tzv. tooltipy, na které stačí najet ukazovatelem myši.
Použití: <span class="jcetooltip" title="Demo::Toto je typický tooltip.">text obsahující tooltip</span>
Odkazy
Některé odkazy graficky rozlišujeme. Určitě ty, které vedou mimo Vedeme.cz, jako je například Google.
S jinak označenými odkazy se pojí vyskakovací okna, která mohou obsahovat video, nebo také s obrázek, nebo text a tak podobně.
Obrázek s popiskem
Obrázky s popisky jsou noční můrou webových negurů. Existuje celá řada různých řešení. Web Vedeme.cz používá od roku 2014 HTML5 a bylo by tudíž hříchem nevyužít jeho tagů <figure> a <figcaption>. Používejte třídu: <figure class="fcaption">Vypadají dobře jsou responsivní, sémantický správné a jejich používání je snadné. To, že ve starších prohlížečích se poněkud vizuálně rozpadají, mi (admin Vedeme.cz) nevadí: každý má dnes možnost si zvolit a zadarmo zajistit moderní funkční internetový prohlížeč.
Pokud je třeba element <figure> obsahující obrázek a popisek na webové stránce vycentrovat, je nutné na onen element použít vlastnost centrování bloku, zde ideálně Bootstrap třídu class="block-center".
Akordion
Pro některé druhy informací je možné s výhodou použít tzv. akordion. Na Vedeme.cz je doporučeno používat jeho bootstrap panel implementaci, kterou lze vidět v následujícím příkladu. Obsah těla panelů může být (téměř) libovolný. Syntaxi neuvádím; zájemci jí mohou odhalit v zobrazení zdrojového textu.
