Smooth UI System : une nouvelle façon de styler vos composants
Nous sommes heureux de partager avec vous la dernière innovation de la famille Smooth UI, un nouveau système permettant de créer des composants de manière simple et intuitive !
Smooth UI
Il y a un an, j’ai publié la première version de Smooth UI, un système de design générique pour nous aider à construire avec plus d’efficacité nos applications React chez Smooth Code. Aujourd’hui, celle-ci est largement adoptée par la communauté de développeurs et est utilisé sur l’ensemble de nos projets.
Cette librairie facile à prendre en main décuple votre productivité en se concentrant sur quatre ingrédients essentiels: une grille puissante, un layout responsive, des composants de base et - bien entendu - un styled system aux petits oignons.
Qu'est-ce que le System ?
Le System est la tête pensante de Smooth UI. Il permet de définir des règles de style globales et de les injecter directement au coeur des composants via les props. Aujourd’hui, nous définissons une nouvelle manière d'utiliser ce système. Il est possible de l'utiliser pour créer les « styled components ».
import styled from "styled-components";
import system from "@smooth-ui/system";
const MyBox = styled.div(
system({
backgroundColor: 'primary',
width: { sm: 1, md: 0.5 },
height: 100,
mx: 'auto',
p: 2,
}),
)
Que représente ce code ? Beaucoup de choses :
- Un
background
avec la couleur « primary » définie dans le thème - Une
width
de100%
sur mobile et de50%
sur ordinateur - Une
height
de100px
- Un
padding
de16px
- Une
margin-left
et unemargin-right
de50%
Ce simple exemple démontre le pouvoir du System. Et ce n’est qu’un bref aperçu… Car oui, les possibilités s’étendent jusqu’aux limites les plus extrêmes du CSS. Toutes les propriétés du language sont supportée s!
Le System peut aussi être utilisé directement via les props pour styliser vos composants de manière déclarative à partir d’un code JSX.
import { Box } from "@smooth-ui/core-sc";
<Box
backgroundColor="primary"
width={{ sm: 1, md: 0.5 }}
height={100}
mx="auto"
p={2}
/>
Dans l’exemple ci-dessus, la Box est une simple div
dopée par le Smooth UI System. Cela signifie que vous pouvez utiliser toutes les propriétés du System en tant que props !
Voici un Code Sandbox pour vous permettre de tester par vous-même.
Avantages du System
Pourquoi utiliser le System plutôt que d’écrire du bon vieux CSS ? Pourquoi se pencher sur un énième pseudo-language ?
Fluidifier l’expérience de développement
En tant que développeur, moins vous écrivez, plus vous êtes efficace. Le System réduit considérablement la quantité de code à produire. Ainsi, p
suffit au lieu d’un fastidieux padding
, m
remplace margin
, et un objet évitera une media-query inutilement complexe. A la fin de la journée, toutes ces fonctionnalités représentent un énorme gain de temps.
Consistence du design
Le System lit les valeurs de votre theme. Dès que vous avez besoin d’une couleur, vous pouvez ainsi utiliser « primary, « secondary », ou tout autre nom sympathique que vous aurez choisi. L’application entière est désormais configurée directement dans votre thème !
Cela est d’autant plus vrai pour les espaces. Vous pouvez à présent définir vos propres unités de mesure. Quand j'utilise la propriété p={1}
, le système utilise l’unité de padding sélectionnée dans le theme - 8px
- . Bien entendu, libre à vous de modifier ces valeurs à votre convenance. Désormais, nul besoin de s’inquiéter avec des pixels: pensez en termes d’unités. Pour condenser votre design, il suffira donc de changer un simple chiffre dans votre theme. Pratique non ?
C’est également une véritable révolution pour le responsive design. Les breakpoints sont ici configurés dans le thème, vous n'avez plus à vous en soucier.
Flexibilité
Etre capable de styliser un composant à partir d’une props est extrêmement pratique. La plupart du temps, il est probable que voudrez ajouter un peu de margin ici ou là. Pouvoir le faire d’un simple my={1}
est un véritable soulagement. C’est comme découvrir Prettier, cela vous donne un avantage incroyable.
Conclusion
Chez Smooth Code, nous utilisons le System chaque jour et c’est un authentique game-changer pour toute l’équipe. C’est pourquoi je souhaitais partager avec la communauté notre nouvelle façon de créer des composants toujours plus excitants. Et bien sûr, comme à notre habitude, tout est open source et documenté !