940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539
.
Rapido
- Télécharger 940.css,
- Voir un exemple de page de contenu,
- Voir un exemple de grille (placement des blocs),
- 940.css en version fluide.
Le fichier
Caractéristiques
- Au lieu d’utiliser une classe
.last
pour annuler la marge gauche de la dernière colonne, 940.css utilise une classe.first
pour annuler la marge droite de la première colonne. De cette manière, il suffit d’utiliser la pseudo-classe:first-child
(comprise par Internet Explorer à partir de IE7) pour s’en passer, ce qui est plutôt pratique. - Possibilité d’avoir une largeur totale plus grande que la largeur du
.container
en jouant sur la largeur dubody
. - Uniformisation des techniques de
.pull-x
et.push-x
via la propriétéleft
.
→ Plus d’information sur 940.css dans l’article Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid ».
Bonjour,
Pourquoi ne pas utiliser Bootstrap from Twitter l’évolution naturelle de BluePrint ?
http://twitter.github.com/bootstrap/
Je n’ai pas regardé Bootstrap dans le détail, mais ça ressemble beaucoup à une usine à gaz. Après, j’imagine que c’est super bien fichu et tout et tout et que je passe sûrement à côté de quelques très bonnes idées… Le truc, c’est que le temps manque pour tout analyser de fond en comble.
T’as oublié dans l’expemplaire de marquer le span-24, qui s’agit de 940px
Oups, un oubli, merci 🙂