De ceux que j’ai utilisé, le projet de Twitter est sans aucun doute mon favoris. En plus d’avoir un look plutôt sympa, c’est celui qui va le plus loin dans l’intégration de fonctionnalité. Cela vous fait vraiment gagner un temps non négligeable dans votre développement.

La nouvelle mouture apporte son lot de nouveauté comme la très attendu « Responsible grid ». Allez consulter le site afin de découvrir les dernières améliorations.

J’hésite d’ailleurs à utiliser Bootstrap pour le site du MJOR. Actuellement, il est basé sur sur Blueprint.

Un chose que j’apprécie, c’est créer les sites. Et par dessus tout, c’est la partie HTML et CSS qui me procure le plus de satisfaction (oui, ça fait peur).
A l’époque, on codait tout de A à Z, on créait sa structure soi-même en se battant avec des « padding » et « margin ». On prenait des heures à décider quel rapport de taille entre le titre de niveau un et de niveau deux.
Mais ces dernières temps, on voit apparaître des framework (sorte de boite à outil) HTML et CSS qui nous facilite passablement la tâche… et ça marche.

960 Grid System

Il s’agit du premier framework que j’ai découvert. C’était déjà pour moi une révolution. Il vous livre une librairie de style qui vous permet de composer votre site dans un système de grille. Il n’y a plus qu’à caler ses éléments dedans, appliquer les styles et tout est positionné.
Votre structure est faite en cinq minutes. Trop beau !

Mais j’ai découvert encore mieux.

Blueprint

Bluprint comme 960 Grid System propose un système de grille. Mais là où c’est encore plus fort, c’est que les styles sont également prédéfinies pour la typographie, les formulairs et encore quelques « goodies » bien pratique.
La mise en place de style de typographie, n’a jamais été simple pour moi. Mais là, ça devient un jeu d’enfant. Ils sont tellement bien fait qu’il suffit de quelques ajustement et c’est parfait.

J’ai utiliser ce framework avec beaucoup de plaisir (Oui, je sais. Ça fait peur.). Le gain de temps et juste énorme.

Blueprint est très jolie mais les style sont un peu « carrés-carrés ». Dernièrement, je suis tombé sur …

Bootstrap

Bootstrap est proposé par l’équipe de développement de Twitter. Comme les autres, il s’agit d’une librairie de style CSS pour vous simplifier la vie (celle où on « like » et « +1″). Mais en plus, on a à disposition des styles pour la navigation, pour des « alert box », des médias, des tabulations et une ribambelle de petit script. Et le tout est juste magnifique (et ultra léger) !

En plus tout le CSS est basé sur Less CSS (peut-être que je vous parlerais de ça dans un prochain article).

Autant dire que quand je suis tombé là-dessus, je croyais rêver.
Le gain de temps pour mettre en place les gabarits d’un site et juste faramineux. Et si en plus c’est déjà beau à la base. Que demande le peuple ?

huhu, un titre en anglais !
C’est vrai, j’aurais pu le traduire par « Faciliter la lecture des vos feuilles de styles CSS ».

Bref, tout ça pour attirer votre attention sur l’article du même nom (voilà d’où vient le titre ) paru sur le site Smashing Magazine il y a quelques temps. Quelques exemples de commentaires vous y sont présentés. Ceux-ci permettent de rendre votre CSS plus digeste pour la personne qui passe derrière vous.

Combien de fois, je m’arrache les cheveux en m’amusant à relire des feuilles CSS mal construites, mal codées, mal pas commentées, etc.
J’essaie maintenant d’appliquer les recommandations que cet article nous propose. En tout cas, je peux vous dire que c’est bénéfique. Serte, au début on perd un peu de temps. Mais on se fait vite notre petite bibliothèque de commentaire prêts à l’emploi et tout ça va de plus en plus vite. Et comble du bonheur, je m’y retrouve dans mes CSS lorsque je code.

Ou plutôt une révolution colorimétrique !
Tout ça pour dire que j’ai changé la feuille de style. Le vert à été remplacé par le rouge.

Comment ça c’est pas frappant ??? Mais oui, les titre à gauche, z’étaient verts avant ! Roooo.

Bon faut dire que ça m’a pris deux clique à faire. C’est pas comme si j’avais écris 10’000 lignes de code.

L’autre jour, j’étais à la recherche de palette de couleur afin de refondre l’interface d’un site. Je suis tombé sur Color Scheme Designer 3. Je le trouve assez pratique et surtout ce qui m’a plus est qu’il vous montre des exemples d’interface utilisant la palette que vous avez choisis.

Le principe est toujours le même, on commence avec une bonne vieille feuille de papier pour établir l’architecture générale de la page.

Puis on code les feuilles de style.

Et enfin, on évalue le résultat.

Après on recommence jusqu’à arriver à quelque chose qui nous plaît.

Là en l’occurrence, je me dis que je devrais arriver à quelque chose de plus « fun » avec des petites bières qui moussent un peu partout.