MENU
SVG Modal background Created with Snap
Close
Napište nám

ZURB Foundation vs. Twitter Bootstrap

Responsivní design, adaptivní design, mobile-first přístup jsou obrovským BOOM posledních let.

Responsivní design, adaptivní design, mobile-first přístup jsou obrovským BOOM posledních let. Kdo s responsivním designem ještě nepřišel do styku a chtěl by začít kódovat šablony tak, aby si je mohli prohlížet pohodlně i lidé na mobilních zařízeních, jsou responsivní frameworky jedním z dobrých startů pro pochopení tématiky.

Aby nedošlo k omylu

Responsivní frameworky nejsou cestou ke spáse, co se týče mobilního zpracování webové stránky či webové aplikace. Jsou ve většině případů dobrým nástrojem pro weby s flat designem a weby s pravidelností. Při složitých designech – kde jediná rovná věc je řádek textu – nemá vůbec smysl responsivní framework používat, protože se kodér bude spíše trápit. Na druhou stranu kvalitní kodér nepotřebuje žádný responsivní framework, protože responsivně prostě kódovat umí. Není limitován pevně danou strukturou HTML a pojmenováním CSS tříd. A v drtivé většině případů vytvoří kód objemově o několik řádů menší.

Který framework zvolit?

Responsivních frameworků je ve světě internetu mnoho. Ve článku se zaměříme na dva nejznámější a nejpopulárnější – ZURB Foundation (v době psaní článku ve verzi 5) a Twitter Bootstrap (v době psaní článku ve verzi 3).

Rozdíly mezi Boostrapem a Foundation

Bootstrap

  • Grid – 4 velikosti (small, medium, large, extra large)
  • Velké množství UI elementů
  • Použité jednotky (rozměry, velikosti písem) – pixely
  • Preprocessory – LESS, SASS

Foundation

  • Grid – 3 velikosti (small, medium, large)
  • Menší množství UI elementů
  • Použité jednotky (rozměry, velikosti písem) – root em
  • Preprocessory – SASS

Pochopení konceptu em jednotky může být pro začínající kodéry běh na dlouhou trať. S příchodem rem jednotky se použití relativních jednotek výrazně ulehčilo, ale jejich podpora ve starších verzích prohlížečů je bídná, neboť se jedná o poměrně novou záležitost (ikdyž u Internet Exploreru je to prakticky jedno, tam nefungují správně/„aspoň nějak“ ani staré technologie a vlastnosti CSS).

A jak to vypadá zevnitř?

U Bootstrapu je prakticky všude nutno používat třídy na elementech, aby se na nich projevil vzhled frameworku. Foundation podle mě jde lepší cestou, protože předpokládá, že budete chtít použít styly frameworku. Přístup Foundation oceníte zejména při použití WYSIWYG editorů, kdy klientovi těžko vysvětlíte, že musí kliknout „tady semhle“ a napsat do nějakého políčka „class“ hodnotu „table“, aby ta tabulka vypadala „jó hezky“.

Bootstrap: <table class=„table“>
Foundation: <table>

Co se týče syntaxe, tak Foundation je takové „míň hloupé“ a při čtení/psaní zdrojového kódu je zápis srozumitelnější. Foundation navíc nevyžaduje, aby použité styly pro definicu gridu byly obaleny v elementu s třídou .container. Není to bůhví jaké plus, ale kodér se cítí svobodněji při definici gridu.

Bootstrap i Foundation nabízí standartně 12-ti sloupcový layout, ale při použití builderu přímo na stránkach frameworku nebo při použití LESS/SASS verze je možné počet sloupců změnit.

Foundation:

<div class=„row“>
<div class=„small-2 large-4 columns“>…</div>
<div class=„small-4 large-4 columns“>…</div>
<div class=„small-6 large-4 columns“>…</div>
</div>
<div class=„row“>
<div class=„large-3 columns“>…</div>
<div class=„large-6 columns“>…</div>
<div class=„large-3 columns“>…</div>
</div>

Bootstrap:

<div class=„container“>
<div class=„row“>
<div class=„col-sm-2 col-lg-4“>…</div>
<div class=„col-sm-4 col-lg-4“>…</div>
<div class=„col-sm-6 col-lg-4“>…</div>
</div>
<div class=„row“>
<div class=„col-lg-3“>…</div>
<div class=„col-lg-6“>…</div>
<div class=„col-lg-3“>…</div>
</div>
</div>