Pied de page simple

Ce pied de page est conçu pour la plupart des applications et des sites secondaires. Il comporte des liens qui concernent l’accessibilité, la confidentialité des renseignements et les droits d’auteur.

  • Contenu:
    @import '../../../../theme/assets/styles/sass/variables-import';
    @import '../../../../theme/assets/styles/sass/utilities/text-utilities';
    
    /************************************************************
        The following styles up until the next comment for
        simple footer specific styles are shared with the
        expanded footer.
    
        Any style updates or additions will need to be
        replicated in the expanded-footer.scss file as well.
    ************************************************************/
    .ontario-footer {
    	color: $ontario-colour-white;
        margin-top: $spacing-10;
    	padding: $spacing-9 $spacing-0;
    }
    
    .ontario-footer {
    	.ontario-columns *:last-child {
    		margin-bottom: $spacing-0;
    	}
    
    	@media screen and (max-width: $small-breakpoint) {
    		&:not(.ontario-footer--default) .ontario-columns:first-child {
    			margin-bottom: $spacing-8;
    		}
    
    		.ontario-footer__expanded-bottom-section .ontario-columns:first-child {
    			margin-bottom: $spacing-0;
    		}
    	}
    }
    
    .ontario-footer__links-container {
    	list-style: none;
    	margin: $spacing-0 $spacing-0 $spacing-4 $spacing-0;
    
    	@media screen and (min-width: $medium-breakpoint) {
    		margin-bottom: $spacing-2;
    	}
    }
    
    .ontario-footer__links-container--inline {
    	display: flex;
    	flex-direction: column;
    	flex-wrap: wrap;
    
    	@media screen and (min-width: $small-breakpoint) {
    		flex-direction: row;
    	}
    }
    
    .ontario-footer__links-container li {
    	padding: $spacing-1 0;
    }
    
    .ontario-footer__link {
    	color: $ontario-colour-white;
    	display: inline-block;
    	padding: $spacing-2 $spacing-0;
    	margin: $spacing-0;
    	text-decoration: underline;
    
    	&:hover,
    	&:focus {
    		text-decoration: none;
    	}
    
    	&:visited,
    	&:active,
    	&:hover {
    		color: $ontario-colour-white;
    	}
    
    	@media screen and (min-width: $small-breakpoint) {
    		padding: 0;
    		margin: $spacing-0 $spacing-8 $spacing-4 $spacing-0;
    	}
    }
    
    /*************************************
        Simple footer specific styles
    *************************************/
    /* Supergraphic background */
    .ontario-footer--default {
    	position: relative;
    	background-color: $ontario-colour-black;
    	border-bottom: 4px solid $ontario-greyscale-70;
    
    	&:before {
    		background-image: url('#{$logo-dir}/footer-default-supergraphic-logo.svg');
    		background-size: 112.5rem;
    		background-position: calc(50vw - 73.5rem) -64rem;
    		background-color: darken($ontario-colour-white, 80);
    		background-repeat: no-repeat;
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: $full-width;
    		height: 100%;
    
    		@media screen and (min-width: $small-breakpoint) {
    			background-size: 180rem;
    			background-position: calc(50vw - 120rem) -106rem;
    		}
    
    		@media screen and (min-width: $medium-breakpoint) {
    			background-size: 275rem;
    			background-position: calc(50vw - 187rem) -160rem;
    		}
    	}
    }
    
  • URL: /components/raw/simple-footer/simple-footer.scss
  • Chemin du système de fichiers: fractal/components/components/footers/simple-footer/simple-footer.scss
  • Taille: 2.7 KB
  • Contenu:
    .ontario-nbsp{white-space:nowrap}.ontario-footer{color:#fff;margin-top:5rem;padding:4rem 0}.ontario-footer .ontario-columns *:last-child{margin-bottom:0}@media screen and (max-width: 40em){.ontario-footer:not(.ontario-footer--default) .ontario-columns:first-child{margin-bottom:3rem}.ontario-footer .ontario-footer__expanded-bottom-section .ontario-columns:first-child{margin-bottom:0}}.ontario-footer__links-container{list-style:none;margin:0 0 1rem 0}@media screen and (min-width: 73em){.ontario-footer__links-container{margin-bottom:.5rem}}.ontario-footer__links-container--inline{display:flex;flex-direction:column;flex-wrap:wrap}@media screen and (min-width: 40em){.ontario-footer__links-container--inline{flex-direction:row}}.ontario-footer__links-container li{padding:.25rem 0}.ontario-footer__link{color:#fff;display:inline-block;padding:.5rem 0;margin:0;text-decoration:underline}.ontario-footer__link:hover,.ontario-footer__link:focus{text-decoration:none}.ontario-footer__link:visited,.ontario-footer__link:active,.ontario-footer__link:hover{color:#fff}@media screen and (min-width: 40em){.ontario-footer__link{padding:0;margin:0 3rem 1rem 0}}.ontario-footer--default{position:relative;background-color:#1a1a1a;border-bottom:4px solid #4d4d4d}.ontario-footer--default:before{background-image:url("../logos/footer-default-supergraphic-logo.svg");background-size:112.5rem;background-position:calc(50vw - 73.5rem) -64rem;background-color:#333;background-repeat:no-repeat;content:"";position:absolute;top:0;left:0;width:100%;height:100%}@media screen and (min-width: 40em){.ontario-footer--default:before{background-size:180rem;background-position:calc(50vw - 120rem) -106rem}}@media screen and (min-width: 73em){.ontario-footer--default:before{background-size:275rem;background-position:calc(50vw - 187rem) -160rem}}
  • URL: /components/raw/simple-footer/simple-footer.css
  • Chemin du système de fichiers: fractal/components/components/footers/simple-footer/simple-footer.css
  • Taille: 1.8 KB

Principe directeur: Être cohérent.

Quand utiliser cette composante

Les applications et les sites secondaires de l’Ontario doivent tous comprendre au moins un pied de page simple au bas de chaque page.

Le pied de page simple est la norme dans l’ensemble des services numériques ontariens. Il associe l’image de marque de l’Ontario à votre produit, tout en fournissant des liens obligatoires vers des pages contenant des renseignements essentiels sur le gouvernement ontarien.

Pied de page développé

Utilisez le pied de page développé si vous avez besoin d’indiquer des liens supplémentaires vers des sites spécifiques ou des réseaux sociaux approuvés.


Caractéristiques

Le pied de page simple comporte :


Pratiques exemplaires

À faire

  • Mettre à jour le lien « Contactez-nous » pour le diriger vers la personne-ressource de votre propre service (p. ex., un formulaire ou une adresse de courriel).
  • S’assurer que le pied de page est ancré au bas de l’écran.

À ne pas faire

  • Ajouter des liens supplémentaires au pied de page – s’il faut donner plus d’information, utiliser le pied de page développé.

Note technique

Le pied de page est le dernier élément de la page; d’où l’importance de le placer tout au bas du contenu.

Si le contenu est plus court que la taille de la clôture, placer le pied de page tout au bas de la clôture.

Lorsque le contenu est plus court que la taille de la clôture, il arrive que le pied de page remonte et reste coincé au bas du contenu principal, au lieu de demeurer ancré dans la partie inférieure de la clôture. Quelques manipulations avec CSS pourraient prévenir ce genre de problème.

À faire :


Illustration d’une page web où le pied de page est ancré au bas de la clôture.

À ne pas faire :


Illustration d’une page web où le pied de page flotte au-dessus de la clôture.

Option 1

Pour commencer, voici un exemple de document index.html :

<div class="“ontario-container”">
  <div class="“ontario-content-wrapper”">
    <h1>Lorem Ipsum</h1>
    <p>
      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <footer class="ontario-footer">
      <p>Hey this is a footer</p>
  </footer>
</div>

Dans votre CSS, ajoutez ensuite les styles suivants pour vos différentes composantes :

.ontario-container {
  position: relative;
  min-height: 100vh;
}

.ontario-content-wrapper {
  padding-bottom: 2.5rem; /* Footer height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem; /* Footer height */
}

Visitez le site freeCodeCamp (en anglais) pour savoir si cette option vous convient.


Option 2

Si vous utilisez un module Flexbox, vous devrez peut-être appliquer le code [margin-top: auto] à la composante pied de page.

Cela permet d’agrandir automatiquement la marge du pied de page de manière à ce qu’il occupe l’espace restant du conteneur parent, à condition qu’il soit affiché au moyen de Flexbox.

Consultez le site CSS-Tricks (en anglais) pour savoir si cette option vous convient.

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.