...

Creare temi custom con _s, Bootstrap e LESS

by piero-bellomo

on

Report

Download: 0

Comment: 0

3,583

views

Comments

Description

 
Download Creare temi custom con _s, Bootstrap e LESS

Transcript

  • 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• …dev’essere 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 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
Fly UP