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ě.

Bootstrap 4

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.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Frontend frameworky.

11 tipů pro Bootstrap, které jste možná neznali

25. 5. 2016 na blogu

Bootstrap je z principu věci složitý jako ruská ponorka. Všechny její čudlíky prostě znát nemůžete.

Rozhovor: S Adamem Kudrnou o Bootstrapu

16. 3. 2016 na blogu

Jak Bootstrap používají ve VisionApps? Vyplatí se živé HTML prototypy? Jak je spojit s grafikou? A proč Adam dává někdy přednost Material UI?

Kurz „Bootstrap“

Bootstrap

Tvořte uživatelská rozhraní bez hlubokých znalostí CSS díky frontend frameworku Bootstrap. Kurz vede Adam Kudrna. Kurz vede Adam Kudrna. Příští termín: 20. dubna.

Termíny dalších veřejných školení

23. února Dnešní webová kodéřina
9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč