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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (20)

Semelhante a Creare temi custom con _s, Bootstrap e LESS

Semelhante a Creare temi custom con _s, Bootstrap e LESS (11)

Creare temi custom con _s, Bootstrap e LESS