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:
Le projet complet est disponible pendant 30j ici: http://dl.free.fr/qHx7j2rXo
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...)
Le projet complet est disponible pendant 30j ici: http://dl.free.fr/qHx7j2rXo
Aucun commentaire:
Enregistrer un commentaire