jeudi 5 juin 2014

CSS : Design By the Grid

Bootstrap

Développeurs ne nous leurrons pas, n’est pas « designer » qui connaît le HTML.  C’est pourquoi, plusieurs y ont réfléchi et ont développé des librairies CSS afin de mettre en place des concepts de présentation qui permettent de structurer la disposition des pages web.

Un des concepts très populaire, est l’utilisation d’un positionnement par « grille ».  Ce type d’affichage existe depuis le début de l’édition d’impression.    Visuellement, la page est séparée par zone. De là, on contrôle l’affichage de chacune de celles-ci par CSS.  C’est très utile lors de l’utilisation de menu, d’un affichage par colonne,  l’affichage de message etc.

Les gens de Twitters (Bootstrap), ZURB (Fondation) et même le gouvernement Canadien (WET-BEOW) se sont penchés sur la question et ont développé des plateformes CSS pour standardiser la présentation de leur site.  L’avantage n’est pas seulement d’uniformiser l’affichage mais aussi de s’assurer du maintien de celle-ci selon la dimension de l’écran de l’utilisateur, que ce soit sur un mobile ou sur un écran d’ordinateur.  Ainsi, on assure la réactivité du site selon le médium utilisé pour accéder au site.

Dans le cas de Bootstrap l’écran est séparé en douze colonnes.  Les colonnes ont une largeur définie par la résolution du moniteur, variant de 60 pixels ou moins pour une tablette ou 95px pour un très large écran. Par la suite, il est possible de « fusionner » des cellules pour avoir, exemple, une ligne qui utilise 4 colonnes, chacune totalisera la largeur de trois cellules et ce, simplement en manipulant les classes CSS des éléments HTML.

Exemple Bootstrap :

Bootstrap

Le « GridSystem » est un élément majeur supporté par cette librairie mais d’autres éléments ont été normalisé tel que, le texte, l’utilisation des polices de caractères, la présentation des formulaires, les boutons, les images etc. Ces outils sont de distribution libre et peuvent être incorporés à toutes les solutions web, de Java à .Net ou simplement Javascript.

Liens