Zurb Shop

(microspino/ZurbShop)

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

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

(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

Foundation5 - pregiApprendimento, 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

Foundation5 - difetti4 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

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

Workshop passo-passoLo step corrente è indicato nelle slides. Es. [passo jumbotron]git clone git@github.com:microspino/ZurbShop.gitcd ZurbShopgit 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

Blocchi di contenuto4 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

Base[passo base]

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

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

TopBar

[passo topbar]

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

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

<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

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

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

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

Giveaways

[passo giveaways]

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

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

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

Product cards

[passo best-selling-products]

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

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

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

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

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

- 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

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

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

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

Plus4 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

E' meglio Bootstrap? NOE' 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