Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Front-end framework
Zurb Foundation
Martin Pešout
@martinpesout
#frontendisti
26. 6. 2014, Brno
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...
V čem už je řadu let
vyjímečný?
• Dlouhou dobu podporuje Mobile first
• Nemusíme použít všechny komponenty
• Dobře zdokumen...
Dálší zajímavé vlastnosti
• Integrovaný fastclick.js
• Připravené SASS mixiny můžeme dále
používat (ukázka dále)
• Plugin ...
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...
Interchange
• Plugin, který mohou jiné nástroje pouze
závidět
• Využívá media queries k dynamickému
načítání obsahu
• Přík...
Off Canvas
• Boční navigace
• Jasně daná syntax
• Odladěné problémy
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ř...
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 ...
Kdy Foundation nepoužiji?
• Potřebuji pouze mřížku
• Zbytečné používat framework, jehož
komponenty stejně povypínám
• Exis...
Kdy Foundation nepoužiji?
• Nedá dohodnout s grafikem
• Grafik odmítá připravit design pro hotové
komponenty Zurb Foundation
Metodika B.E.M.
<form method="get" action="/search" class="search">!
<label class="search__label">!
Hledaný text!
<input t...
Zurb Foundation layout
<div class="row">!
<div class="medium-9 columns">!
<p>Tělo stránky</p>!
</div>!
<div class="medium-...
Sémenticky čistší řešení
<div class="layout">!
<div class="layout-content">!
<p>Tělo stránky</p>!
</div>!
<div class="layo...
@import "foundation/components/grid";!
!
.layout {!
// Na `layout` aplikujeme styly řádku z Foundation!
@include grid-row(...
Jak postupuji já?
• Nepoužívám předkompilované CSS
• Zdrojové SCSS na github.com/zurb/foundation/
• Nastavím základní prom...
Zkušenosti s integrací do
Drupalu
• Drupal - redakční systém
• Snadnou integrace pomocí instalace modulu
• K dispozici dal...
Děkuji za pozornost!
@martinpesout
www.martinpesout.cz
info@martinpesout.cz
Upcoming SlideShare
Loading in …5
×

Zurb Foundation

869 views

Published on

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Zurb Foundation

  1. 1. Front-end framework Zurb Foundation Martin Pešout @martinpesout #frontendisti 26. 6. 2014, Brno
  2. 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. 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. 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. 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. 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. 7. Off Canvas • Boční navigace • Jasně daná syntax • Odladěné problémy
  8. 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. 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. 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. 11. Kdy Foundation nepoužiji? • Nedá dohodnout s grafikem • Grafik odmítá připravit design pro hotové komponenty Zurb Foundation
  12. 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. 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. 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. 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. 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. 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. 18. Děkuji za pozornost! @martinpesout www.martinpesout.cz info@martinpesout.cz

×