Posts taggés responsive

Bootstrap 3

4

Twitter Bootstrap est un framework CSS et JavaScript vous permettant de créer un site web, responsive ou non, rapidement et simplement. Il existe actuellement deux versions, nous vous parlerons de la version la plus récente : la 3.

 

Prérequis

Afin de comprendre simplement la mise en place et l’utilisation du framework, il est préférable de comprendre correctement le système de grilles. Pour ceux qui ne l’ont pas encore assimilé, pas d’inquiétude, nous y revenons plus loin…

Bootstrap 3 étant intégré en partie avec LESS.JS, vous pouvez continuer d’utiliser ce framework mais ce n’est pas obligatoire.Vous ne savez pas ce qu’est LESS.JS ? Retournez lire l’article dédié sur le blog de Webnet ici. Pour télécharger Bootstrap, rendez-vous sur le site officiel.

 

Petit tour d’horizon…

Lorsque vous téléchargez et ouvrez le dossier Bootstrap, vous vous rendez compte qu’il y a énormément de fichiers et dossiers présents. Pas de panique ! Ça peut paraître impressionnant mais dans le fond, ça ne l’est pas…

 

Bootstrap - Organisation des fichiers

Bootstrap – Organisation des fichiers

 

Les fichiers les plus importants sont :

  • bootstrap.css ou bootstrap.min.css correspond au thème de base (couleurs, polices, colonnes, icônes…) et se trouve dans le dossier dist/css.
    Préconisation 
    : si vous avez des modifications à apporter aux styles Bootstrap, créez-les dans une nouvelle CSS.

 

  • bootstrap.js regroupe l’ensemble des plugins proposés par Bootstrap (carrousel, modales, alertes…). Ce fichier se trouve dans le dossier  dossier dist/js. Sachez que vous pouvez inclure individuellement chaque plugin proposé (dans le dossier js à la racine du dossier Bootstrap)

 

Notez que vous devrez inclure jQuery pour faire fonctionner les plugins JavaScript.

 

 Template Bootstrap de base

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

Bootstrap 3 est codé en HTML5. Si vous l’ignorez, l’HTML 5 n’est pas interprété correctement sur Internet Explorer inférieur à la version 9. Pour résoudre ce problème, il vous faudra inclure le plugin html5shiv.js.

Vous remarquerez aussi l’appel au fichier respond.min.js. Nous vous expliquerons son fonctionnement un peu plus loin.

La balise meta viewport indique au navigateur le comportement qu’il doit adopter pour afficher la page. Cette balise est importante en matière de web responsive car elle permet de définir la largeur du « viewport » pour être de la même taille que l’écran de l’appareil utilisé pour consulter le site.

 

Côté CSS ?

Bootstrap vous propose un CSS déjà complet. Il vous met à disposition un certain nombre de classes qui permet de styler vos éléments sans faire d’efforts ! Sachez que vous pouvez styler intégralement votre site à partir du CSS proposé.

Certains éléments de bases sont formatés sans faire appel à une classe, comme par exemple les balises de titres, de paragraphe, de code … D’autres éléments nécessitent l’application de classe(s) particulière(s) pour appliquer un (des) style(s) ou comportement(s).

Prenons l’exemple d’un système de pagination dont le code sera :

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

 

Vous obtiendrez le résultat suivant :Pagination off

 

De ce résultat, vous souhaitez « désactiver » le premier élément et indiquer que  la page sur laquelle vous êtes est la première. Vous appliquerez donc les classes disabled et active de Bootstrap :

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  ...
</ul>

 

Et vous obtiendrez :

Pagination 1-ON

 

Afin de vous familiariser avec les constructions de code et l’existence des classes propres à Bootstrap, nous vous conseillons de vous rendre sur le site officiel, dans les rubriques CSS et Components.

Lorsque vous vous rendrez dans la rubrique  Components, vous verrez que le framework vous met à disposition un certain nombre d’icônes :

Icones bootstrap

 

Sachez que ces icônes sont créés grâce à la police glyphicons-halflings-regular présente dans le dossier font à la racine du dossier Bootstrap téléchargé. Si vous souhaitez utiliser ces icônes, n’oubliez surtout  pas d’importer cette police exotique! 🙂

 

Intégrer pour Bootstrap

Avant de vous lancer tête baissée dans l’intégration de votre propre template, vous devez comprendre la logique d’intégration proposée par le framework.

Site non responsive

