Unit & Sizing

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 retenues.

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)	Size (rem)	Padding	Margin	Radius	Ico	Autres
`$unit`	16px	1					`$spacer`
`$unit-1`	4px	0.25rem		`$mar-s`	`$rad-s`	`$ico-to-txt`
`$unit-2`	8px	0.5rem	`$pad-s`		`$rad`	`$ico-s`
`$unit-3`	16px	1rem	`$pad`	`$mar`	`$rad-l`	`$ico`
`$unit-4`	24px	1.5rem	`$pad-l`			`$ico-l`	`$gutter`
`$unit-5`	48px	3rem		`$mar-l`

Scss custom

// UNIT
// ------------------------------
$unit:                     1rem !default;
$unit-1:                   0.25 * $unit;
$unit-2:                   0.5 * $unit;
$unit-3:                   $unit;
$unit-4:                   1.5 * $unit;
$unit-5:                   3 * $unit;

$pad-s:                    $unit-2;
$pad:                      $unit-3;
$pad-l:                    $unit-4; 

$mar-s:                    $unit-1;
$mar:                      $unit-3;
$mar-l:                    $unit-5; 

$rad-s:                    $unit-1; 
$rad:                      $unit-2;
$rad-l:                    $unit-3;

$ico-s:                    $unit-2;
$ico:                      $unit-3;
$ico-l:                    $unit-4;
$ico-to-text:              $unit-1;

$gutter:                   1.5rem; // $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.