Download - Creare temi custom con _s, Bootstrap e LESS

Transcript
Page 1: Creare temi custom con _s, Bootstrap e LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Creare Temi custom con _s, Bootstrap e LESS

di PIERO BELLOMO

Page 2: Creare temi custom con _s, Bootstrap e LESS

PERCHÈ SVILUPPAREUN TEMA CUSTOM?

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 3: Creare temi custom con _s, Bootstrap e LESS

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!

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

…ma la vera domanda è?come posso sviluppare temi customdi qualità e rapidamente?

Page 4: Creare temi custom con _s, Bootstrap e LESS

COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E

RAPIDAMENTE?

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 5: Creare temi custom con _s, Bootstrap e LESS

COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E RAPIDAMENTE?

• WordPress è già un framework• Minore flessibilità

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Starter ThemeFramework

• Uso diretto di WordPress• Massima libertà

“Ma così non ci vuole più tempo?”No, con componenti solidi ed un processo efficace

Page 6: Creare temi custom con _s, Bootstrap e LESS

LO STARTER THEME PERFETTO:

_S (“underscores”)

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 7: Creare temi custom con _s, Bootstrap e LESS

LO STARTER THEME PERFETTO: _S

• A 1000-Hour Head Start: Introducing The _s Theme http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/

• Github repohttps://github.com/Automattic/_s• Generatorhttp://underscores.me/

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

• 1000 ore di vantaggio

• Direttamente dalla sorgente (Automattic)

• Not a Parent Theme

Page 8: Creare temi custom con _s, Bootstrap e LESS

LO STARTER THEME PERFETTO: _S

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

• Tutti i template base della gerarchia

• Internazionalizzato• Template tags utili

• No Home• CSS minimale

Page 9: Creare temi custom con _s, Bootstrap e LESS

…MA ALLORA CI VUOLE IL FRAMEWORK

(SI, MA FRONT-END)

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 10: Creare temi custom con _s, Bootstrap e LESS

CI VUOLE IL FRAMEWORK FRONT-END

• Reset/Normalize• Griglia• …dev’essere responsive!• Tipografia corretta• Componenti UI• ..anche dinamici (JS)

• Affidabilità cross-browser, cross-platform

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 11: Creare temi custom con _s, Bootstrap e LESS

QUALE FRAMEWORK FRONT-END?

ZURB Foundationhttp://foundation.zurb.com/

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Twitter Bootstraphttp://twitter.github.com/bootstrap/

Skeletonhttp://www.getskeleton.com/

+ COMPLETO LEGGERO +

Page 12: Creare temi custom con _s, Bootstrap e LESS

QUALE FRAMEWORK FRONT-END?

http://responsive.vermilion.com/compare.php

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 13: Creare temi custom con _s, Bootstrap e LESS

GET BOOTSTRAP

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Page 14: Creare temi custom con _s, Bootstrap e LESS

GET BOOTSTRAP

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Sito http://twitter.github.com/bootstrap/

GitHub Repohttps://github.com/twitter/bootstrap

Configuratorehttp://twitter.github.com/bootstrap/customize.html

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

Page 15: Creare temi custom con _s, Bootstrap e LESS

LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

VARIABILI@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; -moz-border-radius: @radius; border-radius: @radius;}#header { .border-radius(4px);}▼#header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}

http://lesscss.org

Page 16: Creare temi custom con _s, Bootstrap e LESS

LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Compilazione

1. Client-side, via less.js

2. Server-side, con node.js

3. Statica da GUIhttps://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

Page 17: Creare temi custom con _s, Bootstrap e LESS

LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

http://jumpstartui.com/http://tedxyyc.com/ http://learningforwardbc.ca/http://www.dreamups.org/ http://benfrain.com/ http://brentschoonover.com/

http://lovebootstrap.com

Page 18: Creare temi custom con _s, Bootstrap e LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

_S + BOOTSTRAP ?

Page 19: Creare temi custom con _s, Bootstrap e LESS

INTEGRAZIONE _S + BOOTSTRAP

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

Page 20: Creare temi custom con _s, Bootstrap e LESS

INTEGRAZIONE _S + BOOTSTRAP

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Aspetti specifici di _s: la struttura.container

header.php

footer.php

theme files

.span8

.span4

.row

.row

.row

Page 21: Creare temi custom con _s, Bootstrap e LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

_S + BOOTSTRAP = _STRAP

Page 22: Creare temi custom con _s, Bootstrap e LESS

_S + BOOTSTRAP = _STRAP

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

https://github.com/ptbello/_strap

Page 23: Creare temi custom con _s, Bootstrap e LESS

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Piero Bellomo

RELATORE: PIERO BELLOMO

Web: http://www.viewlab.net

Linkedin: http://it.linkedin.com/in/pierobellomo/Facebook: http://www.facebook.com/piero.bellomoGithub: https://github.com/ptbello

Lavora col web ormai dal XX secolo, e con WordPress già dai primi anni del XXI secolo; lo fa per corporation nazionali e internazionali, ma anche per il suo meccanico quella volta che gli ha sistemato la panda scassata della nonna. Pratica con determinazione lo User-Centered Design e ci tiene molto che i suoi utenti non debbano mai pensare.

BIO