Creare temi custom con _s, Bootstrap e LESS

Creare Temi custom con
_s, Bootstrap e LESS
di PIERO BELLOMO

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013
@WORDCAMPBOLOGNA # WPCAMPBO13

PERCHÈ SVILUPPARE
UN 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 originali
non possono fare a meno di un tema custom!

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


COME SVILUPPARE TEMI CUSTOM
DI QUALITÀ, E RAPIDAMENTE?


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 efficace

LO STARTER THEME PERFETTO:
_S (“underscores”)


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/


LO STARTER THEME PERFETTO: _S

• Tutti i template base della
gerarchia
• Internazionalizzato
• Template tags utili

• No Home
• CSS minimale


…MA ALLORA CI VUOLE IL FRAMEWORK
(SI, MA FRONT-END)


CI VUOLE IL FRAMEWORK FRONT-END

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

• Affidabilità cross-browser, cross-platform


QUALE FRAMEWORK FRONT-END?

+ COMPLETO LEGGERO +

ZURB Foundation Twitter Bootstrap Skeleton
http://foundation.zurb.com/ http://twitter.github.com/bootstrap/ http://www.getskeleton.com/


QUALE FRAMEWORK FRONT-END?

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


GET BOOTSTRAP


GET BOOTSTRAP

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

GitHub Repo
https://github.com/twitter/bootstrap

Configuratore
http://twitter.github.com/bootstrap/customize.html

The big badass list of 268 useful twitter Bootstrap resources
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
Qualche esempio:
• Font Awesome: http://fortawesome.github.com/Font-Awesome/
• Tema flat, Metro-like: http://bootswatch.com/cosmo/


LESS

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; 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;
}

LESS

Compilazione

1. Client-side, via less.js

2. Server-side, con node.js

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


LESS

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

http://lovebootstrap.com

_S + BOOTSTRAP ?


INTEGRAZIONE _S + BOOTSTRAP

Aspetti Generici di Wordpress
1. 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

.container
Aspetti specifici di _s: la struttura

header.php
.span8
.row
theme files
.row
.span4
footer.php
.row


_S + BOOTSTRAP = _STRAP


_S + BOOTSTRAP = _STRAP

https://github.com/ptbello/_strap


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

BIO

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.


Creare temi custom con _s, Bootstrap e LESS

More Related Content

What's hot (10)

Viewers also liked (20)

Similar to Creare temi custom con _s, Bootstrap e LESS (20)

Creare temi custom con _s, Bootstrap e LESS