Temps de lecture : < 1 minute
Dans mon premier article sur le Grid 8, j’ai expliqué les multiples raisons d’utiliser cette méthode de travail. Allons un peu plus dans le détail.
Comment inclure les bordures dans le système de grille 8?
Les bordures peuvent être utilisées sur n’importe quelles formes. Prenons l’exemple d’un bouton. Vous avez un bouton de largeur automatique, ce qui signifie que le contenu détermine sa largeur. Vous avez décidé d’ajouter un remplissage de 8px à gauche et à droite de celui-ci. Comment gérer la bordure ?
Il existe deux approches possibles :
- soit vous décidez d’inclure le 1px de la bordure à l’intérieur de votre bouton donc le padding sera de 7 px. Finalement, nous nous retrouvons avec les 7px de remplissage interne de l’élément + 1px de bordure. Ce qui nous fait bien notre espace de 8 pixels de votre système de grille. Votre développeur partira sur une solution de border-box.
- soit vous décidez d’exclure la bordure de l’espace de remplissage de 8px. La bordure de 1 px aura un impact sur votre zone de remplissage externe à l’élément. Également connu sous le nom de margin. Il faudra le soustraire de vos margins. Votre développeur partira sur une solution de content-box.
- soit vous n’utilisez pas de bordure, cela sera bien plus simple.
Illustrons cette explication en images.
Peu importe quelle est votre méthode favorite de comptabiliser vos bordures, ce qui compte que le produit soit pixel perfect pour l’ensemble des densités d’écran ?
