960 Grid System – Avantages d’un Framework CSS

J’ai décidé d’exploiter et de me pencher sur ce que sont les frameworks CSS. Je ne m’étais jamais réellement intéressé à ce genre d’outils, d’une part, par manque de temps et d’autre part, car je n’y voyais pas d’un grand intérêt.

Cependant, j’y ai jeté un œil et en se rapprochant de plus prêt de ces projets, la première phrase qui m’est venue à l’esprit, c’est : « Mais pourquoi je n’y ai pas pensé avant ?! ».

En effet, ma vision des choses a complètement changé dès lors que je m’y suis intéressé. Voici quelques raisons (parmi tant d’autres) qui font que de tels frameworks sont appréciables :

  • Comme chaque framework, le but principal est de donner un bon rendement question rapidité de développement
  • Une communauté présente
  • Mise en page optimisée
  • Compatibilité avec les différents navigateurs
  • Des gabarits pour les illustrateurs sont disponibles (.ps, .ai etc…)
960 Grid System

960 Grid System

Pourquoi 960 Grid System ?

Il n’y a pas de réelle raison, c’est celui qui m’a tapé dans l’œil en premier (bonne communauté, liens avec la communauté JQuery etc…), je n’ai pas encore trouvé de bons ou de précis comparatifs sur la toile entre les divers Frameworks CSS. Cependant, il me semble qu’il y a aussi blueprint qui jouit d’une bonne réputation. En attendant que je me fasse ma propre idée (que je vous ferais partager), je vais approfondir la manipulation de 960 Grid System.

Alors 960 Grid System, est un framework CSS qui va vous permettre de structurer votre site avec une base, comme son nom l’indique, de 960px et ceci afin d’optimiser l’affichage sur les résolutions 1024 x 768px.

Votre site sera découpé en 12 ou 16 colonnes (comme vous pouvez le voir sur la demo), afin d’avoir un large panel de présentations et de possibilités de découpe du site.

Voici brièvement la manière d’utiliser ce Framework CSS, ceci n’est pas un tuto, mais plutôt une petite présentation qui vous permettra de découvrir l’outil si vous ne le connaissiez pas.

Dans un premier temps, il vous faut déclarer le conteneur avec la class container_12 (pour 12 colonnes) ou container_16 (pour 16 colonnes) :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22container_12%22%3E%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

 

Ensuite il existe plusieurs méthodes, par exemple :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22container_12%22%3E%0A%3Cdiv%20class%3D%22grid_7%20prefix_1%22%3E%0A%3Cdiv%20class%3D%22grid_2%20alpha%22%3E…%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22grid_3%22%3E…%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22grid_2%20omega%22%3E…%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22grid_3%20suffix_1%22%3E…%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

 

Comment comprendre cet exemple, on déclare notre conteneur principal, ici 12 colonnes. Ensuite, on ajoute des enfants qui seront des éléments de notre site, la classe : class= »grid_XX », signifie que le conteneur sera composé de XX colonnes. Vous allez me dire : « oui, mais 7 + 3 = 10, et non 12, pourquoi ? ». Tout simplement, parce qu’on a rajouté prefix_XX et suffix_XX, ou XX sera autant d’espace vide avant et après. Ensuite, pour déclarer la première colonne de gauche il faut aussi préciser la classe « alpha » et pour la dernière la classe « omega », ce qui permettra au framework de cibler le début et la fin des éléments sur une même ligne.

Voilà, pour la brève présentation, j’essaierais de faire un petit tuto prochainement, si vous avez des questions, n’hésitez pas.

N’oubliez pas aussi que l’intérêt d’un tel outil c’est de pouvoir travailler avec un graphiste qui aura des gabarits et cela évitera beaucoup de pertes de temps.

grid 12 colonnes

grid 12 colonnes

Retrouvez le framework CSS : 960 Grid System
Pour les curieux aussi le framework CSS : Blueprint

Author: Franck Pertegas

Share This Post On

1 Comment

  1. A savoir, que 960 Grid System possède depuis peu un nouveau fichier css pour 24 colonnes afin d’avoir encore plus de liberté de découpe !

    Post a Reply

Trackbacks/Pingbacks

  1. Un nouveau site pour LudiKreation | LudiBlog - [...] et surtout, le site utilise le Framework CSS 960 Grid System, que nous avions vu récemment ici. Et je…

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *