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 de 100% sur mobile et de 50% sur ordinateur
• Une height de 100px
• Un padding de 16px
• Une margin-left et une margin-right de 50%

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é !

👉 La documentation de Smooth UI