Emmaboshi 2019 Styleguide

Layout 

<h2>Griglia generica</h2>
<div class="l-grid debug-borders-nested">

    <div class="l-grid__header">
        <p>Griglia usate per l'header `l-grid > l-grid__header`</p>
    </div>

    <div class="l-grid__heading">
        <p>Griglia per home page intro e generico heading delle pagine `l-grid > l-grid__heading`</p>
    </div>

    <div class="l-grid__content">
        <p>Griglia per contenuti generici `l-grid > l-grid__content`</p>
    </div>

    <div class="l-grid__content--wide">
        <p>Griglia per contenuti generici - LARGA `l-grid > l-grid__content--wide`</p>
    </div>
</div>

<div class="l-grid">
    <div class="l-grid__content--narrow">
        <p>Griglia per contenuti generici - Più stretta usata per i testi `l-grid > l-grid__content--narrow`</p>
    </div>
</div>

</div>

<hr>

<h3>Template Home</h3>
<div class="l-grid debug-borders-nested">
    <div class="l-content">
        <code>.l-content</code>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
    </div>
</div>

<h3>Template Blog</h3>
<div class="l-grid debug-borders-nested">
    <div class="l-content--narrow">
        <code>.l-content--narrow</code>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
    </div>
</div>

<h3>Template Studio</h3>
<div class="l-grid debug-borders-nested">
    <div class="l-sidebar">
        <code>.l-content--sidebar</code>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
    </div>
    <div class="l-content">
        <code>.l-content--content</code>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
    </div>
</div>
 
<h2>Griglia generica</h2>
<div class="l-grid debug-borders-nested">

  <div class="l-grid__header">
    <p>Griglia usate per l'header `l-grid > l-grid__header`</p>
  </div>

  <div class="l-grid__heading">
    <p>Griglia per home page intro e generico heading delle pagine `l-grid > l-grid__heading`</p>
  </div>

  <div class="l-grid__content">
    <p>Griglia per contenuti generici `l-grid > l-grid__content`</p>
  </div>

  <div class="l-grid__content--wide">
    <p>Griglia per contenuti generici - LARGA `l-grid > l-grid__content--wide`</p>
  </div>
</div>

  <div class="l-grid">
    <div class="l-grid__content--narrow">
      <p>Griglia per contenuti generici - Più stretta usata per i testi `l-grid > l-grid__content--narrow`</p>
    </div>
  </div>

</div>

<hr>

<h3>Template Home</h3>
<div class="l-grid debug-borders-nested">
  <div class="l-content">
    <code>.l-content</code>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
  </div>
</div>

<h3>Template Blog</h3>
<div class="l-grid debug-borders-nested">
  <div class="l-content--narrow">
    <code>.l-content--narrow</code>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
  </div>
</div>

<h3>Template Studio</h3>
<div class="l-grid debug-borders-nested">
  <div class="l-sidebar">
    <code>.l-content--sidebar</code>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
  </div>
  <div class="l-content">
    <code>.l-content--content</code>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia obcaecati voluptatum aliquid? Magnam beatae reprehenderit expedita facere facilis quod quos praesentium aut blanditiis, assumenda aliquam aliquid fuga ipsa sapiente veritatis.</p>
  </div>
</div>
 
{
  "items": [
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Bollettino Boshi",
      "abstract": "Il Bollettino è la mia newsletter informale, spedita a cadenza imprevedibile. "
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/bottiato.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/bottiato.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Franco Bottiato",
      "abstract": "Un bot per Facebook Messenger, con la personalità di Franco Bottiato."
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Radio Boshi",
      "abstract": "Un canale Telegram di messaggi vocali inaspettati."
    }
  ],
  "_keys": [
    "type",
    "items"
  ],
  "type": "post-preview"
}

There are no notes for this item.