On ne compte plus les projets où c'est la foire aux tailles (padding, margin, radius, gap) accompagnéEs d'incohérences avec la charte...
Il faut établir et disposer d'une grille de possibilités de tailles afin de garantir la cohérence graphique et la simplicité de mise en œuvre de tout nouvel élément.
Bootstrap propose une panoplie de spacers qui sont utilisés dans de nombreux composants et classes utilitaires. Rendez-vous dans la rubrique Utilities / Spacing pour voir leur mise en œuvre sur les padding et margin.
$spacer: rem(16) !default; // on définit ici la taille de base = 16px
$spacers: () !default;
$spacers: map-merge(
(
0: 0, // = 0
1: ($spacer * .25), // = 4px
2: ($spacer * .5), // = 8px
3: $spacer, // = 16px
4: ($spacer * 1.5), // = 24px
5: ($spacer * 3) // = 48px
),
$spacers
);
À des mêmes valeurs que ce tableau (mais nommées $unit), nous allons créer des variables et mixins d'usage que nous pourrons diffuser facilement en fonction de la charte.
Pour les padding / margin / radius / gap / icônes, nous définissons 3 tailles de t-shirt (sm et lg en plus de la valeur par défaut).
Par exemple pour les paddings : $pad, $pad-sm et $pad-lg.
Chaque projet pourra être ajusté sur ces valeurs prédéfinies, n'empêchant aucunement la customisation spécifique.
| Variable | Size (px) | Size (rem) | pad-* / mar-* / rad-* |
pad | mar | rad | gap | Ico | Autres |
|---|---|---|---|---|---|---|---|---|---|
$unit |
16px | rem(16) | = $spacer |
||||||
$unit-1 |
4px | 0.25rem | *-1 |
$ico-to-txt |
|||||
$unit-2 |
8px | 0.5rem | *-2 |
$pad-sm |
$rad-sm |
$gap-sm |
|||
$unit-3 |
16px | 1rem | *-3 |
$pad |
$mar-sm |
$rad |
$gap |
$ico-sm |
$gutter |
$unit-4 |
24px | 1.5rem | *-4 |
$pad-lg |
$mar |
$rad-lg |
$gap-lg |
$ico |
|
$unit-5 |
48px | 3rem | *-5 |
$mar-lg |
$ico-lg |
// UNIT // ------------------------------ $unit: 1.6rem; // = 16 sur base 10 $unit-1: 0.25 * $unit; $unit-2: 0.5 * $unit; $unit-3: $unit; $unit-4: 1.5 * $unit; $unit-5: 3 * $unit; // CUSTOMISATION $pad-sm: $unit-2; $pad: $unit-3; $pad-lg: $unit-4; $mar-sm: $unit-3; $mar: $unit-4; $mar-lg: $unit-5; $rad-sm: $unit-2; $rad: $unit-3; $rad-lg: $unit-4; $ico-to-text: $unit-1; $ico-sm: $unit-3; $ico: $unit-4; $ico-lg: $unit-5; $gutter: 1.6rem; // $grid-gutter-width; $gap-sm: $unit-2; $gap: $unit-3; // = $gutter $gap-sm: $unit-4;
Les variables $pad, $mar, $rad, $gap et $ico serviront de base pour les blocs par défaut et c'est ici que l'on déterminera leurs valeurs.
// UTILITIES PADDING
// ------------------------------
@mixin pad-1() { padding:$unit-1; }
@mixin pad-2() { padding:$unit-2; }
@mixin pad-3() { padding:$unit-3; }
@mixin pad-4() { padding:$unit-4; }
@mixin pad-5() { padding:$unit-5; }
.pad-1 { @include pad-1(); }
.pad-2 { @include pad-2(); }
.pad-3 { @include pad-3(); }
.pad-4 { @include pad-4(); }
.pad-5 { @include pad-5(); }
@mixin pad-x-1() { padding-left:$unit-1; padding-right:$unit-1; }
@mixin pad-x-2() { padding-left:$unit-2; padding-right:$unit-2; }
@mixin pad-x-3() { padding-left:$unit-3; padding-right:$unit-3; }
@mixin pad-x-4() { padding-left:$unit-4; padding-left:$unit-4; }
@mixin pad-x-5() { padding-left:$unit-5; padding-left:$unit-5; }
.pad-x-1 { @include pad-x-1(); }
.pad-x-2 { @include pad-x-2(); }
.pad-x-3 { @include pad-x-3(); }
.pad-x-4 { @include pad-x-4(); }
.pad-x-5 { @include pad-x-5(); }
@mixin pad-y-1() { padding-top:$unit-1; padding-bottom:$unit-1; }
@mixin pad-y-2() { padding-top:$unit-2; padding-bottom:$unit-2; }
@mixin pad-y-3() { padding-top:$unit-3; padding-bottom:$unit-3; }
@mixin pad-y-4() { padding-top:$unit-4; padding-bottom:$unit-4; }
@mixin pad-y-5() { padding-top:$unit-5; padding-bottom:$unit-5; }
.pad-y-1 { @include pad-y-1(); }
.pad-y-2 { @include pad-y-2(); }
.pad-y-3 { @include pad-y-3(); }
.pad-y-4 { @include pad-y-4(); }
.pad-y-5 { @include pad-y-5(); }
// CUSTOM PADDING
// ------------------------------
@mixin pad-sm() { padding:$pad-sm; }
@mixin pad() { padding:$pad; }
@mixin pad-lg() { padding:$pad-lg; }
.pad-sm { @include pad-sm(); }
.pad { @include pad(); }
.pad-lg { @include pad-lg(); }
En plus de .pad-1 à .pad-5 (+ variation x et y) :
.pad-sm / .pad / .pad-lg
.pad-x-sm / .pad-x / .pad-x-lg
.pad-y-sm / .pad-y / .pad-y-lg
// UTILITIES MARGIN
// ------------------------------
@mixin mar-1() { margin:$unit-1; }
@mixin mar-2() { margin:$unit-2; }
@mixin mar-3() { margin:$unit-3; }
@mixin mar-4() { margin:$unit-4; }
@mixin mar-5() { margin:$unit-5; }
.mar-1 { @include mar-1(); }
.mar-2 { @include mar-2(); }
.mar-3 { @include mar-3(); }
.mar-4 { @include mar-4(); }
.mar-5 { @include mar-5(); }
@mixin mar-x-1() { margin-left:$unit-1; margin-right:$unit-1; }
@mixin mar-x-2() { margin-left:$unit-2; margin-right:$unit-2; }
@mixin mar-x-3() { margin-left:$unit-3; margin-right:$unit-3; }
@mixin mar-x-4() { margin-left:$unit-4; margin-left:$unit-4; }
@mixin mar-x-5() { margin-left:$unit-5; margin-left:$unit-5; }
.mar-x-1 { @include mar-x-1(); }
.mar-x-2 { @include mar-x-2(); }
.mar-x-3 { @include mar-x-3(); }
.mar-x-4 { @include mar-x-4(); }
.mar-x-5 { @include mar-x-5(); }
@mixin mar-y-1() { margin-top:$unit-1; margin-bottom:$unit-1; }
@mixin mar-y-2() { margin-top:$unit-2; margin-bottom:$unit-2; }
@mixin mar-y-3() { margin-top:$unit-3; margin-bottom:$unit-3; }
@mixin mar-y-4() { margin-top:$unit-4; margin-bottom:$unit-4; }
@mixin mar-y-5() { margin-top:$unit-5; margin-bottom:$unit-5; }
.mar-y-1 { @include mar-y-1(); }
.mar-y-2 { @include mar-y-2(); }
.mar-y-3 { @include mar-y-3(); }
.mar-y-4 { @include mar-y-4(); }
.mar-y-5 { @include mar-y-5(); }
// CUSTOM MARGIN
// ------------------------------
@mixin mar-sm() { padding:$mar-sm; }
@mixin mar() { padding:$mar; }
@mixin mar-lg() { padding:$mar-lg; }
.mar-sm { @include mar-sm(); }
.mar { @include mar(); }
.mar-lg { @include mar-lg(); }
En plus de .mar-1 à .mar-5 (+ variation x et y) :
.mar-sm / .mar / .mar-lg
.mar-x-sm / .mar-x / .mar-x-lg
.mar-y-sm / .mar-y / .mar-y-lg
// UTILITIES RADIUS
// ------------------------------
@mixin rad-1() { border-radius:$unit-1; }
@mixin rad-2() { border-radius:$unit-2; }
@mixin rad-3() { border-radius:$unit-3; }
@mixin rad-4() { border-radius:$unit-4; }
@mixin rad-5() { border-radius:$unit-5; }
.rad-1 { @include rad-1(); }
.rad-2 { @include rad-2(); }
.rad-3 { @include rad-3(); }
.rad-4 { @include rad-4(); }
.rad-5 { @include rad-5(); }
// CUSTOM RADIUS & GAP
// ------------------------------
@mixin rad-sm() { border-radius:$rad-sm; }
@mixin rad() { border-radius:$rad; }
@mixin rad-lg() { border-radius:$rad-lg; }
.rad-sm { @include rad-sm(); }
.rad { @include rad(); }
.rad-lg { @include rad-lg(); }
@mixin gap-sm() { gap:$gap-sm; }
@mixin gap() { gap:$gap; }
@mixin gap-lg() { gap:$gap-lg; }
.gap-sm { @include gap-sm(); }
.gap { @include gap(); }
.gap-lg { @include gap-lg(); }
En plus de .rad-1 à .rad-5 :
.rad-sm / .rad / .rad-lg
.gap-sm / .gap / .gap-lg