1. Front-end framework
Zurb Foundation
Martin Pešout
@martinpesout
#frontendisti
26. 6. 2014, Brno

2. Proč jsem před dvěma lety
zvolil Foundation?
• Vývoj webů v prostředí jazyka Ruby on Rails
• LESS nebo SASS?
• Výběr “grid-system” ze stávající nabídky;
malá nabídka responsivních frameworků
• Front-end framework, který půjde nejsnadněji
integrovat do aplikací v Ruby on Rails

3. V čem už je řadu let
vyjímečný?
• Dlouhou dobu podporuje Mobile first
• Nemusíme použít všechny komponenty
• Dobře zdokumentovaný
• Pouze základní design
pro snadné redesignování
• Řada odladěných pluginů

4. Dálší zajímavé vlastnosti
• Integrovaný fastclick.js
• Připravené SASS mixiny můžeme dále
používat (ukázka dále)
• Plugin pro Sublime Text ulehčí psaní
• Nenabízí kolekci fontových / SVG ikonek

5. Připravené rozmezí pro media queries
small - 641 px - medium - 1025 px - large
(hodnoty přepočítané při základním písmu 16 px)
!
k dispozici i 2 další breakpointy pro veliké monitory

6. Interchange
• Plugin, který mohou jiné nástroje pouze
závidět
• Využívá media queries k dynamickému
načítání obsahu
• Příklady využití: načítání obrázků, načítání
mapy

7. Off Canvas
• Boční navigace
• Jasně daná syntax
• Odladěné problémy

8. Ve výchozím nastavení se
mně nelibí :-(
• Aplikuje styly na všechny výskyty následujících
prvků bez použití speciálních tříd:
• tabulky <table>
• formuláře <form>
• speciální typografické styly na všechny základní
HTML tagy jako <h1>, <h2>, <p> apod.
• Lze manuálně vypnout a nastavit na konrkétní třídy

9. Rozdíl mezi Foundation 4 a 5
• Zurb Foundation 5 nepodporuje IE 8
• V ČR je třeba stále zvážit zda nepoužít verzi 4
• IE8 nepodporuje:
• REM jednotky
• Media queries
• HTML5 tagy
• Foundation 4 se už nadále nevyvíjí

10. Kdy Foundation nepoužiji?
• Potřebuji pouze mřížku
• Zbytečné používat framework, jehož
komponenty stejně povypínám
• Existují pěkné alternativy:
• Jeet Grid System - Bower, Yeoman generátor
http://jeet.gs/
• Gridle - Bower http://gridle.org/

11. Kdy Foundation nepoužiji?
• Nedá dohodnout s grafikem
• Grafik odmítá připravit design pro hotové
komponenty Zurb Foundation

12. Metodika B.E.M.
<form method="get" action="/search" class="search">!
<label class="search__label">!
Hledaný text!
<input type="text" name="search" class="search__field" />!
</label>!
<input type="submit" value="Vyhledat" class="search__action"/>!
</form>
• Foundation klade důraz na sémantiku - ?
• Metodika BEM není podporována
• Vlastní systém tříd lze dodefinovat za použití
SASS mixinů

13. Zurb Foundation layout
<div class="row">!
<div class="medium-9 columns">!
<p>Tělo stránky</p>!
</div>!
<div class="medium-3 columns">!
<p>Pravý sloupec</p>!
</div>!
</div>

14. Sémenticky čistší řešení
<div class="layout">!
<div class="layout-content">!
<p>Tělo stránky</p>!
</div>!
<div class="layout-sidebar">!
<p>Pravý sloupec</p>!
</div>!
</div>

15. @import "foundation/components/grid";!
!
.layout {!
// Na `layout` aplikujeme styly řádku z Foundation!
@include grid-row();!
!
.layout-content {!
// Mobile-first: uděláme `layout-container` 100% široký!
@include grid-column(12);!
!
// Na tabletech a větších zařízení uděláme `layout-container` 9 sloupců široký!
@media #{$medium-up} {!
@include grid-column(9);!
}!
}!
!
.layout-sidebar {!
// Mobile-first: uděláme `layout-sidebar` 100% široký!
@include grid-column(12);!
!
// Na tabletech a větších zařízení uděláme `layout-sidebar` 3 sloupce široký!
@media #{$medium-up} {!
@include grid-column(3);!
}!
}!
}

16. Jak postupuji já?
• Nepoužívám předkompilované CSS
• Zdrojové SCSS na github.com/zurb/foundation/
• Nastavím základní proměnné: fonty, základní
barvy
• Povypínám zbytečné moduly - JS i SCSS

17. Zkušenosti s integrací do
Drupalu
• Drupal - redakční systém
• Snadnou integrace pomocí instalace modulu
• K dispozici další moduly umožňující
integrovat jednotlivé komponenty z
Foundation - fotogalerie, Interchange

18. Děkuji za pozornost!
@martinpesout
www.martinpesout.cz
info@martinpesout.cz