Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creare temi custom con _s, Bootstrap e LESS

4,864 views

Published on

Published in: Investor Relations

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

×