Proč neupgradujeme na Bootstrap 3

Pro nové projekty a pro novou verzi administrace spokojeně používáme Bootstrap. Napjatě jsem čekal na verzi 3, která měla přinést spoustu šikovných vychytávek. Jenže když jsem se konečně dostal k vyzkoušení, tak jsem jen zíral, jak tam zprasili co mohli.

Pre-hejt

Než se pustím do hejtu, tak nejdřív co se mi na verzi tři líbí a proč jsem na ní čekal jak na smilování. Do bootstrapu 2 jsem se zamiloval velmi rychle - protypovat nebo dělat v něm administrace (na frontnendu to trochu drhne) je radost. Všechno je tam hrozně rychle hotové a zároveň to rovnou hezky vypadá. Přesto tam ale bylo pár mušek, které nová verze řeší. Ikonky jsou nově dělané přes písmo místo obrázků (výborné pro retinu apod), dialogy jsou responzivní, formuláře se konečně chovají inteligentně atd.

Technicky je nová verze zkrátka super. Navíc také vyhodila pár zbytečností včetně podpory starých prohlížečů, které už stejně nikoho nezajímají (IE7, FF3, ...).

Hejt

Novou verzi ale vzali od podlahy a tak změnili i způsob zápisu. To bych ještě pořád pochopil - dvojka měla živelný vývoj, tak chtěli všechno sjednotit. Jenže oni to nesjednotili, ale předělali úplně všechno. Najednou už to není primitivní framework, kde píšu z hlavy, nemusím řešit CSS a kód je čisté HTML5 občas s nějakou třídou. Nyní je bootstrap komplikovaný, neintuitivní a NEUVĚŘITELNĚ UKECANÝ. Předvedu na dvou příkladech, kde to bije nejvíc do očí.

Tlačítko "přidat" s ikonkou plus

<!-- Bootstrap 2 -->
<button class="btn">
   <i class="icon-plus"></i>
   Přidat
</button>

<!-- Bootstrap 3 -->
<button class="btn btn-default">
   <i class="glyphicon glyphicon-plus"></i>
   Přidat
</button>

Nový bootstrap přidal nutnost dvou tříd a navíc poměrně jasné "icon" předělal na "glyphicon".

Formulář s label a input pod sebou

<!-- Bootstrap 2 -->
<form>
    <label for="email">Email address</label>
    <input type="email" id="email">
</form>

<!-- Bootstrap 3 -->
<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Opět dvě třídy navíc a k tomu ještě obalový div.

Nový grid

Úplně jinak je i celý grid. Dříve jsme měli 12 sloupců a šířka bloku se určovala jednoduše (ikdyž s divným jménem) přes span3, span4, ... Trojka to vzala za jiný konec, zahodila původní grid a nově se označují bloky přes col-md-2, col-xs-3, ... Přiznám se, že jsem moc nepochopil, jak se s tím pracuje. Nejspíš to dává lepší možnosti pro určování skládání bloků při různých rozlišeních, ale je to o dva řády komplikovanější než původní řešení.

Navíc se změnilo chování obalového kontejneru. U dvojky máte .container-fluid, který roztáhne web přes celou obrazovky a dá mu okraje. Když se rozlišení zmenší na velikost telefon/tabletu, tak okraj zmizí. Parádička - žádné starosti a funguje to hezky. Trojka je ale mobile-first což znamená, že si můžete vybrat mezi omezením maximální šířkou 1170px a nebo webem tak nelepeným na okraj monitoru, že se vám menu odráží v jeho rámečku.

Z bootstrapu je Java

Zůstáváme proto u dvojky. Je jednoduchá a splňuje co potřebujeme. To co neumí, tak jí prostě naučím (například hezké písmové ikonky). Trojka sice už řeší všechna možná použití, ale už v ní nic neuděláte jednoduše.

Připomíná mi to srovnání Javy a PHP. Když potřebuju udělat nějakou dummy práci, tak si na to během chvilky napíšu PHP skript. Stejně tak v PHP ale jdou psát i velké věci. V Javě je ale prakticky nemožné napsat nějakou rychlovku - vždy vás nutí vyřešit všechny situace, které můžou nastat, přestože už předem víte, že vás vůbec nezajímají. Stejně tak Bootstrap 3 nutí vyřešit perfektní funkčnost na mobilu bez ohledu na to, zda je pro vás vůbec důležitá.

Mobile-first nechť mi políbí logaritmické pravítko.