Footer
Documentazione per l'inserimento del foooter nel tema Unito
Nell'esempio classe .standard rappresenta un placeholder per eventuali interventi manuali sul css di default indirizzati a controllare il layout, per posizionare questo tipo di footer in posizione fissa a piede pagina
<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-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 float-left">
<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-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 float-left">
<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-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 float-left">
<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-xs-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 float-left">
<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-sm"><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-sm"><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-sm"><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-sm"><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-sm"><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
Nella variante minimale del footer, aggiungere la classe .minimal assieme a .it-footer
<footer class="it-footer minimal">
<div class="it-footer-small-prints clearfix">
<div class="container">
<h3 class="sr-only">Sezione Link Utili</h3>
<div class="col-12 text-center">
<p>Palazzo degli Stemmi - Via Po 31 - 10124 Torino<br>
<svg role="img" aria-describedby="my-title5" class="icon icon-sm">
<title id="my-title5">Email</title>
<use xlink:href="./dist/svg/sprite.svg#it-mail"></use></svg> <a href="mailto:formazione@unito.it">formazione@unito.it</a><br>
Università degli Studi di Torino - Via Verdi, 8 - 10124 Torino<br>
P.I. 02099550010 - C.F. 80088230018 - IBAN: IT07N0306909217100000046985</p>
</div>
</div>
</div>
</footer> Footer fisso a piede
Il footer minimale ha un'altezza predefinita ed il suo foglio di stile è progettato in modo tale che il footer si vada a posizionare a piede della pagina, anche quando la pagina presenta una scarsa quantità di contenuti. Esempio
Questo non è possibile per il footer standard, che per la sua natura si presta ad ospitare un numero di elementi arbitrario e di conseguenza può variare in altezza.
Definiti gli elementi del footer standard - ed essendo quindi possibile impostarne un'altezza fissa - è possibile intervenire manualmente sul css per ottenere un risultato analogo a quello del footer minimale intervenendo su due classi css come segue:
Alla classe footer.standard andrà associata un'altezza sufficiente ad ospitarne il contenuto, ad esempio;
footer.standard {
height: 25vh;
}
Alla classe .ContentContainer
- al cui interno solo collocati i contenuti contenuti nei tag header e main - andrà associata un altezza tale per cui l'elemento vada a occupare la parte verticale rimanente della pagina, ad esempio:
.ContentContainer {
height: 75vh;
}
Si tenga presente che l'operazione va eseguita per i diversi breakpoint previsti da bootstrap
.