vendredi, juillet 27, 2012

Petit test Boostrap, Less & nouveau tag HTML5

Pour tester un peu boostrap, less et html5 (les nouveaux tag header, footer, section, article et aside), j'ai d'abord créé une page simple: index-boostrap.html dans laquelle j'ai utilisé boostrap 'normalement'.
C'est à dire quelque chose ça: https://gist.github.com/3189167#file_index_boostrap.html

Puis j'ai essayé de faire disparaitre ces 'class' en transférant les styles sur les tags html5 dans la css. Pour cela j'ai dû partir du code less de boostrap pour ajouter mes nouvelles définitions dans styles.less.
Ce qui donne un html5 plus 'pur'

Voir: https://gist.github.com/3189167#file_styles.less et https://gist.github.com/3189167#file_index.html


Le résultat est assez proche à quelques pixel près ;)
Par contre:
  • la transformation est assez laborieuse et chronophage
  • maintenant ma page subit une transformation less (1 indirection de plus)
  • j'ai laissé tombé la transformation de la navbar (par manque d'envie / temps...)
Donc je conseille plutôt d'utiliser boostrap tel quel si c'est possible et si on a le choix :)

Le projet complet est disponible pendant 30j ici: http://dl.free.fr/qHx7j2rXo