Mise en page en s’appuyant sur les grilles

par birnou · 21 juin 2012

En attendant la prise en compte plus forte du Grid Layout Module, pouvant se baser sur les régions, employant ou non des shapes ou encore tout autres affichages se basant sur une grille standard, il existe un grand nombre de framework, qui sont tous compatibles avec la majeure partie des navigateurs et qui permettent pour la plupart, un mode d’affichage responsive.

Voici une liste non exhaustive des plus fréquemment rencontrés :

Bien que cela ne soit pas le propos de cet article, voyons comment nous pourrions implémenter un de ces framework pour gérer l’affichage et la disposition d’une page classique. Cette page est constituée d’un header, d’une partie de contenu d’articles sur le côté gauche et d’une partie « informations complémentaires » sur le côté droit, enfin un pied de page termine sur la partie basse.

Voilà ci-dessous à quoi pourrait ressembler le code HTML, en s’appuyant par exemple sur 960.gs. Il est également possible de visualiser le rendu final sur cette page :

<body class="container_12">
    <header class="grid_12">header</header>
    <section class="grid_8">
        <article class="grid_4 alpha">article</article>
        <article class="grid_4 omega">article</article>
        <article class="grid_8 alpha">article</article>
    </section>
    <aside class="grid_4">aside</aside>
    <footer class="grid_12">footer</footer>
</body>

Le seul reproche que l’on pourrait faire à l’encontre de ce type de framework, si reproche il y avait, viendrait du fait que la quasi-totalité de ces environnements ne sont pas sémantiques. C’est-à-dire que les noms de classes utilisés sont plutôt du genre push_2, aside_1, container_12 ou encore grid_3 et donc, ne s’appuient pas sur la nature du contenu même de nos documents. Une initiative cependant basée sur les principaux modèles de préprocesseurs, propose un système de grille liquide et responsive, the semantic grid system, qui se fonde justement sur la sémantique utilisée pour décrire nos contenus.

Mise en page en s’appuyant sur les grilles

Laisser un commentaire Annuler la réponse