Blueprint Generator : une grille CSS à vos mesures

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Blueprint Generator : une grille CSS à vos mesures

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



8 commentaires pour “Blueprint Generator : une grille CSS à vos mesures”

  1. Nicolas dit :

    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 ?

  2. Bruno Bichet dit :

    @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 une solution minimaliste permettant la mise en place de sites élastiques.

  3. pixenjoy dit :

    Pour les sites élastiques voir aussi le framework CSS YAML (”Yet Another Multicolumn Layout”) http://www.yaml.de/en/home.html

  4. Tom dit :

    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.

  5. Ajaxiom dit :

    Bruno, si tu as l’occasion de t’y pencher compare Blueprint à Bootstrap de Twitter. Pour moi il n’y a pas photo. Le boulot sur Twitter est très intéressant, couplé avec du javascript. Ce qui fait que tu disposes en peu de temps de widget javascript (popup, message d’alerte, etc …) avec une ihm soigné. Avec Bootstrap2 tu as aussi Less. Tu peux modifier tes Css en un tour de main en définissant des variables. Donc en fonction de l’usage, je trouve que le truc de Twitter est mieux (plus large, mieux maintenu, plus intégré à Less, et une doc nickel, ce qui n’est pas le cas de blueprint)

  6. Bruno Bichet dit :
    Le modèle des boites est bon mais dans la pratique, trop d’exceptions à créer

    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

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site