Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

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

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière, Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML.

L’interface de Boks

Fenêtre principale de Boks pour placer les blocs de votre design après avoir déterminé votre grille de mise en page.

Paramétrez finement votre grille

Exporter les fichiers CSS et HTML

Lors de l’export, les fichiers CSS sont compatibles avec Blueprint en version 0.9.1 mais rien ne vous empêche de vous en servir de la grille ainsi générée pour d’autres frameworks, voire juste pour avoir les width et autres margin-left, etc. dont vous avez besoin, comme je l’ai fait ici pour la mise en place de mon nouveau thème WordPress !

Il est possible d’obtenir les fichiers CSS screen.css, print.css et ie.css ou de les rassembler automatiquement dans un seul fichier pour optimiser le nombre de requêtes HTTP

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.



17 commentaires pour “Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.”

  1. […] This post was mentioned on Twitter by Thibaut LE LEVIER, ۞ Bruno Bichet. ۞ Bruno Bichet said: Boks — Éditeur visuel de grilles CSS pour Blueprint, etc. | Le blog de l'intégrateur web http://j.mp/4olkZd […]

  2. Énorme ce truc. Qd je pense que j’ai tout fais à la main pour mon prochain design, avec recompilation ruby et tout le tintouin pour changer la largeur…

    Je bookmarke merci.

  3. MrThieu dit :

    Je connaissais déjà et je vous conseil (si vous ne l’utilisez pas déjà) Pixus pour calculer une zone précise sur l’écran.

    • Bruno Bichet Intégrateur Web dit :

      Excellent, ce Pixus, merci pour le lien :)

  4. charlotte dit :

    Comment peut on se procurer ce merveilleux outil? Merci

  5. Ben il y a un lien au tout début de l’article.

  6. Lashon dit :

    Merci Bruno, je vais tester ce machin qui semble énorme. Ce commentaire surtout pour te remercier au passage pour ton excellent et incontournable blog que je lis régulièrement.

  7. […] organisation des éléments de son site.En parcourant le site de Bruno Bichet, je suis tombé sur un article qui parlait de Boks.Boks est un éditeur graphique qui permet de créer ses grilles en se basant […]

  8. […] J’avais déjà un doute en regardant l’organisation des différents fichiers composant le thème : sous prétexte de généricité, on trouve des appels de fonctions pour tout et n’importe quoi. Comme je n’aime pas vraiment construire sur des fondations douteuses (ou que je maitrise mal), je suis parti d’une page blanche en ce qui concerne le marquage HTML et le fichier functions.php. Pour les CSS, je me suis laissé tenté par Boks pour le calcul de la grille de mise en page. […]

  9. […] la création d’un nouveau document m’a fait penser aux options proposées par la petite application Boks qui permet en quelques clics de générer l’ensemble des fichiers du framework CSS Blueprint […]

  10. […] index.php et comments.php et functions.php. Pour la mise en page, je me suis laissé tenté par Boks, le générateur de grilles CSS qui s’est occupé de générer un fichier screen.css qui regroup les fichiers compressés du […]

  11. […] de grille le soin de faire les fastidieux calculs à ma place, qu’il s’agisse de boks pour Blueprint ou encore de 960 Layout System pour […]

  12. […] Boks — Éditeur visuel de grilles CSS pour Blueprint, etc. Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière,Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML […] […]

  13. […] besoins. Si vous n’arrivez pas à trouver chaussure à votre pied, l’application Air Boks vous permettra de déterminer le pas de votre grille et bien d’autres choses […]

  14. […] classes, j’ai conservé les intitulés de Blueprint qui permettent de profiter des générateurs de grilles disponibles sur le marché, comme l’excellente application Air Boks au cas où l’on […]

  15. […] Boks — Éditeur visuel de grilles CSS pour Blueprint, etc. […]



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