Skip to content

Instantly share code, notes, and snippets.

@quimo
Last active November 6, 2016 15:10
Show Gist options
  • Save quimo/c5b8ba907aac9af0a3c9cb5366e6d206 to your computer and use it in GitHub Desktop.
Save quimo/c5b8ba907aac9af0a3c9cb5366e6d206 to your computer and use it in GitHub Desktop.
Developer vs Visual Composer
<section class="in-primo-piano">
<div class="in-primo-piano__content">
<h2>PRODOTTI IN PRIMO PIANO</h2>
<div class="product">
<h3 class="product__title">TURBO SMART</h3>
<div class="product__description">
<ol class="product__features toggleable">
<!-- feature più importante - ecco perché uso <ol> -->
<li class="product__feature">
<h4>ECO SOSTENIBILITÀ</h4>
<p>Le nuove produzioni hanno migliorato le prestazioni professionali, risparmiato energia elettrica ed aumentanto l'affidabilità.</p>
</li>
...
</ol>
</div>
<img class="product__image" src="/wp-content/uploads/2016/08/turbo_smart.png" title="Turbo Smart">
</div>
<a class="in-primo-piano__link" href="/gallery/presentazione-turbo-smart/">Vedi dettagli</a>
</div>
</section>
//al click sul titolo h4 mostro / nascondo il paragrafo di testo
$('.product__features.toggleable .product__feature').children().first().on('click', function(){
$(this).next().toggle();
});
<div class="row">
<div class="wpb_content_element span12 wpb_raw_html">
<div class="wpb_wrapper">
<div class="trick-parent home-last-row">
<div class="container">
<div class="row">
<h3>PRODOTTI IN PRIMO PIANO</h3>
</div>
<div class="row">
<div class="col-md-4">
<img src="/wp-content/uploads/2016/08/turbo_smart.png" title="Turbo Smart">
</div>
<div class="col-md-8">
<h3>TURBO SMART</h3>
<div class="last-row-w-icons">
<img alt="Ecosostenibilità" src="/wp-content/themes/flexform-child/img/icon-eco.png">
<div class="icons-texts">
<h4>ECO-SOSTENIBILITÀ</h4>
<span class="icon-text">Le nuove produzioni hanno migliorato le prestazioni professionali, risparmiato energia elettrica ed aumentanto l'affidabilità.</span>
</div>
</div>
...
<a class="home-button-red right" href="/gallery/presentazione-turbo-smart/">Vedi dettagli</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@quimo
Copy link
Author

quimo commented Sep 15, 2016

Quali sono i vantaggi di developer.html?

  • privilegia il CONTENUTO rispetto alla FORMA
  • veicola del significato (semantica) / SEO benefit
  • riduce il codice (25% in meno = maggiore velocità) / Google benefit
  • incentiva il riutilizzo degli asset (moduli CSS = manutenibilità) / Development benefit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment