session-6

Les frameworks CSS

Get started

Position et appliquer des styles à chaque élément peut prendre beaucoup de temps. Un framework CSS permet d'appliquer des styles pour chaque élément plus modernes que ceux par défaut, et d'ajouter quelques utilitaires pour designer plus facilement un site responsif.

La plupart du temps, tout se passe en ajoutant des classes à ses éléments HTML.

Le plus connu des frameworks CSS s'appelle Bootstrap. Pour débuter, vous pouvez suivre les instructions disponibles sur leur page Get started. Vous y trouverez l'url des fichiers à inclure à votre page, et même un template de base tout fait que vous pouvez utiliser pour commencer votre code.

De plus, Bootstrap inclut également du code Javascript, pour rendre vos composants interactifs. Ainsi il est possible de créer un site web complet sans maitriser les subtilités du code Javascript.

Les frameworks facilitent la vie du développeur, mais ils ont deux inconvénients. Il faut bien lire la documentation pour les utiliser au mieux (il est impossible de deviner quelle classe utiliser et il est souvent hasardeux de modifier leur code), et les sites faits avec le même frameworks se ressemblent beaucoup. Heureusement il est possible de personnaliser Bootstrap avec vos propres styles.

La grille

Bootstrap, comme d'autres frameworks, fonctionne sur le principe d'une grille. Imaginez que votre page est divisée en 12 colonnes virtuelles. Vous allez définir la largeur de vos blocs par un nombre de colonnes. Lorsqu'un bloc de 5 colonnes et suivi d'un bloc de 4 colonnes, ils se mettent côte à côte. Si vous ajouter un bloc de 4 colonnes, le total de colonnes (5 + 4 + 4 = 13) dépasse 12, donc ce bloc ira à la ligne. Comme les colonnes sont relatives à la largeur de la page, votre site est responsif. Bien entendu, vous pouvez définir pour chaque bloc un nombre de colonnes différent en fonction de la largeur réelle de l'écran. De cette manière, votre site prendra l'aspect optimal sur tous les écrans.

Les conteneurs

Pour commencer à utiliser le système de grille, vous devez définir deux blocs parents. Le premier est unique dans votre site. Il définit le cadre général du site. Soit largeur-fixe (.container), soit pleine-largeur (.container-fluid).

Dans ce bloc, vous pouvez créer des lignes (.row), qui définissent des ensembles de blocs qui seront toujours superposés verticalement.

Puis dans ces lignes, vous pouvez enfin définir vos colonnes. Un bloc "automatique" aura la classe "col". Un bloc de deux colonnes aura la classe "col-2". Si ce même bloc doit prendre 4 colonnes sur un écran plus large, il aura en plus la classe "col-md-4".

Tip : Il est bien sur possible d'ajouter plusieurs classes à un même élement. Celles-ci s'écrivent dans le même attribut class="", et sont séparées par des espaces.

Dans chaque colonne, il est ensuite possible de refaire une grille, avec un bloc ".row", qui contiendra également 12 colonnes.

<mainclass="container"><sectionclass="row"><articleclass="col-6"></article><articleclass="col-4"></article><articleclass="col-2"></article><articleclass="col-6"></article><articleclass="col-4"></article></section><sectionclass="row"><articleclass="col-6"></article><articleclass="col-4"></article><articleclass="col-2"></article><articleclass="col-6"></article><articleclass="col-4"></article></section></main>

Le contenu

Bootstrap vous aide avec des règles de mise en forme pour presque chaque élement dont vous aurez besoin. Vous pouvez les retrouver sur cette page, accompagnées d'exemples (aperçu et code).

Une jolie citation avec sa source s'écrira donc :

<blockquoteclass="blockquote"><pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer></blockquote>

Les composants

Au delà des blocs de texte simple, un site est souvent composé de composants tels que des boutons, des formulaires, des alertes, des onglets, des infobulles, etc...

Bootstrap propose des configurations par défaut très pratiques, que vous pouvez retrouver ici. Regardez la liste à gauche.

Un petit bouton avec liste déroulante s'écrira donc :

<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button><divclass="dropdown-menu" aria-labelledby="dropdownMenuButton"><aclass="dropdown-item" href="#">Action</a><aclass="dropdown-item" href="#">Another action</a><aclass="dropdown-item" href="#">Something else here</a></div></div>

Exercice

A l'aide de Bootstrap, créez un diaporama défilant (Caroussel) pour montrer les caractéristiques de 9 espèces de penguins. Votre page devra contenir :

• un titre : Reconnaitre un manchot
• un sous-titre : Neuf espèces parmi les 18 existantes

Puis les caractéristiques de chaque manchot avec leur photo (elles sont dans le dossier /assets) :

image: megellanic.svgNom: Manchot de MagellanNom latin: Spheniscus magellanicusOriginaire de: Argentine, Brésil, Chili, Pérou, UruguayObservé: Antarctique, Australie, Nouvelle-ZélandeStatut: Presque menacéimage: humboldt.svgNom: Manchot de HumboldtNom latin: Spheniscus humboldtiOriginaire de: Chili, Pérou, UruguayObservé: Colombie, ÉquateurStatut: Vulnérableimage: emperor.svgNom: Manchot empereurNom latin: Aptenodytes forsteriOriginaire de: AntarctiqueObservé: Argentine, Chili, Nouvelle-ZélandeStatut: Presque menacéimage: king.svgNom: Manchot royalNom latin: Aptenodytes patagonicusOriginaire de: Argentine, Chili, Afrique-du-SudObservé: Antarctique, Australie, Brésil, Nouvelle-Zélande, UruguayStatut: Préoccupation mineureimage: african.svgNom: Manchot du CapNom latin: Spheniscus demersusOriginaire de: Angola, Namibie, Afrique-du-SudObservé: Congo, GabonStatut: En dangerimage: chinstrap.svgNom: Manchot à jugulaireNom latin: Pygoscelis antarcticusOriginaire de: Antarctique, Argentine, ChiliObservé: Australie, Nouvelle-Zélande, Afrique-du-SudStatut: Préoccupation mineureimage: gentoo.svgNom: Manchot papouNom latin: Pygoscelis papuaOriginaire de: Antarctique, Argentine, Australie (île Macquarie), ChiliObservé: Nouvelle-ZélandeStatut: Préoccupation mineureimage: rockhopper.svgNom: Gorfou de MoseleyNom latin: Eudyptes moseleyiOriginaire de: Îles de l'Atlantique-sud et Océan indienObservé: Îles Malouines, Afrique-du-SudStatut: En dangerimage: adelie.svgNom: Manchot AdélieNom latin: Pygoscelis adeliaeOriginaire de: AntarctiqueObservé: Argentine, Australie, Nouvelle-ZélandeStatut: Préoccupation mineure

Pour ceux qui aura fini, adaptez votre code pour que ce ne soit plus un caroussel, mais un système d'onglets verticaux