La Ferme du web - Les forums

Je ne sais pas si tout le monde connait 960Grid, il s'agit d'un framework CSS qui permet d'intégrer un design plus rapidement puisqu'il gère les marges internes externes, le positionnement et autre sur un grille de 12 ou 16 colonnes, le tout d'une largeur de 960 pixels, d'ou son nom.

Autrement dit, avec ce framework, il est possible de coder très rapidement un css, par contre le résultat est forcément un design de largeur fixe de 960px. Je me suis dit que le même fonctionnement pourrait être intéressant pour ceux qui comme moi préfère coder extensible le plus souvent possible, c'est pourquoi je suis actuellement en train de coder 960Ext (comme Extensible )

Pour le moment je n'ai fait qu'un début, voilà les caractéristiques :
   - Nombre de colonnes : 10
   - Marges exterieures et intérieures droites et gauches à 1%
   -Ajout des class suffix et prefix pour gérer les marges.

Le zip qui suit contient 3 fichiers css à inclure dans cet ordre :
   - reset.css qui remet à 0 tous les paramètres par défauts des différents navigateurs (reset.css originaire de 960Grid)
   - text.css pareil que reset.css mais pour ce qui concerne le texte. (originaire de 960Grid aussi)
   - 960ext.css qui contient toutes les classes pré-codées.

Télécharger l'archive zip

Un petit tutoriel pour utiliser les fonctionnalités déjà présentes :

Pour commencer, créez votre fichier html, et incluez les 3 fichiers css fournis dans l'ordre : reset.css, text.css, 960ext.css.

Ensuite, créez une div et attribuez lui la class "grid_1", cette div aura donc la largeur d'une colonne sur un tableau de 10 colonnes. Vous pouvez ensuite ajouter 9 autres div de class "grid_1" ou un div de class "grid_9" ou n'importe quelle combinaison pourvu que le résultat de chaque ligne soit toujours égal à 10.

Ensuite, avec les classes prefix, vous pouvez ajouter des marges à gauche. Créez donc une div et appliquez lui la class "grid_1 prefix_1" cette div sera donc de la largeur d'une colonne mais pas sur la première coonne comme tout à l'heure mais sur la 2ème, puisque la première colonne est une marge grace à prefix_1.

suffix fonctionne de la même façon que prefix, si ce n'est qu'elle ajoute de la marge à droite, ce qui permet de "combler" la ligne ou ajouter de la marge.

Reprenez la div "grid_1 prefix_1" et ajoutez "suffix_8", votre div ne change pas de place, seulement si vous ajoutez des div ensuite, celles-ci seront à la ligne d'en dessous.

Attention, pour qu'un ligne soit complète, il faut que l'ensemble de grid + prefix + suffix soit égal à 10.

Voilà, avec ce système, il me semble beaucoup plus pratique de coder en extensible, il ne me reste plus qu'à recevoir vos retours pour l'améliorer et à peaufiner quelques trucs !