Creare temi custom con _s, Bootstrap e LESS

download Creare temi custom con _s, Bootstrap e LESS

of 23

Embed Size (px)

description

 

Transcript of Creare temi custom con _s, Bootstrap e LESS

  • 1. Creare Temi custom con _s, Bootstrap e LESS di PIERO BELLOMO WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 2. PERCH SVILUPPARE UN TEMA CUSTOM?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. COME SVILUPPARE TEMI CUSTOM DI QUALIT, E RAPIDAMENTE?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. LO STARTER THEME PERFETTO: _S (underscores)WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. 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. MA ALLORA CI VUOLE IL FRAMEWORK (SI, MA FRONT-END)WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 10. CI VUOLE IL FRAMEWORK FRONT-END Reset/Normalize Griglia devessere responsive! Tipografia corretta Componenti UI ..anche dinamici (JS) Affidabilit cross-browser, cross-platformWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. QUALE FRAMEWORK FRONT-END?http://responsive.vermilion.com/compare.phpWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 13. GET BOOTSTRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. 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. 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. 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. _S + BOOTSTRAP ?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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. 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. _S + BOOTSTRAP = _STRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 22. _S + BOOTSTRAP = _STRAPhttps://github.com/ptbello/_strapWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
  • 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 WordPr