Un template complexe pour le responsive design

J’ai intégré un template pour approche “mobile first” dans FOX CSS, le framework que j’ai créé (cf. mon article précédent). Par exemple, un élément de type bloc s’étant vu attribuer la classe .r50 occupera 100% de la largeur de son parent jusqu’à 640px de largeur, puis il passera à 50% au-dessus. C’est un bon début, mais comment faire si on veut plus de possibilités sur des résolutions supérieures ?


Ainsi, avec cette classe .r50, on n’aura jamais que la possibilité d’avoir deux colonnes au dessus de 640px. Si on souhaite avoir 4 colonnes sur des résolutions plus hautes, on pourrait utiliser la classe .r25 mais on se heurte à un autre problème : sur des résolutions plus faibles, 4 colonnes côte-à-côte ça n’est pas vraiment l’idéal…

La solution, c’est de mettre en place un système intermédiaire qui va offrir plus de flexibilité. Prenons l’exemple suivant :

@media screen and (min-width: 40.0625em) {
  .r50-25 {
    width: 50%;
    display: inline-block;
  }
}

@media screen and (min-width: 60em) {
  .r50-25 {width: 25%;}
}

A 640px et en-dessous : une colonne. Entre 641px et 959px : deux colonnes. Au dessus : 4 colonnes. Un exemple est disponible ici (bas de page). Bon, ça n’a rien de très sorcier mais ça a le mérite d’offrir plus de solutions en termes de mise en page. J’ai également ajouté une autre possibilité, qui utilise les classes .r66-33, .r33.33 et r100-33. En gros c’est toujours la même chose : le premier nombre indique la largeur de la classe entre 641 et 959px, le deuxième indique sa largeur au-dessus. On pourrait ensuite imaginer des templates plus complexes, mais je vais déjà tester ça en production, on verra si ça s’avère utile :)


Mise à jour (08/10/2012) : j'ai rajouté une nouvelle classe, r.50-33, fonctionnant toujours sur le même principe. Elle est visible directement sur la nouvelle version de FOX CSS.