Zurb workshop
0 likes717 views
Il documento presenta un progetto di un negozio di abbigliamento sviluppato con Foundation 5, evidenziando le caratteristiche, i vantaggi e gli svantaggi di questa libreria. Vengono descritte le diverse fasi di lavoro, la struttura del negozio e i componenti da utilizzare, oltre a confrontare Foundation e Bootstrap. Infine, si consiglia di imparare come funzionano entrambe le librerie per applicarle correttamente nei progetti.
![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](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-7-320.jpg)
![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](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-8-320.jpg)
![Base
[passo base]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 9](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-9-320.jpg)
![TopBar
[passo topbar]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 11](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-11-320.jpg)
![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](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-14-320.jpg)
![Giveaways
[passo giveaways]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 17](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-17-320.jpg)
![Product cards
[passo best-selling-products]
@microspino - www.microspino.com - Italy 2015 - do whatever you want licence - made with <3 for Comm-it 20](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-20-320.jpg)
![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](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-23-320.jpg)
![- 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](https://image.slidesharecdn.com/zurbworkshopd1-150223031852-conversion-gate01/85/Zurb-workshop-25-320.jpg)
Zurb workshop
- 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 [email protected]: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