• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creare temi custom con _s, Bootstrap e LESS
 

Creare temi custom con _s, Bootstrap e LESS

on

  • 2,985 views

 

Statistics

Views

Total Views
2,985
Views on SlideShare
2,144
Embed Views
841

Actions

Likes
6
Downloads
50
Comments
1

9 Embeds 841

http://www.wpcon.it 484
http://wpandmore.info 328
http://www.layout1966.it 11
http://2013.bologna.wordcamp.org 6
http://localhost 5
https://www.google.com 3
http://plus.url.google.com 2
http://clicky.com 1
http://cloud.feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Creare temi custom con _s, Bootstrap e LESS Creare temi custom con _s, Bootstrap e LESS Presentation Transcript

    • 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 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
    • COME SVILUPPARE TEMI CUSTOM DI QUALITÀ, E RAPIDAMENTE?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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
    • LO STARTER THEME PERFETTO: _S (“underscores”)WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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
    • 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
    • …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-platformWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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
    • QUALE FRAMEWORK FRONT-END?http://responsive.vermilion.com/compare.phpWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • GET BOOTSTRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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
    • 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
    • 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
    • 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
    • _S + BOOTSTRAP ?WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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/
    • 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
    • _S + BOOTSTRAP = _STRAPWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • _S + BOOTSTRAP = _STRAPhttps://github.com/ptbello/_strapWORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
    • 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