Si vous réalisez un site qui n’a pas pour but d’être responsive, vous pouvez donc procéder simplement en créant votre / vos feuille(s) de styles, de préférence sans toucher à la CSS de base de Bootstrap.

Lorsque vous créez votre template HTML, faites attention à l’ordre d’appel des feuilles de styles 🙂

 

<link href="css/bootstrap.min.css" rel="stylesheet">
link href="css/ma_feuille_de_style.css" rel="stylesheet">

 

Pourquoi ?
Rappelez-vous que Bootstrap propose un reset complet et un grand nombre de style pour un certain nombre de composants web. Pour que vos styles et/ou surcharges soient correctement interprétés, il faut donc appeler votre CSS après celle de Bootstrap.

 

Site responsive

Rappels sur le système de grille
Une grille permet le découpage d’une page web en cellules de même dimension. Le contenu de la page peut donc être organisé sur une ou plusieurs cellules :

 

bootstrap - principe de la grille

 

La grille de Bootstrap
La grille de Bootstrap est composée de 12 colonnes et de gouttières de 30px (15px pour chaque côté d’une colonne).

Sur le schéma ci-dessous, chaque colonne correspond à une cellule ayant pour classe .col-md-1. Si vous souhaitez créer une cellule correspondant à 8 colonnes alors vous appliquerez la classe .col-md-8 et ainsi de suite.

bootstrap3_grille_02

 

 

Pour composer votre grille, vous devez suivre un schéma strict :

<div class= « container »>
  <div class= « row »>
    <div class= « col-md-8 »>
       Mon texte sur 8 colonnes
    </div>
    <div class= « col-md-4 »>
       Mon texte sur 4 colonnes
    </div>
  </div><!-- FIN ROW -->
</div><!-- FIN CONTAINER -->

Notez que vous devez toujours constater la présence des 12 colonnes.

 

Une bonne méthode d’intégration
Avant toute chose, vous devez comprendre la logique du framework… C’est une des priorités si vous ne voulez pas recommencer votre travail 🙂

Sachez que Bootstrap3 est intégré selon la méthode Mobile First, c’est à dire que l’on intègre pour le plus petit device (le mobile) pour enrichir après les écrans plus larges. C’est une méthode d’intégration assez séduisante car on commence avec un design assez épuré, puisque les éléments « inutiles » n’ont pas leur place sur les intégrations pour mobiles, pour ensuite se diriger vers un design plus complet.
Assimilez bien cette notion avant de lire la suite, puisque nous continuerons cet article en pensant « Mobile First ».

 

 

Côté HTML

C’est maintenant qu’il faut reprendre l’utilisation de la grille Bootstrap. En effet, le framework vous met à disposition 4 classes permettant de cibler chaque type de device.

Mobiles
(<768px)

 Tablettes
(≥768px)

 Écrans moyens (≥992px)

Écrans larges (≥1200px)

Préfixe de la classe

.col-xs-

.col-sm-

.col-md-

.col-lg-

Taille du conteneur principal

Auto

750px

970px

1170px

Taille maximale d’une colonne

Auto

60px

78px

95px

Prenons le code suivant :

<div class="featurette">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

<img class="featurette-image img-responsive" src="url/de/l/image">
</div>

 

Pour obtenir l’affichage suivant :

 

bootstrap - First feaurette heading 1

 

 

Pour les devices ayant une résolution supérieure à 992px, nous souhaitons obtenir le résultat suivant :

bootstrap - First feaurette heading 2

 

Il nous faut donc retoucher le code de base de la manière suivante :

<div class="row featurette">
<div class= "col-sm-8">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class= "col-sm-4">
<img class="featurette-image img-responsive" src="url/de/l/image">
</div>
</div>

 

Comme vu précédemment, la classe .col-sm-* cible les devices ayant une résolution minimale de 992px. Si vous voulez cette même présentation pour les devices plus grands, vous n’avez pas besoin de rajouter les classes correspondantes.

En revanche, si vous vouliez obtenir un autre affichage, vous devez jouer avec les classes propres à chaque type de device. Par exemple :

<div class="row featurette">
<div class= "col-md-8 col-lg-9 col-sm-6">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class= "col-md-4 col-lg-3 col-sm-6">
<img class="featurette-image img-responsive" src="url/de/l/image">
</div>
</div>

 

Vous remarquerez que, quel que soit le préfixe de classe utilisé (col-lg-*, col-md-*, col-sm-*), nous pouvons toujours constater la présence des 12 colonnes (8+4 \ 9+3 \ 6+6).

 

