Marges et espacement

Les marges (code « margin ») et l’espacement (code « padding ») permettent d’aérer le contenu et d’en faciliter la compréhension.

Pratiques exemplaires

• Utiliser les marges et l’espacement au lieu d’ajouter des codes <br/>.
• Éviter d’ajouter des marges ou de l’espacement avant et après les titres afin de respecter les normes de mise en page.
• Utiliser les marges et l’espacement avec parcimonie.

Largeurs

Les cinq largeurs possibles offrent de la souplesse tout en respectant les normes de mise en page. Dans les exemples ci-dessous, le gris pâle correspond à l’élément HTML, et le gris foncé, à l’espacement appliqué uniformément autour de l’élément. Les variables des largeurs sont « xsmall », « small », « medium », « large » et « xlarge », soit, respectivement, « très petite », « petite », « moyenne », « grande » et « très grande ».

> Classes utilitaires

Les classes utilitaires servent à ajouter des marges ou de l’espacement. Les marges créent des blancs. L’espacement ajoute de l’espace autour du contenu de l’élément.

Exemple : petite marge (variable « small ») uniforme pour un paragraphe avec la classe « margin »

  <p class="bocss-margin-small">Paragraphe avec une petite marge.</p>
  

Espacement uniforme

Utilisez les classes suivantes pour ajouter un espace uniforme autour d’un élément HTML.

Espacement d’un seul côté

Il est possible d’ajouter une ou plusieurs variables s’appliquant à un seul côté pour créer un espacement irrégulier.

Exemple : petit espacement (variable « small ») en haut (variable « top ») et à gauche (variable « left »)

<div class="bocss-padding-left-small bocss-padding-top-small">Exemple</div>

Développeurs

Codes mixin

Vous avez à votre disposition dans le cadre de programmation un ensemble de codes mixin SCSS qui permettent de rendre conviviale l’application de l’espacement. Ces codes peuvent être utilisés comme variable de largeur ou comme chaîne (p. ex., variables « small », « medium »). Il y aura une erreur de compilation du code SCSS si la variable ou la largeur n’existe pas dans le cadre de programmation.

@include bocss-padding($size)
@include bocss-padding-one-side($dimension, $size)
@include bocss-padding-horizontal($size)
@include bocss-padding-vertical($size)

@include bocss-margin($size)
@include bocss-margin-one-side($dimension, $size)
@include bocss-margin-horizontal($size)
@include bocss-margin-vertical($size)

Nota : La variable « $dimension » d’un code mixin pour un espacement d’un seul côté peut être « top », « left », « bottom » ou « right » (haut, gauche, bas ou droite).

Exemple : code mixin pour un petit espacement (variable « small » à gauche (variable « left ») d’un élément dans une classe « example-element »

.example-element{
	@include bocss-padding-one-side('left', 'small');
}

Variables

Utilisez les variables de largeur d’espacement directement pour remplacer les unités dans le code SCSS. Cette façon de faire assure que les valeurs restent à jour.

$bocss-spacing-xsmall
$bocss-spacing-small
$bocss-spacing-medium
$bocss-spacing-large
$bocss-spacing-xlarge

Exemple : variable d’espacement pour appliquer une marge moyenne (variable « medium ») uniforme à un élément dans une classe « example-element »

.example-element{
	margin: $bocss-spacing-medium;
}