Atomic Design, cette méthodologie proposée par Brad Frost en 2013 a contribué à la façon de construire des interfaces ces dernières années. De nombreuses notions ont été ajoutées et l'auteur lui-même a publié un article pour parler des extensions d'Atomic Design.
Ainsi, les notions de design tokens et d'ions font maintenant partie du vocabulaire pouvant être utilisé par les designers et développeurs d'interfaces graphiques.
Même si ces dernières notions enrichissent la façon de constituer un Design System, j'ai pu remarquer un nouveau concept que je ne peux pas ranger ni dans la notion de token, ni dans la notion d'Atome.
Alors qu'elle apparaît dans l'article de Brad Frost sous le terme Quark, perdu au sein d'un titre, je n'ai trouvé à ce jour aucune information viable à son sujet malgré de nombreuses lectures d'articles.
Rappel de l'atome
Initialement, l'Atome fait écho à la physique des particules, appliqué aux interfaces web, les atomes peuvent être les input, les button…
Ils peuvent être associés à des couleurs, des polices et d'autres aspects, parfois moins visibles comme les animations.
Tout seul, ils ne sont pas forcément très utiles. Cependant, ils peuvent être référencés dans des outils comme des Pattern Libraries pour les voir en un coup d'œil.
J'ai volontairement choisi de retranscrire la définition originale pour qu'on puisse la comparer avec ce qu'est aujourd'hui un atome.
Pour donner un exemple, j'utilise aussi des atomes pour des éléments qui n'ont pas directement de tag HTML ou qui ont des structures plus nivelées qu'un seul tag. L'intérêt de l'atome, je pense, est d'avoir une brique assez petite et réutilisable avec ou sans association à un autre atome au sein d'une molécule, organisme, template …
Pour plus d'informations à ce sujet, je vous invite à consulter mon article sur Atomic Design dans la pratique.
Et le token dans tout ça ?
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
C'est ce que vous pouvez retrouver en introduction de Lightning Design System lorsqu'ils abordent les Design Tokens ainsi qu’au travail de Jina.
Pour faire simple, un token ça correspond à une forme d'attribut que Brad Frost définit comme ce qui a un impact visuel et qui peut être associé à un atome : Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations..
La notion s'est popularisée et se retrouve expliquée et incluse dans plusieurs outils populaires tels que InVision et Zeplin.
Et pour ceux qui veulent en profiter dans des langages de haut niveaux comme le SCSS, je vous invite à utiliser la notion de variables pour définir vos tokens :
// Colors
$color-main: #c42;
$color-secondary: #42f;
$color-text-dark: #222;
$color-text-light: #fff;
// Fonts
$font-size-main: 16px;
$font-size-title: 42px;
// Spacing
$spacing-small: 16px;
$spacing-medium: 32px;
$spacing-large: 64px;
Quark, un morceau d'atome
Dans ce monde très complexe qu'est la physique des particules, il existe des particules élémentaires qui constituent la matière observable, parmi elles, on retrouve le quark. Une des propriétés du quark est de ne pas pouvoir être isolé (pour ceux qui veulent poursuivre ce sujet vous pouvez suivre ces explications).
Dans le monde des interfaces graphiques, Atomic Design nous propose déjà Atomes, Molécules et Organismes. Cependant, comme on a pu le voir avec les tokens, ces notions ne sont pas forcément suffisantes pour décrire la complexité nécessaire à la fabrication d'un design cohérent.
C'est pourquoi je vous propose de reprendre la notion de Quark et de l'appliquer aux interfaces.
On aurait donc un élément qui ne peut pas exister seul, un Quark, mais qui serait tout de même une partie constituante de composants visibles.
En somme, un Quark c'est simplement un élément graphique qu'on peut réutiliser dans nos Atomes, Molécules et Organismes mais qui n'existe pas visuellement indépendamment.
C'est toujours un peu flou ? Dans ce cas prenons un exemple via du code.
Imaginons un atome paragraph. Il a diverses propriétés comme la taille de sa police, sa ou ses couleurs, sa graisse… :
// /atom/_paragraph.scss
.paragraph {
color: $color-text-dark;
font-family: sans-serif;
font-size: $font-size-main;
&.-color-main {
color: $color-main;
}
&.-color-secondary {
color: $color-secondary;
}
}
Imaginons maintenant un atome title qui a d'autres propriétés mais qui hérite lui aussi des mêmes couleurs que celles du paragraphe :
// /atom/_title.scss
.title {
color: $color-text-dark;
font-family: serif;
font-size: $font-size-title;
&.-color-main {
color: $color-main;
}
&.-color-secondary {
color: $color-secondary;
}
}
On peut remarquer qu'il est tout à fait possible d'extraire les couleurs mais qu'il n'est pas forcément pertinent de l'extraire dans un atome puisqu'il n'a pas pour vocation à être utilisé indépendamment, on aurait ainsi le quark font-colors représenté par :
// /quarks/_font.scss
@mixin quark-font-colors {
&.-color-main {
color: $color-main;
}
&.-color-secondary {
color: $color-secondary;
}
}
Et ainsi pour l'utiliser dans nos deux atomes :
// /atom/_paragraph.scss
.paragraph {
@include quark-font-colors;
color: $color-text-dark;
font-family: sans-serif;
font-size: $font-size-main;
}
// /atom/_title.scss
.title {
@include quark-font-colors;
color: $color-text-dark;
font-family: serif;
font-size: $font-size-title;
}
Encore une chose…
J'utilise la notion de Quarks en profitant de mixin proposé par SCSS depuis des années mais je souhaitais partager ce sujet avec plus de recul et sur un aspect plus méthodologique que technique.
Il existe sans doute de nombreuses autres notions permettant d'organiser un style, j'espère que celle-ci vous sera utile.
Si vous souhaitez comprendre pourquoi j'ai utilisé cette façon d'écrire mes classes, je vous propose de lire mon article sur Définir son style CSS avec CAP. Et pour fabriquer votre Pattern Library ou jouer avec les Quarks, n’hésitez pas à utiliser l’outil Tikui. Vous pouvez aussi me retrouver avec Matthieu lors des lives sur Atomic Design - Créez vos propres composants graphiques (partie 1 et partie 2).
