Blueprint et Symfony

Les frameworks CSS permettent d’obtenir ultra facilement un design « en grille », et évitent de se prendre la tête à calculer les tailles de colonnes et à refaire les marges, les rendre compatible avec IE à la moindre modification, etc.

J’ai mis 10 ans avant de comprendre ce que ça pouvait bien vouloir dire un foutu « design en grille », et pourquoi les frameworks CSS s’obstinaient à parler de « design en 12 colonnes », « design en 24 colonnes ». Bon en fait c’est ultra simple, je pense que y a qu’à regarder les screenshots ci dessous pour comprendre pourquoi on parle de « grille ».

En gros, la largeur du site (950 ou 960 pixels, qui est la largeur standard des sites) est divisé en « X colonnes virtuelles« . Généralement entre 12 et 24 colonnes virtuelles. Et donc, si vous avez 12 colonnes virtuelles et que vous voulez maquetter votre site en 3 colonnes, (une petite, une grande et une petite), vous mettrez ça dans votre code HTML :

<span class= »machin-3″>
ma petite colonne
</span>

<span class= »machin-6″>
ma grande colonne
</span>

<span class= »machin-3″>
ma dernière petite colonne
</span>

<hr>

Bref, c’est ultra simple. Voici les screenshots (tant attendus :)) pour montrer la philosophie :

designGrid5

Et quelques sites qui utilisent des framework CSS :

designGrid3

designGrid2

designGrille1

Ces frameworks CSS permettent donc de développer plus rapidement, de la même manière que Symfony permet de développer plus rapidement avec PHP, ou jQuery le fait avec Javascript.

En dehors de ce concept de « grille », les frameworks CSS intègrent généralement notamment des styles de base, du type une classe « error » et le message sera rouge sur fond rouge clair, etc…

designGrid6

Il existe plusieurs frameworks CSS, 960.gs, Blueprint, etc… Je m’intéresse ici à Blueprint, d’une part parce qu’un framework CSS est ultra simple et que j’ai pas envie de me casser la tête (passer de 960gs à Blueprint, c’est pas comme passer de RubyOnRails à Symfony, clairement), mais surtout parce que ça a l’air d’être l’un des meilleurs.

Voilà comment mettre en place Blueprint avec Symfony, et ce que ça donne :

Etape 1 :

