Premiers tours de passe-passe dans Bootstrap et sa CSS dédiée

La page que vous avez sous les yeux utilise bootstrap, c’est le choix de Richard pour coder urbanbike…

Je suis toujours bluffé par les disparitions d’éléments, voire leurs déplacements sur cette page quand on réduit son amplitude… C’est là où je me rends compte que la technologie de grand-papa¹ que j’utilisais naguère maladroitement est… totalement dépassée…!

Mon interrogation au départ…

En réduisant la page à sa plus simple expression sur le iPhone et en arrivant en pied de page, je me suis fait la réflexion suivante… “un peu ballot de ne pouvoir ajouter un lien vers la page de l’index antéchronologique”. En effet, ce lien existe bien dans les petites colonnes mais, une fois qu’elles sont masquées, bien évidement, y’a plus…!

Me voilà à farfouiller en mode Monsieur bricolage dans la page des spécificités de CSS · Bootstrap… Et là, je comprends un peu mieux le choix de cette technologie choisie par Richard…! Bon sang, mais c’est bien sûr…!

Masqué ou visible…? That is the question…

En gros, la page est divisée en douze colonnes (virtuelles) et tout objet peut être décrété visible sur telle ou telle plage (quatre grandes plages qui recouvrent ces douze colonnes). Et masqué sur telle autre.

Dans le cas qui m’intéresse, c’est l’inverse : je veux qu’un élément précis ne soit visible, n’appariasse que dans un cas de figure. Quand l’écran est au plus resserré…

Après un peu de temps à comprendre le code monaronasesque (!) et lu la doc, j’ai finit par créer une <div> supplémentaire dans le <footer> histoire de préciser ceci :

<div class="col-xs hidden-sm hidden-md hidden-lg">

J’envoie mon épure à Richard qui me précise aussitôt qu’il y a une méthode encore plus simple utilisant la propriété visible…

<div class="visible-xs-block">

Heu, oui, c’est encore plus court(e)…

Mais en regardant les options visibles, je comprend (enfin…!) que la CSS de Bootstrap est également disponible partout², même dans mon texte Markdown. Pas besoin de mettre créer option stabilo dans un texte, <mark> le fait très bien³.

De la couleur…?

Enfin, je tombe sur les class des Contextual backgrounds qui autorisent également des effets pratiques si besoin. Et je n’ai pas résisté à ajouter un bg-warning…

En résumé, c’est très facile de greffer un truc sur un code déjà bien construit et je suis gré à mes deux copains Richard et Dominique de me pousser à explorer de nouvelles pistes…! Je ne vais pas aller très loin mais cela m’éclate.

En effet, bricoler un peu de code ne fait pas de moi un développeur, nous sommes tous d’accord sur ce point…!

Bon, je continue à passer le plumeau dans le code d’urbanbike…

À suivre…