SlideShare a Scribd company logo
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 - 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
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
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-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
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
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
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
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

More Related Content

PPTX
Can ppt
DOCX
الموجات الصوتية
PPTX
Reggaeton
PPTX
Power point the bikes
PPT
Pikendusjuhtme kuldvillak123
PDF
Last Lime by Marcello Rossi
DOCX
Rph psk thun 6
PPSX
Cartelera digital (1)
Can ppt
الموجات الصوتية
Reggaeton
Power point the bikes
Pikendusjuhtme kuldvillak123
Last Lime by Marcello Rossi
Rph psk thun 6
Cartelera digital (1)

Viewers also liked (10)

PDF
PDF
Workshop HTML5+PhoneGap by Ivano Malavolta
PDF
Xamarin.Forms - Your Complete Mobile Solution
PDF
insurance details
PDF
BaasBox, piattaforma di backend opensource per realizzare in pochi passi tutt...
PPT
PDF
MakeTank Custom Italian Design
DOCX
Xamarin Form - A sample app
PDF
Dentinalhypersensitivity
PDF
Workshop Test Drive Development
Workshop HTML5+PhoneGap by Ivano Malavolta
Xamarin.Forms - Your Complete Mobile Solution
insurance details
BaasBox, piattaforma di backend opensource per realizzare in pochi passi tutt...
MakeTank Custom Italian Design
Xamarin Form - A sample app
Dentinalhypersensitivity
Workshop Test Drive Development
Ad

Similar to Zurb workshop (20)

PDF
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
PDF
Twitter Bootstrap: an Introduction
PPTX
GWT vs CSS3
PPTX
Coding Day May 26th Un'architettura scalabile e modulare per il css
PPTX
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
PDF
Smau Bologna 2016 - Codemotion
PDF
Responsive Web Design & Mobile
PPT
Lab Web Prof.Di Blasi 2008
PPT
Lab Web Prof.Di Blasi 2008
PDF
Come strutturare i contenuti del tuo sito web
PDF
Bootstrap 3.0 - Introduzione
PDF
Responsive web design spiegato semplice
PDF
Creare un tema Responsive per Magento con Bootstrap
PDF
Html e Css - 4 | WebMaster & WebDesigner
PDF
Responsive Web Design
PPT
Web Design Digital Trends 2013
PDF
Studio e sviluppo di un sito web responsive attraverso Bootstrap
PPTX
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
PDF
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
PDF
Il sito web
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
Twitter Bootstrap: an Introduction
GWT vs CSS3
Coding Day May 26th Un'architettura scalabile e modulare per il css
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
Smau Bologna 2016 - Codemotion
Responsive Web Design & Mobile
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
Come strutturare i contenuti del tuo sito web
Bootstrap 3.0 - Introduzione
Responsive web design spiegato semplice
Creare un tema Responsive per Magento con Bootstrap
Html e Css - 4 | WebMaster & WebDesigner
Responsive Web Design
Web Design Digital Trends 2013
Studio e sviluppo di un sito web responsive attraverso Bootstrap
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Il sito web
Ad

More from Commit University (20)

PDF
Accessibilità ed equità digitale: un impegno, non una scelta
PDF
GitHub Copilot:vediamo chi comanda - Commit University.pdf
PDF
Contract Driven Development - Branch 2024.pdf
PPTX
Cybersecurity & AI: Illusioni e Speranze
PDF
Migliorare la Developer Experience in un mondo Cloud Native
PPTX
Scopri come sfruttare la potenza della Hybrid RAG
PDF
Introduzione a AWS Forecast e SageMaker DeepAR: Prevedere la Domanda con il M...
PDF
Oltre l'hype: vulnerabilità e limiti dell'intelligenza artificiale.pdf
PPTX
Alla scoperta dei Vector Database e dei RAG
PDF
Nell’iperspazio con Rocket: il Framework Web di Rust!
PDF
Crea il tuo assistente AI con lo Stregatto (open source python framework)
PDF
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
PDF
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
PDF
Slide-10years.pdf
PDF
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
PDF
Vue.js slots.pdf
PPTX
Commit - Qwik il framework che ti stupirà.pptx
PPTX
Sviluppare da zero una Angular Web App per la PA
PDF
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
PDF
Prisma the ORM that node was waiting for
Accessibilità ed equità digitale: un impegno, non una scelta
GitHub Copilot:vediamo chi comanda - Commit University.pdf
Contract Driven Development - Branch 2024.pdf
Cybersecurity & AI: Illusioni e Speranze
Migliorare la Developer Experience in un mondo Cloud Native
Scopri come sfruttare la potenza della Hybrid RAG
Introduzione a AWS Forecast e SageMaker DeepAR: Prevedere la Domanda con il M...
Oltre l'hype: vulnerabilità e limiti dell'intelligenza artificiale.pdf
Alla scoperta dei Vector Database e dei RAG
Nell’iperspazio con Rocket: il Framework Web di Rust!
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Breaking REST Chains_ A Fastify & Mercurius Pathway to GraphQL Glory.pdf
Accelerating API Development: A Pit Stop with Gin-Gonic in Golang-Slide.pdf
Slide-10years.pdf
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...
Vue.js slots.pdf
Commit - Qwik il framework che ti stupirà.pptx
Sviluppare da zero una Angular Web App per la PA
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...
Prisma the ORM that node was waiting for

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