Après avoir téléchargé Blueprint, j’ai pris le répertoire « lib« , « tests » et « blueprint » du ZIP et je les ai mis dans web/css de Symfony. Donc ça donne concrètement :

  • Les fichiers .css Blueprint sont dans : projetsymfony/web/css/blueprint/*.css
  • Les fichiers Ruby Blueprint sont dans : projetsymfony/web/css/lib/*.rb
  • Les fichiers tests de Blueprint sont dans projetsymfony/web/css/tests/

(ces derniers — les fichiers Ruby et le répertoire tests — sont facultatifs, mais bon si vous voulez customiser un peu les CSS faudra y passer,  vous pouvez aussi le faire en local et uploader direct les 3 bons fichiers générés ; perso je bosse beaucoup directement sur le serveur)

Etape 2 :

J’ajoute les lignes de CSS directement dans le layout.php, (sans passer par la config apps/config/view.yml)

<link rel= »stylesheet » href= »/css/blueprint/screen.css » type= »text/css » media= »screen, projection »>
<link rel= »stylesheet » href= »/css/blueprint/print.css » type= »text/css » media= »print »>
<!–[if IE]><link rel= »stylesheet » href= »/css/blueprint/ie.css » type= »text/css » media= »screen, projection »><![endif]–>

J’ai pas encore creusé sur comment faire passer les [if IE] avec Symfony directement dans la config, et à mon avis ça vaut pas la peine de perdre 10 ans la dessus !

Etape 3 :

On crée une nouvelle page (genre monappli/modules/test/indexSuccess.php) et on écrit un petit test :

<div class="container">

    <h1>Blueprint power ! <?php echo $test ?></h1>
    <hr />
    <h2>Coucou Symfony :)</h2>
    <hr />

    <div class="span-5 colborder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>

    <div class="span-11 colborder">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>

    <div class="span-6 last">
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>

</div>

Ici, on a un design à 24 colonnes (c’est fourni comme ça à la base).
Donc ici on a : 5 + 1 (colborder) + 11 + 1 (colborder) + 6 = 24.

Et on va checker le résultat… ça marche niquel, voilà voilà :

designSimple

Fichiers et configuration de Blueprint

Bon, maintenant reste à savoir comment changer la config de Blueprint si vous voulez changer qq chose dans le CSS (genre changer la grille, et passer d’une grille de 24 colonnes à une autre taille si vous voulez intégrer de la pub au design par exemple).

Fichiers de « prod » qui sont intégrés à votre HTML :

  • blueprint/screen.css
  • blueprint/print.css
  • blueprint/ie.css

Fichiers sources à modifier à souhait :

  • blueprint/src/reset.css: reset les valeurs CSS (margins, etc) pour qu’elles soient les même pour tous les navigateurs
  • blueprint/src/grid.css: crée toutes les  classes CSS (machin-12, machin-6) pour pouvoir créer ultra facilement des boites à la bonne taille (tout l’intéret du système en grille est là)
  • blueprint/src/typography.css: typo par défaut, les H1, H2, P et tout ça
  • blueprint/src/forms.css: pour de beaux formulaires 🙂
  • blueprint/src/print.css: règles pour l’impression
  • blueprint/src/ie.css: les hacks pour ces merdes intersidérales de IE6 (et moins IE7)

Les scripts :

  • L’un de validation est nommé Validator. Il permet à tout moment de faire valider vos CSS aux règles W3C.
  • L’autre script de compression de CSS nommé Compressor. Comme les fichiers CSS (« de prod ») sont eux mêmes compressés, il vous faudra les recompresser une fois vos changements terminés. Le compressor est donc là pour cette étape.

Pour générer des nouveaux CSS de prod :

Dans web/css/lib/settings.yml, prenez modèle sur ce fichier pour créer votre configuration :

project1:
  path: /home/monprojetsymfony/web/css/blueprint/
  namespace: powa
  # custom_css est facultatif, c si vous voulez rajouter vos propres fichiers
  custom_css:
    ie.css:
      - mon-fichier-css-pour-ie.css
    print.css:
      - mon-fichier-pour-limpression.css
    screen.css:
      - mon-fichier-de-css-normal.css
  custom_layout:
    column_count: 12
    column_width: 70
    gutter_width: 10
  plugins:
    - fancy-type
    - buttons

Ensuite, toujours dans web/css/lib, tapez

ruby compress.rb -f settings.yml

Et hop, il va vous générer les 3 fichiers de prod, dans projetsymfony/web/css/blueprint/*.css

finishRuby

Et voilà, les fichiers sont générés, mis au bon endroit, pu qu’à actualiser la page de test, les changements ont bien été pris en compte.


Bilan : même pas 1h entre la découverte du framework CSS, sa mise en place et les premiers résultats. Si ça pouvait être pareil pour les frameworks PHP, ça serait du grand bonheur 😀

A voir aussi :

Pour générer de nouveaux grid.css sans passer par le script Ruby fourni avec Blueprint :
http://kematzy.com/blueprint-generator/

Pour générer de nouvelles grid avec une interface web :
http://www.constructyourcss.com/

Un autre tutorial :
http://www.lafermeduweb.net/billet/tutorial-prendre-en-main-un-framework-css-2-blueprint-217.html

Cheat sheet :
http://blueprintcss.org/media/BlueprintV0.8byGJMS.pdf

Publicités

4 comments so far

  1. Adrien M. on

    Très intéressant [cet article | ce blog].

    Je ne connaissais pas Blueprint, piste à fouiller…
    Continue à nous balancer des infos dans le genre 🙂

    Un symfony’addict

  2. Nicolas R. on

    Intéressant ce framework CSS … et son intégration aussi bien expliquée dans symfony 🙂
    Pour le IE conditionnel dans le view.yml tu peux le gérer comme ça
    stylesheets: [ie6.css: { condition: IE 6 }]

    • symfonyguide on

      Merci beaucoup pour cette précision !

  3. etoileweb on

    La compresse ne marche pas. ca retourne dans la console que ‘ruby’ n’est pas reconnu comme une commande interne ou externe. Comment faire.


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :