Front-end frameworks

Un front-end framework 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 front-frameworks existants, deux sont particulièrement populaires.

Bootstrap logo

Bootstrap

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/

Materialize logo

Materialize

Développé par un groupe d'étudiants de Carnegie Mellon University, il implémente les principes du Material Design proposés par Google.
http://materializecss.com/

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 et Materialize.

Bootstrap

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Latest compiled and minified Bootstrap's CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Bootstrap's optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified Bootstrap's JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Materialize

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Import compiled and minified CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
  </head>
  <body>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--Import compiled and minified JavaScript-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
  </body>
</html>

Système de grille

L'avantage principal d'un front-end framework 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

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

Materialize

<div class="row">
  <div class="col m6"></div>
  <div class="col m6"></div>
</div>
<div class="row">
  <div class="col m4"></div>
  <div class="col m4"></div>
  <div class="col m4"></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.

< 600px < 768px ≥ 768px ≥ 992px ≥ 1200px
Bootstrap col-xs- col-sm- col-md- col-lg-
Materialize 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

<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>

Materialize

<div class="row">
  <div class="col l3 m6 s12"></div>
  <div class="col l3 m6 s12"></div>
  <div class="col l3 m6 s12"></div>
  <div class="col l3 m6 s12"></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 hidden-xs, hidden-sm, hidden-md, hidden-lg
Materialize hide, hide-on-small-only, hide-on-med-only, hide-on-med-and-down, hide-on-med-and-up, hide-on-large-only

Icônes

Bootstrap propose un jeu d'icônes stockés sous la forme d'une police de caractères. Ainsi l'aspect de ces icônes est indépendant du niveau de zoom (représentation vectorielle) contrairement à des images PNG ou GIF (représentation matricielle).

I <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Paris!
<span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
I Paris!

Font Awesome propose une collection d'icônes encore plus riche, incluant notamment des logos de sociétés.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<i class="fa fa-firefox"></i> Mozilla Firefox<br>
<i class="fa fa-chrome"></i> Google Chrome<br>
<i class="fa fa-edge"></i> Microsoft Edge<br>
<i class="fa fa-opera"></i> Opera
Mozilla Firefox
Google Chrome
Microsoft Edge
Opera

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 40 Big Buck Bunny

Concevoir un document Web utilisant le framework Bootstrap 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