Côté CSS

Nous vous proposons de créer deux feuilles de styles différentes.

La première correspondra à la feuille de style « mobile » qui contiendra les styles communs ainsi que les spécificités pour le mobile. Notez que tous les devices, quel que soit leur résolution, seront ciblés.

La seconde sera la feuille « responsive » qui ciblera les différents devices grâce aux media queries suivantes :

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

 

C’est dans cette feuille de styles que vous effectuerez tous vos ajustements.

 Attention, il y a nouveau une petite subtilité ! Chaque media query déclarée ci-dessus cible une résolution minimale.

 Prenons le code suivant, déclaré dans une feuille de style nommée design.css (feuille de style dite mobile) :

.btn{
   background:#000 ;
   color:#fff ;
   text-transform:uppercase ;
   padding:10px ;
}

 

Ce code s’appliquera à toutes les résolutions puisqu’il n’est pas déclaré dans une media query mais dans la feuille de style commune.

Si maintenant vous souhaitez que cet élément ait un aspect différent pour les devices ayant une résolution minimale de 992px (c’est à dire 992px et plus), il vous faudra donc surcharger cette classe de la manière suivante :

@media (min-width: 992px){
   .btn{
      color:#f0f0f0;      
      padding:10px 15px ;
   }
}

 

Si vous voulez donner un autre affichage à ce bouton pour les très grands devices, il faudra  modifier le code de cette manière :

@media (min-width: 1200px){
   .btn{
      color:red;      
      padding:15px 20px ;
   }
}

Ainsi le code précédent ciblera uniquement les devices ayant des résolutions comprises entre 992px et 1200px.

La logique d’intégration de Bootstrap vous pousse donc à intégrer votre site en suivant le schéma :

 

bootstrap - schéma d'intégration

Le cas IE8

Si vous l’ignorez, IE8 n’interprète pas les balises HTML5 et propriétés CSS3.

Pour que Bootstrap3 soit compatible IE8, vous devez donc inclure HTML5SHIV.JS (comme vu au début de l’article) mais également respond.js pour lui permettre de comprendre vos media queries.

Sachez que respond.js ne fonctionne pas en local. Vous devrez donc tester vos pages compatible IE8 en utilisant le protocole HTTP(s).

Aussi, ce plugin ne fonctionne pas avec les feuilles CSS référencées via @import. Ce point est important pour les utilisateurs de Drupal puisque certaines configurations de ce CMS sont connues pour utiliser la règle @import.

Pour plus d’informations sur l’utilisation de respond.js, cliquez ici.

Bootstrap n’est pas supporté avec le mode de compatibilité d’Internet Explorer. Ainsi, pour l’empêcher, n’oubliez pas de déclarer la meta suivante :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

Avantages / inconvénients

Nous allons commencer par les inconvénients, car il n’y en a pas beaucoup!

Bootstrap est un gros framework qui nécessite de se plonger dedans pour en comprendre correctement le fonctionnement. Cette partie peut prendre un peu de temps, mais ce ne sera que bénéfique par la suite.
De plus, nous trouvons qu’il n’est pas pratique pour tester son site responsive sous IE8 car le plugin respond.js ne fonctionne pas en local.
Enfin, pour faciliter l’intégration de votre site sous Bootstrap, il est préférable d’avoir un design qui s’accorde avec la grille du framework…

Concernant les avantages, Bootstrap3 propose une structure et une méthodologie au goût du jour, ce qui vous permet de vous auto-former au web responsive ou de progresser.
C’est un framework qui est relativement simple d’utilisation et très accessible. Vous ne pouvez pas rester bloquer sur un point car la documentation en ligne sur le site officiel est très complète.
Lorsque vous vous êtes imprégnés du framework, votre vitesse de développement et de personnalisation des éléments existants est accrue.
Enfin, une bonne intégration permet une compatibilité optimale sur les différents navigateurs, même pour Internet Explorer (version 8 minimum) !

 

Avis personnel

Au premier abord, je n’accrochais pas avec ce Framework qui était une usine à gaz pour moi. Il faut dire que je l’ai découvert avec la version précédente et que j’ai eu beaucoup de mal à assimiler les nombreuses classes et le système des grilles …

