Le framework CSS Blueprint propose une grille par défaut de 950 pixels de large, divisée en 24 colonne de 30 pixels chacune, séparée par une gouttière de 10 pixels. Contruire sa propre grille est assez fastidieux mais Blueprint Generator est là pour vous demander le nombre de colonne, leur largeur, la gouttière qui les sépare ainsi que la largeur totale que vous voulez.
Vous saurez ensuite combien de pixels vous manquent (ou de combien vous dépassez) pour arriver à la bonne largeur. Reste à jouer sur les différentes valeurs pour générer le code CSS qui remplacera les valeurs de grid.css inclus à l’origine dans Blueprint.
Cerise sur le gâteau, une version compressée est proposée, ainsi que l’image grid.png qui sert à afficher la grille de base pour le placement des colonnes lors de la phase de conception.
5 Comments
Bonjour, une bonne pratique de conception CSS n’est-elle pas une dégradation harmonieuse de l’interface ? Et donc n’est-ce pas en contradiction avec l’utilisation des pixels ?
@Nicolas > C’est possible. Encore faut-il être d’accord sur ce qu’on met derrière “bonne pratique” et “dégradation harmonieuse.
si je suis d’accord pour considérer l’utilisation des em et/ou des % comme faisant partie des “bonnes pratiques”, je ne pense pas que l’utilisation des pixels puissent être considérée comme une mauvaise pratique à priori.
A condition bien sûr de ne pas utiliser les pixels pour autre chose que la structure du site : il est important de laisser la taille des textes, des interlignages, des marges internes et externe, etc. dans une unité relative pour permettre un redimensionnement harmonieux. Encore que les navigateurs ont maintenant tendance à agrandir l’ensemble de la page au lieu de se contenter du texte.
Par ailleurs, le concepteur de Blueprint travaille sur une version flexible de son framework CSS, ce qui permettra de satisfaire tout le monde.
Sinon, Guillaume Schaeffer a créé Bungee, qui est
Pour les sites élastiques voir aussi le framework CSS YAML (”Yet Another Multicolumn Layout”) http://www.yaml.de/en/home.html
Bien que ce framework m’est vraiment impressionné, je n’en garde désormais que les propriétés de “reset”.(très bonnes) Le modèle des boites est bon mais dans la pratique, trop d’exceptions à créer, c’est finalement assez lourd pour d’aussi nombreuses adaptations. N’empêche que les fichiers sont un modèle de nommage/et de clarté pour les developpeurs CSS.
Je profite du fait que je viens d’écrire Framework CSS — mettez vos grilles au pas ! pour plusser ton point de vue sur cette question. J’attire juste ton attention sur le fait qu’il se crée de plus en plus de frameworks css et que certains laissent un part de liberté dans la conception des maquettes ; je pense notamment à css-boilerplate
2 Trackbacks
[...] Blueprint Generator : une grille CSS à vos mesures [...]
[...] Une grille CSS à vos mesures via Css4Design [...]