Frameworks CSS

Un framework CSS est un ensemble d'outils (fichiers CSS et JavaScript) permettant de simplifier la conception d'un document Web en proposant une grille de mise en page, une stylisation des éléments HTML et des composants supplémentaires (caroussel, menu, fenêtre modale, etc). Un framework est, en règle générale :

Cross-browser: Le document est présenté de la même manière quelque que soit le navigateur utilisé
Responsive: La mise en page du document Web s'adapte aux dimensions du support utilisé pour le consulter
Mobile First: Le document Web est pensé en priorité pour être consulté sur des périphériques mobiles (smartphones, tablettes)

Parmi la multitude des frameworks existants, j'ai choisi d'aborder les deux suivants.

Bootstrap 4

Développé par la société Twitter afin d'uniformiser les interfaces de ses applications internes. Ce framework est désormais open-source depuis août 2011.

http://getbootstrap.com/

W3.CSS

Développé par l'équipe de w3schools.com, il est très léger et compatible avec les principes du Material Design proposés par Google.

https://www.w3schools.com/w3css/

Configuration

Dans la mesure où un front-end framework se résume à une collection de fichiers CSS et JavaScript, il suffit d'incorporer ces fichiers dans un document Web en tant que ressources embarquées pour l'utiliser.

Pour des considérations de performance (vitesse de téléchargement) et de robustesse (utilisation des fichiers les plus récents), il est préférable de s'appuyer sur un CDN, un réseau de serveurs distribués sur internet qui mettent à disposition du contenu.

Ci-dessous deux modèles de documents Web utilisant respectivement Bootstrap 4 et W3.CSS.

Bootstrap 4

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Bootstrap 4 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

W3.CSS

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>W3.CSS Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

  </body>
</html>

Système de grille

L'avantage principal d'un framework CSS réside dans l'utilisation de son système de grille qui facilite la mise en place des éléments HTML dans une démarche de Responsive Web Design.

La grille est composée de lignes, chaque ligne pouvant contenir jusqu'à 12 colonnes. Lors de l'ajout d'un nouvel élément au sein d'une ligne, il convient de préciser le nombre de colonnes qu'il occupe. Par conséquent, inutile de préciser manuellement la hauteur et la largeur de l'élément qui sera automatiquement dimensionné par le système de grille.

Bootstrap 4

<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
  </div>
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
</div>

W3.CSS

<div class="w3-container">
  <div class="w3-row">
    <div class="w3-col w3-half"></div>
    <div class="w3-col w3-half"></div>
  </div>
  <div class="w3-row">
    <div class="w3-col w3-third"></div>
    <div class="w3-col w3-third"></div>
    <div class="w3-col w3-third"></div>
  </div>
</div>

Conformément à la démarche de Responsive Web Design, le système de grille est capable de s'adapter en fonction de la largeur du media. Ceci explique pourquoi il est nécessaire d'ajouter un préfixe à la classe CSS précisant le nombre de colonnes occupées par l'élément HTML. Le tableau ci-dessous recense l'ensemble des préfixes pour les deux frameworks.

	< 576px	≥ 576px	≥ 600px	≥ 768px	≥ 992px	≥ 1200px
Bootstrap 4	`col-xs-`	`col-sm-`		`col-md-`	`col-lg-`	`col-xl-`
W3.CSS	`s`		`m`		`l`

Grâce à cette classification des largeurs d'écran, il est possible d'imaginer une mise en page pour chaque classe de support (smartphone, tablette, ordinateur). L'exemple suivant illustre cette démarche en définissant une mise en page en quatre colonnes pour les grands écrans, en deux colonnes pour les écrans moyens et enfin en une seule colonne pour les petits.

Bootstrap 4

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6 col-xs-12"></div>
    <div class="col-lg-3 col-md-6 col-xs-12"></div>
    <div class="col-lg-3 col-md-6 col-xs-12"></div>
    <div class="col-lg-3 col-md-6 col-xs-12"></div>
  </div>
</div>

W3.CSS

<div class="w3-container">
  <div class="w3-row">
    <div class="w3-col l3 m6 s12"></div>
    <div class="w3-col l3 m6 s12"></div>
    <div class="w3-col l3 m6 s12"></div>
    <div class="w3-col l3 m6 s12"></div>
  </div>
</div>

Selon le même principe de classes CSS, il est possible de cacher un élément HTML en fonction de la classe du support (smartphone, tablette, ordinateur).

Bootstrap 4	`d-sm-none`, `d-md-none`, `d-lg-none`, `d-xl-none` (cf. Hiding Elements with Bootstrap 4)
W3.CSS	`w3-hide-small`, `w3-hide-medium`, `w3-hide-large`

Et plus encore...

Chacun de ces frameworks propose une grande gamme de classes CSS et de composants JavaScript que je vous invite à expérimenter grâce à la documentation officielle.

Exercice Big Buck Bunny

Concevoir un document Web utilisant le framework Bootstrap 4 ou W3.CSS afin que sa mise en page soit conforme aux deux captures d'écran ci-dessous :

Le fichier bbb-assets.zip contient les images, la vidéo ainsi que les consignes concernant les couleurs et les polices à utiliser.

Correction