Unit

On ne compte plus les projets où c'est la foire au paddings, aux margins, aux radius, aux incohérences de tailles et l'on découvre des soucis de charte, d'alignements, etc...
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 oeuvre de tout nouvel élément.
La neutralisation des variables via des tailles de t-shirt permet de cataloguer les tailles disponibles (de xxx-s à xxx-l).

Une fois le catalogue établit, il est possible de pré-définir d'autres variables pour des usages récurrents définis dans la charte (par exemple il peut y avoir un padding de base utilisé partout et une variation plus petite / grande qu'il sera facile d'appeler dans les fichiers scss).

Variable Size (px) Padding Margin Radius Pictos Autre
D M D M
$unit-xxxs 2px
$unit-xxs 4px $pad-s $rad-s
$unit-xs 8px $pad-s $pad $mar-s $rad $ico-to-text
$unit-s 12px $ico-s
$unit-m 16px $pad $pad-l $mar-s $mar $rad-l $ico
$unit-l 24px $ico-l $gutter
$unit-xl 32px $pad-l $mar $mar-l
$unit-xxl 48px $pins
$unit-xxxl 64px $mar-l
Scss custom
// UNIT / SCALE
// ------------------------------
$unit-px-xxxs:             2;
$unit-px-xxs:              4;
$unit-px-xs:               8;
$unit-px-s:                12;
$unit-px-m:                16;
$unit-px-l:                24;
$unit-px-xl:               32;
$unit-px-xxl:              48;
$unit-px-xxxl:             72;

$unit-xxxs:                #{$unit-px-xxxs/$rem-base}rem;
$unit-xxs:                 #{$unit-px-xxs/$rem-base}rem;
$unit-xs:                  #{$unit-px-xs/$rem-base}rem;
$unit-s:                   #{$unit-px-s/$rem-base}rem;
$unit-m:                   #{$unit-px-m/$rem-base}rem;
$unit-l:                   #{$unit-px-l/$rem-base}rem;
$unit-xl:                  #{$unit-px-xl/$rem-base}rem;
$unit-xxl:                 #{$unit-px-xxl/$rem-base}rem;
$unit-xxxl:                #{$unit-px-xxxl/$rem-base}rem;

$pad-s:                    $unit-xxs;
$pad:                      $unit-m;
$pad-l:                    $unit-xxxl; 

$mar-s:                    $unit-xxs;
$mar:                      $unit-m;
$mar-l:                    $unit-xxxl; 

$rad-s:                    $unit-xxs; 
$rad:                      $unit-xs;
$rad-l:                    $unit-s;

$gutter:                   24px; // $grid-gutter-width;

En plus des utilities propres à bootstrap (cf. page dédiée), nous allons ici mettre à disposition des classes prédéfinies pour gérer les paddings / margins / radius depuis la stratégie définie ci-dessus.

Utilities custom padding
// UTILITIES PADDING
// ------------------------------
@mixin pad-s() { padding:$pad-s; }
.pad-s { @include pad-s(); }
@mixin pad() { padding:$pad; }
.pad { @include pad(); }
@mixin pad-l() { padding:$pad-l; }
.pad-l { @include pad-l(); }

@mixin pad-x-s() { padding:0 $pad-s; }
.pad-x-xs { @include pad-x-s(); }
@mixin pad-x() { padding:0 $pad; }
.pad-x { @include pad-x(); }
@mixin pad-x-l() { padding:0 $pad-l; }
.pad-x-xl { @include pad-x-l(); }

@mixin pad-y-s() { padding:$pad-s 0; }
.pad-y-xs { @include pad-y-s(); }
@mixin pad-y() { padding:$pad 0; }
.pad-y { @include pad-y(); }
@mixin pad-y-l() { padding:$pad-l 0; }
.pad-y-xl { @include pad-y-l(); }

.pad-s, .pad, .pad-l
.pad-x-s, .pad-x, .pad-x-l
.pad-y-s, .pad-y, .pad-y-l

Utilities custom margin
// UTILITIES MARGIN
// ------------------------------
@mixin mar-s() { margin:$mar-s; }
.mar-xs { @include mar-s(); }
@mixin mar() { margin:$mar; }
.mar { @include mar(); }
@mixin mar-l() { margin:$mar-l; }
.mar-xl { @include mar-l(); }

@mixin mar-x-s() { margin:0 $mar-s; }
.mar-x-xs { @include mar-x-s(); }
@mixin mar-x() { margin:0 $pad; }
.mar-x { @include mar-x(); }
@mixin mar-x-l() { margin:0 $mar-l; }
.mar-x-xl { @include mar-x-l(); }

@mixin mar-y-s() { margin:$mar-s 0; }
.mar-y-xs { @include mar-y-s(); }
@mixin mar-y() { margin:$pad 0; }
.mar-y { @include mar-y(); }
@mixin mar-y-l() { margin:$mar-l 0; }
.mar-y-xl { @include mar-y-l(); }

.mar-s, .mar, .mar-l
.mar-x-s, .mar-x, .mar-x-l
.mar-y-s, .mar-y, .mar-y-l

Utilities custom radius
// UTILITIES RADIUS
// ------------------------------
@mixin rad-s() { border-radius:$rad-s; }
.rad-s { @include rad-s(); }
@mixin rad() { border-radius:$rad; }
.rad { @include rad(); }
@mixin rad-l() { border-radius:$rad-l; }
.rad-l { @include rad-l(); }

.rad-s, .rad, .rad-l

A noter que les déclarations doivent être injectées au format rem et non au format px.