Slim

Slim è il templating engine usato per scrivere html all'interno del template e dei partial Middleman.

Middleman imposta ERB come linguaggio di default ma abbiamo ritenuto slim più snello e leggibile e il risultato finale molto pulito.

Slim è compreso nel bundle con gem "slim".

I file devono avere estensione .html.slim per essere interpretati. I file il cui nome inzia con _underscore, non vengono generati in html ma vengono usati come file ausiliari per templating o per i partial. I file dentro la cartella templates sono anch'essi ignorati come impostato in config.rb

ignore "/templates/*"

Le basi di slim

• I tag html sono senza <> e non richiedono chiusura </>
• Slim è rigoroso nell'indentazione senza la quale da errore di compilazione.
• Le classi iniziano con un punto .nome-classe. Una classe senza tag da per scontato che si tratti di un div
• Gli ID si asegnano con un cancelletto #id-elemento

Ad esempio:

  section#main-hero.hero
    h1 Titolo

  #main-hero.section.hero
    h1 title

Viene interpretato così:

<section id="main-hero" class="hero">
  <h1>Titolo</h1>
</section>

<div id="main-hero" class="section hero">
  <h1>Titolo</h1>
</div>

Slim e ruby

Slim si integra perfettamente con Ruby. La documentazione è esaustiva per tutti. Riportiamo qui solo alcuni pattern usati più frequentemente nel progetto.

È possibile usare #{} come elemento per interpretare ruby in alcuni contesti.

  h1 page.title
  h1 = page.title
  h1 = "Titolo: #{page.title}"

Viene interpretato così:

  <h1>page.title</h1>
  <h1>La Repubblica Digitale</h1>
  <h1>Titolo: La Repubblica Digitale</h1>

Gli attributi dei tag sono sempre identificati tramite un chiave=valore

  a href="/" target="_blank" Un link

  <a href="/" target="_blank">Un link</a>

Anche gli attributi di un teg possono essere valorizzati con ruby.

    h1 aria-label=page.title = page.title

Le righe che inziano con - (meno) sono righe ruby e vengono ginorate nell'output html. Le righe ruby devono rispettare l'indentazione.

    - my_classes = "my-5 pb-5 text-center"

    - page.title.present?
      h1 class=my_classes = page.title

Questo pu essere scritto anche

      h1 class=my_classes = page.title if page.title.present?

In caso negativo, il tag non viene scritto nell'output html.

È possibile racchiudere più righe ruby attraverso l'apertura di una area definita con : (ruby: javascript: style:). In uesti casi, il simbolo - non è più necessario

  ruby:
    my_classes = "my-5 pb-5 text-center"
    title ||= page.title

  h1 class=my_classes = title

Sono presenti inoltre regole di lint per Slim. Maggiori dettagli nella pagina Lint per Slim e SCSS