Lorsque j’ai découvert la nouvelle version de Bootstrap, j’ai tout de suite accroché car elle est plus « user friendly » à mon goût. Lorsque l’on a assimilé le fonctionnement global, c’est un réel gain de temps ! Imaginez que vous réalisiez un site non responsive sous Bootstrap et que demain vous choisissiez de le transformer en site responsive. Et bien grâce à la structure carrée proposée par le framework, en ajoutant quelques classes, et en faisant des ajustements CSS, votre site devient responsive en un rien de temps (à condition qu’il soit bien intégré de base…)

Enfin, je trouve que l’utilisation du framework fait gagner énormément de temps sur le contrôle de la compatibilité navigateurs.

Essayer Bootstrap, c’est l’adopter ! 🙂

 

Picturefill, un plugin intéressant pour les images responsive…

0

…en attendant <picture>…

 

Les media queries permettent de contrôler en responsive les images servies en CSS pour les différentes résolutions des appareils mobile/desktop, mais rien n’a été prévu pour les images servies directement dans le contenu de la page HTML (balise <img>).

mobile

 

Une spécification est en cours au W3C, l’élément picture, qui permettra à l’avenir de régler le problème en permettant de déclarer différentes sources d’images gérées par les media queries au sein même de la balise.

Cela pourrait ressembler à ça :

 

<picture width="500" height="500">
       <source media="(min-width: 45em)" src="large.jpg">
      <source media="(min-width: 18em)" src="med.jpg">
      <source src="small.jpg">
      <img src="small.jpg" alt="">
     <p>Texte accessible</p>
</picture>

 

Une autre spécification concurrente est également en cours : l’attribut srcset, qui s’intègre directement dans la balise déjà existante <img> :

 

<figure>
       <img src="a-rectangle.png" srcset="a-square.png 600w"  alt="Texte alternatif">
       <figcaption>Légende de l’image</figcaption>
</figure>

 

Un groupement de communautés de développeurs a été créé par le W3C, pour permettre à tout développeur d’avoir un endroit où échanger sur les différents sujets des standards. Cela permet également au W3C d’impliquer directement les gens qui font le web, et avoir un retour sur leur vision des choses.

C’est ainsi que le collectif RCIG (Responsive Images Community Group) s’est créé, pour travailler sur les solutions possibles pour les images responsive.

 

C’est cette communauté qui propose l’élément picture, alors que la communauté des développeurs côté navigateurs pousse pour la solution srcset.

Le RCIG, magnanime, a donc proposé un mix des deux spécifications en incorporant l’attribut srcset dans l’élément picture.

 

En attendant, il faut bien trouver des parades sur des projets concrets aujourd’hui, notamment quand les contraintes ne vous permettent pas d’avoir un domaine réservé aux mobiles/tablettes et vous obligent à travailler en mode responsive.

 

Picturefill est un polyfill permettant de tirer parti de cette future spécification. Il émule le comportement de l’élément picture à travers un système de div.

 

<div data-picture data-alt="Texte alternatif">
        <div data-src="small.jpg"></div>
        <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
        <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
        <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
        <!-- Fallback pour les navigateurs sans JS. Image par défaut. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="Texte alternatif">
        </noscript>
    </div>

 

Le script génèrera une balise img dans la div data-picture, à la fin de la liste dont la source sera choisie par les media-queries selon la résolution détectée. Il n’y a pas de limite au nombre de versions d’images possibles.

Il est également possible de mettre des commentaires conditionnels IE, si vous souhaitez un ciblage particulier pour Internet Explorer.

 

Vous pouvez tester le script à cette adresse : http://scottjehl.github.io/picturefill/

On peut déjà se rendre compte du principe en redimensionnant la fenêtre du navigateur.

 

Quelques limitations tout de même : le plugin ne  marche que sur les navigateurs comprenant les media queries (exit IE jusqu’au 8). Quand ce n’est pas le cas, c’est la première image de la liste qui sera servie par défaut. Vous trouverez ci-dessous, le tableau récapitulatif des supports :

 

 

Browser

Support Type

Android 1.6 Webkit Full
Android 2.1 Webkit Comment fallbacks used
Android 2.2 Webkit Comment fallbacks used
Android 2.3 Webkit Comment fallbacks used
Android 4.x Webkit Full
iOS 4.3 Safari Comment fallbacks used
iOS 5.0 Safari Full
Opera Mobile Full
Chrome Mac (tested v17) Full
Opera Mac Desktop (tested v11) Full
Firefox Mac Desktop (tested v3.0+) Full
IE 6 Full (*no media query support, though)
IE 7 Full (*no media query support, though)
IE 8 Full (*no media query support, though)
IE 9 Comment fallbacks used
IE 10 Full