Concevoir un site web, les frameworks CSS

Ces dernières années ont vu l’apparition d’un nouveau type d’outils pour le web dédié à la présentation:  les frameworks CSS.  Ces frameworks facilitent le travail du concepteur en fournissant plusieurs services: simplification des positionnements complexes, amélioration du rendu visuel ou encore gestion de la compatibilité entre les navigateurs.

Framework, vous avez dit framework?

Vous avez créé une page web et vous avez l’impression de vous répéter? Vous copiez et collez du code HTML ou CSS? Vous reproduisez des schémas de présentation? Alors il existe certainement une solution pour éviter cela. Les frameworks commencent souvent par ce genre de constat et grossissent au fil du  temps en agrégeant de bonnes pratiques. Courant en programmation, ils apparaissent de plus en plus dans le monde de la présentation.

Un framework, mais pour quoi faire?

Presque tous les frameworks incluent un composant « reset ». Le but de ce composant est de gommer les différences entre les navigateurs. En effet ces derniers rendent une même page de façons légèrement différentes: espaces entre les lignes, mises en forme des balises, largeur des marges, polices utilisées, etc. Le composant reset règle ces différences et permet de disposer de la même page blanche dans tous les navigateurs.

Un problème récurrent en CSS consiste à vouloir disposer des éléments sur une page complexe: colonnes, blocs de marges, etc. La difficulté tient, d’une part, à la complexité de l’algorithme de positionnement et, d’autre part, aux différences qui peuvent exister entre les navigateurs. Les frameworks proposent généralement une solution plus simple qui consiste à positionner les éléments sur une grille à l’aide de styles. On peut par exemple positionner un élément sur la colonne 3 avec une largeur de 4 colonnes de la façon suivante:

<span class="column3 width4">

Un autre besoin urgent est celui de s’adapter aux différentes tailles d’écran. Ce besoin a, certes, toujours existé mais il est devenu essentiel avec l’arrivée de clients mobiles – tablettes et autres smartphones. On peut gérer ces différences en adoptant plusieurs stratégies: positionnement fixe (on ne s’adapte pas au-delà d’une certaine taille), positionnement élastique (les largeurs sont des pourcentages de la taille de la page) ou fluide (toute la place est occupée). Les frameworks prennent généralement en charge ces différences dans leur système de grille. On peut ainsi se contenter de spécifier quel type de positionnement on veut voir appliquer à l’aide d’une classe: fluid-layout ou fixed-layout par exemple.

On peut également utiliser les frameworks CSS pour créer simplement des éléments usuels de l’interface graphique. Menu contextuel, bar de navigation ou onglets sont autant d’éléments qu’on retrouve couramment, mais qui n’ont pas de balise HTML  associée. Pour les réaliser on créé en général deux éléments: une structure dans le document HTML et un ensemble de règles CSS pour la présentation. Les frameworks fournissent en standard ces règles CSS et évitent de devoir les recréer à chaque fois.

<ul class="nav nav-tabs">
<li class="active">
<a >Home</a>
</li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>

Exemple de création d’onglets avec Twitter-Bootstrap

Lequel choisir?

Tout dépend de ce que l’on recherche. Ceux qui ne veulent pas hériter des styles visuels d’un autre se tourneront soit vers un pure framework de « reset » (Yahoo Reset par exemple) ou vers un framework minimaliste. Ceux qui veulent en revanche profiter de l’ensemble des services fournis se tourneront vers un framework plus généraliste. Par exemple

• Twitter Bootstrap
• YAML
• Blueprintcss

S’il ne devait en rester qu’un

La question est aujourd’hui difficile puisque le phénomène est relativement nouveau et que la phase de consolidation n’a pas encore eu lieu. On risque donc, en faisant le mauvais choix, de se retrouver dans quelques années avec un framework qui n’est plus maintenu.

En peut cependant recommander Twitter Bootstrap sans prendre trop de risque. Cela tient, d’une part, à la taille du framework et des services proposés mais, plus encore, à la taille de la communauté.

Ressources