Bootstrap 4: SASS, flexbox a další novinky

Nová verze přichází v duchu konzervativní strategie tvůrců Bootstrapu. Dělat lépe co už umí. Od čtyřky tedy nečekejte žádné bombastické novinky, ale je to dobře.

Bručoun by řekl, že – co se nových vlastností týká – Bootstrap jen dotahuje konkurenci. Já říkám, že v branži není co objevovat. A na rozdíl od konkurence jde Bootstrap do hloubky a odladí více detailů.

Bootstrap 4 je v alfa fázi, proto i školení zatím primárně orientuji na třetí verzi s tím, že novinky ve čtyřce zmiňuji průběžně.

LESS → SASS

Začátečníkům jsem vždy doporučoval CSS preprocesor LESS, takže se možná budete divit, že volám: dobrá zpráva!

LESS je skvělý pro 80 % využití preprocesorů – na webech a v menších aplikacích. Je to prostě trochu lepší CSS. Drží se jeho deklarativní povahy a nezatěžuje složitostmi. Když ale děláte komplexní software typu frontend frameworku, chybí vám trochu té programátorské imperativnosti. A to je přesně důvod, proč jít do SASSu – v kódu Bootstrapu není cyklus (@each) nebo podmínka (@if/@else) žádnou výjimkou.

Navíc – Bootstrap teď díky Libsass kompiluje daleko rychleji.

Imperativně/deklarativní špagety Bootstrap neservíruje

SASS v rukou programátora dokáže naprosto devastovat žádanou jednoduchost CSS kódu. Konkurenční framework Foundation se díky tomu dostal do pekla imperativnosti. Jeho kódu není pro UI vývojáře jednoduché rozumět. Imperativně-deklarativní spaghetti code, fujky. Je skvělé, že se tomuhle lákadlu podařilo týmu stojícímu za Bootstrapem odolat. Krásně oddělují programátorské imperativní mixiny od CSS kódu. Srovnejte s děsivým kódem stejné komponenty Foundation.

IE9+

Pokud Bootstrap nasazujete na weby dostupné širokému publiku, tohle pro vás může být nejkontroverznější novinka. Z pohledu tvůrců Bootstrapu je to ale pochopitelné, a dokonce i v českém rybníku je podíl nejstaršího Exploreru naprosto minimální – aktuálně výrazně pod tři procenta.

Nepodpora IE8 a starších samozřejmě neznamená nedostupnost obsahu, jen nepřítomnost layoutu, funkčních javascriptových rozšíření a občas horší typografii.

Nová mřížka a flexbox

Komponenta pro layout přidala jeden breakpoint pro mobilní zařízení, což bylo fakt potřeba:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,
  // Medium screen / tablet
  md: 48em,
  // Large screen / desktop
  lg: 62em,
  // Extra large screen / wide desktop
  xl: 75em
) !default;

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Navíc je možné si pro mřížku a komponenty zapnout flexbox layout. U mřížky je flexbox výhodný například pro:

• dorovnávání výšky jednotlivých sloupců
• možnost prohazování pořadí sloupců
• jednoduché vertikální zarovnávání, včetně centrování

Raději upozorňuji, že flexbox nebyl navržen pro celostránkové layouty a tak se velmi složité mřížky nemusí na pomalých zařízeních vykreslovat právě optimálně.

Zapnout si flexbox je v Bootstrapu jednoduché:

$enable-flex: true;

rem typografie

Jednotka rem je pravým požehnáním responzivních webů a doufám, že se brzy stane standardem. Nesmí se samozřejmě zapomínat na automaticky generovaný pixelový fallback pro staré prohlížeče:

font-size: 16px;
font-size: 1rem;

V Bootstrapu 4 je proto lepší tvořit odsazení pomocí rem, nikoliv preprocesorové proměnné:

margin-bottom: .5rem;

Další novinky

• Zrušili komponenty Well, Thumbnail a Panel. Nahrazeny jsou komponentou Card.
• Bootstrap tým vytvořil novou resetovací komponentu pro základní nastavení CSS – Reboot. Celý Boostrap je opět v box-sizing: border-box.
• Nová globální nastavení – například stíny a gradienty lze vypnout globálními proměnnými. Viz proměnná $enable-rounded a další.
• Autorský tým produkuje a prodává oficiální Bootstrap šablony. Zatím je jich pomálu, ale v dlouhodobé perspektivě to dává smysl pro obě strany.