Comment régler les bordures dans mon app ?

Voici comment fonctionne la bordure dans une app GoodBarber, où elle se trouve et comment régler sa couleur et son épaisseur, jusqu'au filet sous un titre.

Une bordure est un trait qui suit le bord d'un élément. Elle marque où il commence et où il finit, et elle révèle sa forme, angles droits ou arrondis. Une cellule, un champ, un bouton, une pastille de date, un onglet de catégorie, la barre d'onglets en portent une. Trois réglages la décrivent :

• La couleur, transparente par défaut sur une cellule ou un widget, à choisir dans votre palette ou ailleurs.
• L'épaisseur, un nombre entier, en pixels. Elle vaut 1 par défaut.
• Les côtés, sur l'en-tête d'un widget : en haut, à droite, en bas et à gauche (top, right, bottom, left), chacun actif ou désactivé. Actifs tous les quatre, ils encadrent le titre. Celui du bas, seul, le souligne.

C'est tout, et c'est ce qui rend la bordure si simple à régler. Dans le Design System GoodBarber, c'est l'atome Border, avec ses clés color et size, et, pour un en-tête, une clé par côté.

Dans une app GoodBarber, vous n'ajoutez pas une bordure, vous la révélez. Les cellules, les widgets de la Home et leurs en-têtes en portent une, à 1 px, transparente. Donnez-lui une couleur et elle apparaît. Les champs et les boutons en ont une aussi, et la leur se voit déjà, en gris clair sur un champ, dans la couleur du texte sur un bouton contour. C'est notre principe « Design by system », chaque élément est construit avec sa bordure, prête à servir.

Sur un widget de la Home, la couleur se choisit dans le panneau de design, par le chemin Mon app › Structure › Home › votre widget › Modifier. Vous y trouvez trois couleurs, « Bordures » pour l'en-tête, « Couleur des bordures » pour le cadre du widget entier, et « Couleur de la bordure » pour chaque cellule. L'épaisseur, elle, se règle dans le JSON, nous y venons.

Pour les champs, un seul réglage suffit pour toute l'app. Il vit dans Style de l'app, avec le bouton { EDITION } dont nous parlons plus bas, sous designComponents, textField, puis border.

Une liste a une règle de plus. Quand ses cellules n'ont ni fond ni bordure, elles se suivent à même la page et un filet fin les sépare, le séparateur, dans la couleur « Séparateur de liste » de vos Couleurs. Donnez une couleur aux cellules, à leur fond ou à leur bordure, et la liste change de mode. Le séparateur s'efface de lui-même. Chaque cellule se détache de ses voisines et ses angles apparaissent, selon votre réglage de forme. Rien à désactiver, rien à aligner.

Ainsi, dans une app GoodBarber, une liste ne cumule jamais deux traits, le filet entre les lignes ou le trait autour de chaque cellule, et c'est le système qui choisit. C'est notre principe « No design burden », pour que le design ne soit jamais une charge.

Voici deux fois le même écran. À gauche, toutes les bordures sont à 1 px, dans un gris discret. Elles délimitent chaque élément, mais rien ne ressort, tout se vaut. À droite, elles passent au noir doux de la palette (#282727) et leur épaisseur suit le rôle de chaque élément. 1 px pour la barre de navigation et la cellule d'événement, 2 px pour les en-têtes de widget et la pastille de date, 4 px pour la seule actualité mise en avant. Une ombre dure sous la pastille finit de donner à l'écran son caractère d'affiche. L'œil sait aussitôt où aller.

Les épaisseurs se changent en un instant. Essayez, comparez dans l'aperçu, et gardez ce que votre œil préfère.

La même cellule peut porter des bordures très différentes, et chacune change le style de votre app. L'image en montre quatre, de la plus discrète à la plus affirmée :

La première ligne correspond au réglage par défaut, que vous obtenez sans rien écrire. Les trois autres se reportent telles quelles dans l'éditeur, clé par clé.

Aucune de ces bordures n'est meilleure qu'une autre, et toutes se règlent avec les mêmes clés. La plus épaisse, à elle seule, peut donner son style à une app, comme dans notre maquette d'app de galerie d'art, en néo-brutalisme, sur Dribbble, avec des bordures noires épaisses et des angles droits.

Mon réglage préféré tient en un trait, un filet de 1 px sous le titre d'un widget, dans la couleur des filets de la palette. Vous l'avez croisé dans les images de cet article. Comme dans un journal, il sépare le titre du contenu sans rien fermer, et la liste respire. Un cadre complet autour du titre en ferait un bouton.

Sa couleur se choisit au panneau du widget, dans « Bordures », et ses côtés dans { EDITION }, c'est le geste de l'étape 4 ci-dessus.

La bordure en bref

• Dans une app GoodBarber, la bordure est déjà là, 1 px, sur les cellules, les widgets et leurs en-têtes, les champs et les boutons, transparente sauf sur les champs et les boutons contour.
• Trois réglages, la couleur, l'épaisseur (un nombre entier en pixels) et, sur l'en-tête d'un widget, les côtés (top, right, bottom, left), chacun actif ou désactivé.
• Bordure ou séparateur, jamais les deux. Une couleur de fond ou de bordure sur la cellule efface le séparateur et la détache.
• Sur un widget de la Home, trois couleurs au panneau, l'en-tête, le widget, la cellule.
• Pour les champs, un seul réglage vaut pour toute l'app.
• L'épaisseur et les côtés se règlent dans le JSON, avec l'extension gratuite Édition avancée (bouton { EDITION }).