Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Creare temi custom con _s, Bootstrap e LESS

5.007 visualizaciones

Publicado el

Creare temi custom con _s, Bootstrap e LESS

  1. 1. Creare Temi custom con _s, Bootstrap e LESS di PIERO BELLOMO WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  2. 2. PERCHÈ SVILUPPARE UN TEMA CUSTOM?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  3. 3. PERCHÈ UN TEMA CUSTOM?Perche sei un Designer!per prendere vita, le tue creazioni più belle e originalinon possono fare a meno di un tema custom!…ma la vera domanda è?come posso sviluppare temi customdi qualità e rapidamente?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  4. 4. COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E RAPIDAMENTE?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  5. 5. COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E RAPIDAMENTE? Framework Starter Theme• WordPress è già un framework • Uso diretto di WordPress• Minore flessibilità • Massima libertà “Ma così non ci vuole più tempo?” No, con componenti solidi ed un processo efficaceWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  6. 6. LO STARTER THEME PERFETTO: _S (“underscores”)WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  7. 7. LO STARTER THEME PERFETTO: _S• 1000 ore di vantaggio• Direttamente dalla sorgente (Automattic)• Not a Parent Theme• A 1000-Hour Head Start: Introducing The _s Theme http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/• Github repo https://github.com/Automattic/_s• Generator http://underscores.me/WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  8. 8. LO STARTER THEME PERFETTO: _S • Tutti i template base della gerarchia • Internazionalizzato • Template tags utili • No Home • CSS minimaleWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  9. 9. …MA ALLORA CI VUOLE IL FRAMEWORK (SI, MA FRONT-END)WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  10. 10. CI VUOLE IL FRAMEWORK FRONT-END• Reset/Normalize• Griglia• …dev’essere responsive!• Tipografia corretta• Componenti UI• ..anche dinamici (JS)• Affidabilità cross-browser, cross-platformWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  11. 11. QUALE FRAMEWORK FRONT-END? + COMPLETO LEGGERO +ZURB Foundation Twitter Bootstrap Skeletonhttp://foundation.zurb.com/ http://twitter.github.com/bootstrap/ http://www.getskeleton.com/WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  12. 12. QUALE FRAMEWORK FRONT-END?http://responsive.vermilion.com/compare.phpWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  13. 13. GET BOOTSTRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  14. 14. GET BOOTSTRAPSitohttp://twitter.github.com/bootstrap/GitHub Repohttps://github.com/twitter/bootstrapConfiguratorehttp://twitter.github.com/bootstrap/customize.htmlThe big badass list of 268 useful twitter Bootstrap resourceshttp://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resourcesQualche esempio:• Font Awesome: http://fortawesome.github.com/Font-Awesome/• Tema flat, Metro-like: http://bootswatch.com/cosmo/WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  15. 15. LESSVARIABILI@nice-blue: #5B83AD;@light-blue: (@nice-blue + #111);#header { color: @light-blue; } #header { color: #6C94BE; }@base-whitespace: 20px;.myclass { padding: 2 * @base-whitespace; } .myclass { padding : 40px; }MIXINS.border-radius(@radius) { -webkit-border-radius: @radius; http://lesscss.org -moz-border-radius: @radius; border-radius: @radius;}#header { .border-radius(4px);}#header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  16. 16. LESSCompilazione1. Client-side, via less.js2. Server-side, con node.js3. Statica da GUIhttps://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.jsWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  17. 17. LESS http://jumpstartui.com/ http://tedxyyc.com/ http://learningforwardbc.ca/ http://www.dreamups.org/ http://benfrain.com/ http://brentschoonover.com/ http://lovebootstrap.comWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  18. 18. _S + BOOTSTRAP ?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  19. 19. INTEGRAZIONE _S + BOOTSTRAPAspetti Generici di Wordpress1. Menu [ wp_nav_menu() ]2. Form [ search, comments ]3. Vari Shortcode [ img + caption, oembed]Wordpress Starter themes con Bootstrap (non _s)http://www.rootstheme.com/http://bootstrapwp.rachelbaker.me/http://320press.com/wpbs/
  20. 20. INTEGRAZIONE _S + BOOTSTRAP .containerAspetti specifici di _s: la struttura header.php .span8 .row theme files .row .span4 footer.php .rowWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  21. 21. _S + BOOTSTRAP = _STRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  22. 22. _S + BOOTSTRAP = _STRAPhttps://github.com/ptbello/_strapWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  23. 23. RELATORE: PIERO BELLOMO Piero Bellomo Web: http://www.viewlab.net Linkedin: http://it.linkedin.com/in/pierobellomo/ Facebook: http://www.facebook.com/piero.bellomo Github: https://github.com/ptbelloBIOLavora col web ormai dal XX secolo, e con WordPress già dai primi anni del XXI secolo; lo fa percorporation nazionali e internazionali, ma anche per il suo meccanico quella volta che gli ha sistemato lapanda scassata della nonna. Pratica con determinazione lo User-Centered Design e ci tiene molto che isuoi utenti non debbano mai pensare.WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

×