WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Creare Temi custom con _s, Bootstrap e LESS
di PIERO BELLOMO
PERCHÈ SVILUPPAREUN TEMA CUSTOM?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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?
COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E
RAPIDAMENTE?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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
LO STARTER THEME PERFETTO:
_S (“underscores”)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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
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
…MA ALLORA CI VUOLE IL FRAMEWORK
(SI, MA FRONT-END)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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
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 +
QUALE FRAMEWORK FRONT-END?
http://responsive.vermilion.com/compare.php
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
GET BOOTSTRAP
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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/
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
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
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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
_S + BOOTSTRAP ?
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/
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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
_S + BOOTSTRAP = _STRAP
_S + BOOTSTRAP = _STRAP
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
https://github.com/ptbello/_strap
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
Top Related