Daniele Spinosa presenta il contest di CommitUniversity dedicato a Bootstrap Vs Foundation.

1. Zurb Shop
(microspino/ZurbShop)
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 1

2. Chi sono io?
- sviluppatore freelance - Ruby, RoR, iOS...
...E tutto il resto, ma solo le cose migliori :)
Redis, ReactJS, Go, Lua, Swift, Processing...
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 2

3. (Ri)costruiamo il negozio di
abbigliamento usando Foundation5
...Ispirato al mockup fatto in Bootstrap
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 3

4. Foundation5 - pregi
Apprendimento, Library Add-ons e templates dalla
community, 5 Versioni, Alcuni plugin JS molto orinali
(Joyride, OffCanvas, Abide, Magellan). Uso di
modernizr e jQuery, jQuery FastClick,
personalizzazione dal sito Zurb o via Sass, Interchange,
Column equalizer, Pricing Tables... Guardate la
documentazione ma non è tutto oro quello che luccica.
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 4

5. Foundation5 - difetti
4 IE8 escluso
4 5 versioni
4 non completamente testato
4 Orbit deprecate
4 molti plugin JS
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 5

6. Breakpoints
$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); / 641px, 1024px /
$large-range: (64.063em, 90em); / 1025px, 1440px /
$xlarge-range: (90.063em, 120em); / 1441px, 1920px /
$xxlarge-range: (120.063em); / 1921px */
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 6

7. Workshop passo-passo
Lo step corrente è indicato nelle slides.
Es. [passo jumbotron]
git clone git@github.com:microspino/ZurbShop.git
cd ZurbShop
git pull origin heads/<nome passo del workshop>
git checkout <nome passo del workshop>
git checkout footer
...Oppure potete scaricare lo zip da Github dopo esservi
spostati sul branch corrispondente allo step corrente.
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 7

8. Blocchi di contenuto
4 Top bar (fixed) [topbar]
4 Carosello gigante [jumbotron]
4 Outlet prodotti su 3 colonne [giveaways]
4 Prodotti su 4 colonne (2 su mobile) [best-selling-products]
4 Citazione/Motto [blockquote]
4 Ultime offerte [slider-and-text]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 8

9. Base
[passo base]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 9

10. 4 stili di base (foundation)
4 font Google (Leto)
4 un file css per le personalizzazioni questo progetto
commit.css
4 immagini
4 jQuery - JS
4 struttura HTML5 responsive
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 10

11. TopBar
[passo topbar]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 11

12. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 12

13. <div class="contain-to-grid fixed">
<nav class="top-bar custom-navbar" data-topbar role="navigation">
<ul class="title-area">
<li class="name"><h1 id="joy-step0"><a href="/"><i class="fi-heart"></i> THE ZURB SHOP</a></h1></li>
<li class="toggle-topbar">
<a href="#" style="color:black"> <span>Menu</span> </a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contacts</a></li>
<li>
<a href="/cart"> <i class="fi-shopping-cart beside-text"></i> <span class="label round">5</span> </a>
</li>
</ul>
</section>
</nav>
</div>
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 13

14. Jumbotron
[passo topbar]
(per gli amici carosello...)
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 14

15. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 15

16. 4 usiamo Orbit
4 immagini dello slider larghe quanto tutta la pagina
img.full-width { width: 100%; height: auto; }
4 personalizziamo lo slider con data-options
"animation:fade;slide_number:false;timer:false;"
4 miglioriamo le captions con un po di css (vedi sez.
slider1 di commit.css)
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 16

17. Giveaways
[passo giveaways]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 17

18. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 18

19. 4 3 colonne su dispositivi large
4 un elemento sopra l'altro alle altre risoluzioni (mobile
e tablet)
4 usare la class end per evitare buchi con 5,8,11,14...
Elementi
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 19

20. Product cards
[passo best-selling-products]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 20

21. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 21

22. 4 4 colonne sui dispositivi a schermo grande
4 2 colonne su tablet
4 un elemento sopra l'altro su mobile
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 22

23. Citazione e Ultime Offerte
[passi blockquote e slider-and-text]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 23

24. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 24

25. - aggiungiamo solo un po' di stile (sez.
QUOTE di commit.css)
Footer
[passo footer]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 25

26. 4 composto da un footer ed un sub-footer
4 il footer principale è diviso in quattro sezioni
secondo il rapporto 4 + 1 + 3 + 4
4 la seconda colonna è costuita solo da icone social e
vogliamo che rimanga cosi anche su schermi piccoli
4 la terza colonna contiene un form inline con una row
annidata che sfrutta la classe collapse per togliere il
gutter
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 26

27. 4 la quarta colonna contiene una griglia di elementi
ottenuta da una semplice unordered list
4 cambia numero di elementi per riga ai vari breakpoint
small-block-grid-2 medium-block-grid-3 large-
block-grid-4
4 le thumbnails sono semplici img dotate di classe th
4 il testo è centrato in ogni elemento della griglia grazie
alla classe text-center applicata a tutta la griglia
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 27

28. @microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 28

29. Plus
4 Tooltip
4 Joyride
4 Templates
4 AddOns
4 Zurb Playground
4 CLI gem (ruby)
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 29

30. E' meglio Bootstrap? NO
E' meglio Foundation5? NO
Sono molto utili per avviare un progetto. E' cosa buona
imparare come funzionano entrambi, soprattutto il
loro sistema righe/colonne e prendere SOLO ciò che
serve. Non sostituiscono il vostro designer di fiducia
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 30