Un site gratuit sur le web en 5 leçons – 3.Les grilles
Publié le 13 août 2020
La leçon précédente posait les bases de l’HTML/CSS. Avec de l’entrainement, vous verrez que l’on prend vite le pli et c’est assez facile à pratiquer finalement. Mais tout recommencer à chaque création de page, c’est un peu pénible surtout le placement des différents éléments de la page.
Depuis quelques années, il faut aussi prendre en compte les différents écrans. Alors ça c’est devenu le gros morceau du web de nos jours. Il faut que les pages web soient lisibles sur tous les écrans possibles et imaginables. C’est fatiguant mais c’est comme ça.
Heureusement, certains ont inventé un système de grilles. Alors en quoi ça consiste ?
Il existe des librairies css (aussi appelées framework). Ces librairies sont là pour vous faciliter le travail. Il suffit de placer les class disponibles dans la librairie et de faire référence à la librairie dans le head de son fichier HTML. Les règles css prédéfinies par la librairie se mettront en place. Ici nous allons nous attarder sur une librairie qui propose une grille et qui va donc permettre au contenu de la page de s’adapter aux différentes dimensions d’écran qu’elle va rencontrer. Cette librairie, c’est bootstrap. Il n’y a pas qu’elle mais c’est la plus connue. La librairie est bien suivie et open source donc n’hésitez pas à vous plonger dedans, ce n’est certainement pas une perte de temps d’apprendre à s’en servir.
Bootstrap, construire rapidement des sites responsive
Bootstrap possède une grille qui définit la largeur du site en pixel. Cette grille est divisée en 12 colonnes et le contenu peut occuper le nombre de colonne qu’il désire.
Je prend un exemple concret. Je veux placer 3 paragraphes l’un à côté de l’autre dans ma page. Comment faire avec du css classique, je doit définir un container avec une certaine taille et ensuite faire flotter mes différents paragraphes l’un à côté de l’autre en leur donnant une taille spécifique. Si je veux répéter cette opération pour les différentes tailles d’écrans, je dois faire de nouvelles règles css sur les tailles et à chaque fois refaire mes calculs pour que les paragraphes se placent bien comme il faut. Ca devient vite casse-tête et la répétition de ces opérations peut amener pas mal d’erreurs. C’est là que bootstrap entre en scène, les classes existent déjà, il suffit d’aller piocher dedans et on peut en écrivant quelques classes sur les balises HTML avoir 3 paragraphes qui se placent l’un à côté de l’autre et se positionnent parfaitement sur chaque résolution sans écrire une seule ligne de css. Je vous avais dit que c’était efficace.
Bootstrap, à la portée de tous
Un des gros avantages de bootstrap est que la doc est super bien faite. Il est très facile de s’y retrouver et donc tout le monde peut s’en sortir avec cette librairie.
Si vous voulez faire un bon exercice pour apprendre la libraire, vous créez un mockup avec des éléments placés un peu partout dans votre page et vous vous mettez au défi de ne pas écrire une seule ligne de css mais seulement de l’HTML et de quand même réussir à placer l’ensemble de vos éléments dans la page en faisant uniquement référence à la librairie bootstrap. Je vous garantis que si vous arrivez à faire cela, vous aurez très facile à utiliser cette libraire par la suite et vous pourrez développer des pages web très rapidement. Les pages seront en plus suffisamment robustes pour affronter la plupart des écrans.
La preuve par l’exemple
Je vais réaliser un exemple tout simple comme celui décrit ci-dessus. je vais créer un container et à l’intérieur placer 3 paragraphes. Ceux-ci se placeront l’un à côté de l’autre grace à bootstrap sur les grandes résolutions et ils se mettront automtiquement l’un en dessous de l’autre sur les plus petites résolutions. Vous trouverez le code directement dans le repository github qui s’appelle grilles. Après avoir cloné le code, vous pouvez vous amusez à modifier les nombres de colonnes et modifier la taille de votre navigateur pour voir ce que ça donne.
Table des matières: