Footer
Documentazione per l'inserimento del foooter nel tema Unito
Footer Standard
A questa variante del footer viene associata la classe .standard assieme a .it-footer
Opzionalmente è possibile utilizzare la classe .sticky assieme alle precedenti, se presente questa ha impatto sul posizionamento del footer.
<footer class="it-footer standard">
<div class="it-footer-small-prints clearfix">
<div class="container">
<h3 class="sr-only">Sezione Link Utili</h3>
<div class="col-6 col-md-3 float-start">
<ul class="it-footer-small-prints-list list-inline mb-0 ">
<li class="list-inline-item list-inline-title">Titolo</li>
<li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
<li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
<li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
</ul></div>
<div class="col-6 col-md-3 float-start">
<ul class="it-footer-small-prints-list list-inline mb-0 ">
<li class="list-inline-item list-inline-title">Titolo</li>
<li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
<li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
<li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
</ul>
</div>
<div class="col-6 col-md-3 float-start">
<ul class="it-footer-small-prints-list list-inline mb-0 ">
<li class="list-inline-item list-inline-title">Titolo</li>
<li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
<li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
<li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
</ul>
</div>
<div class="col-6 col-md-3 float-start">
<div class="footer-plain-text">
<b>Università degli Studi di Torino</b><br>
Via Verdi, 8 - 10124 Torino<br>
<svg role="img" aria-describedby="my-title" class="icon icon-xs"><title id="my-title">Telefono</title><use xlink:href="./dist/svg/sprite.svg#it-telephone"></use></svg> +39 011 6706111<br>
<svg role="img" aria-describedby="my-title1" class="icon icon-xs"><title id="my-title1">Email</title><use xlink:href="./dist/svg/sprite.svg#it-mail"></use></svg> lorem@ipsum.com<br>
P.I. 02099550010<br>
<div class="mt-2">
<a href="#"><svg role="img" aria-describedby="my-title2" class="icon icon-xs"><title id="my-title2">Facebook</title><use xlink:href="./dist/svg/sprite.svg#it-facebook"></use></svg></a>
<a href="#"><svg role="img" aria-describedby="my-title3" class="icon icon-xs"><title id="my-title3">LinkedIn</title><use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use></svg></a>
<a href="#"><svg role="img" aria-describedby="my-title4" class="icon icon-xs"><title id="my-title4">Twitter</title><use xlink:href="./dist/svg/sprite.svg#it-twitter"></use></svg></a>
</div>
</div>
</div>
</div>
</div>
</footer> Footer minimale
Per la variante minimale del footer, utilizzare la classe .minimal assieme a .it-footer
Opzionalmente è possibile utilizzare la classe .sticky assieme alle precedenti, se presente questa ha impatto sul posizionamento del footer.
Pagina di esempio con footer.minimal.sticky
<footer class="it-footer minimal sticky">
<div class="it-footer-small-prints clearfix">
<div class="container">
<h3 class="sr-only">Sezione Footer</h3>
<div class="col-12 text-center">
<p>
Università degli Studi di Torino - Via Verdi, 8 - 10124 Torino<br>
<span class="fs-sclale08">P.I. 02099550010 - C.F. 80088230018 - IBAN: IT07N0306909217100000046985</span>
</p>
</div>
</div>
</div>
</footer> Posizionamento del footer
Se viene assegnata al footer la classe .sticky assieme a .it-footer e una fra le classi .standard e .minimal il footer viene posizionato in modo fisso a piede, anche in caso di scarso contenuto all'interno della pagina.
Questo viene gestito dal css del tema come segue:
- Al footer in versione minimal o standard viene assegnata una altezza fissa, espressa proporzionalmente all'altezza pagina in vh.
Si noti che il footer minimal ha in ogni caso - quindi anche in assenza della classe.sticky- un'altezza fissa in quanto il contenuto del footer è definito a priori e di conseguenza la sua dimensione verticale. - Al container con classe
.ContentContainerdescritto in questa pagina viene assegnata un'altezza minima tale che la somma di questa e dell'altezza del footer sia equivalente a 100vh; i due elementi vanno così a riempire l'intero spazio disponibile verticale.
L'altezza del container è definita da due classi,.StickyFooterMinimale.StickyFooterStandardinnestate dal tema via javascript se e solo se è associata al footer la classe.stickyrisultando nei seguenti dimensionamenti rispetto ai breakpoint:
| Selettore / elemento |
< Small <576px |
Medium ≥768px |
≥ Large ≥992px |
|---|---|---|---|
| footer.minimal | 9vh | 7vh | 12vh |
| .ContentContainer.StickyFooterMinimal | 91vh | 93vh | 88vh |
| footer.standard.sticky | 36vh | 24vh | 30vh |
| .ContentContainer.StickyFooterStandard | 64vh | 76vh | 70vh |
Nota sul footer standard sticky
L'implementazione css del footer standard sticky è a titolo esemplificativo: la sua implementazione puntuale andrà rivista alla luce della definizione dei contenuti effettivamente presenti nel footer e la loro implementazione della responsività. Questo rende possibile definire l'altezza del footer ai diversi breakpoint e adattare di conseguenza il codice css.
Lo sviluppatore dovrà quindi sovrascrivere le altezze css degli elementi footer.standard.sticky e .ContentContainer.StickyFooterStandard per i diversi breakpoint come opportuno.