HTML5 et CSS3

CSS 3 - Responsive Web Design

Introduction

Le nombre de media permettant de visualiser une page web se sont fortement multipliés ces dernières années et la capacité d'affichage ces terminaux est également fort variable. Pensez par exemple à un écran 30 pouces et un smartphone.

Media queries

CSS3 apporte donc un mécanisme capable de cibler un média précis et d'adapter les styles en conséquence. On parle de Responsive web design autrement dit un design qui s'adapte au type de media.

En CSS3, les Media Queries permettent de faire du Responsive web design.
Analysons l'exemple ci-dessous : 

@media screen and (max-height:500px)
{
	header {display:none;}
}

Dans cet exemple, nous voyons que nous ciblons les médias de type screen à savoir les écrans d'ordinateurs, les tablettes, smartphones et nous regardons si la hauteur du navigateur est inférieure à 500 pixels. Dans ce cas, le header disparait ! Cet exemple est implémenté dans ce syllabus, essayez de réduire la hauteur de la fenêtre de votre navigateur pour vous en rendre compte.

Voici les différents mot-clé media disponibles et leur signification. Il s'agit des plus courants.

braille

Terminal braille.

print

imprimante.

projection

data-projecteur.

screen

écran d'ordinateur, tablette, smartphone.

Et voici les différentes propriétés qui peuvent être testées. Il s'agit des plus courantes.

min-width

largeur du navigateur > N pixels

max-width

largeur du navigateur < N pixels

min-height

hauteur du navigateur > N pixels

max-height

heuteur du navigateur < N pixels

orientation : portait | paysage

Ecran en mode portait ou paysage

Important Pour cette partie, vous devez être capable de réaliser un petit media query (similaire à l'exemple ci-dessus).

Framework CSS

Introduction

Grâce aux Media Queries, nous pouvons réaliser des sites Responsive . Cependant la mise en place de ces Media Queries est lourde à effectuer pour le développeur. Lors de la création d'un site Web, vous avez sans doute également remarqué que la tâche la plus consommatrice est le CSS. En effet, le positionnement n'est pas aisé et les tests sont obligatoires pour s'assurer du résultat final et ceci sur plusieurs navigateurs.

C'est pourquoi différents framework CSS ont vu le jour dans le but de diminuer la charge de cette tâche pour le développeur.

Information Un framework est un terme courant en informatique.
Ce mot désigne un ensemble d'outils et de composants logiciels structurés. On parle de bibliothèque logicielle.
Ces frameworks ont pour but de faciliter le travail du développeur.

Bootstrap

Un des framework CSS le plus connu est Bootstrap. Il a été conçu par les développeurs de Twitter et est rapidement devenu le framework CSS le plus utilisé.

Voici les éléments principaux qui composent Bootstrap :

Positionnement avec Bootstrap

Bootstrap utilise un système de grille qu'il faudra utiliser pour positionner nos différents éléments HTML. Cette grille est constituée de lignes (row) et de colonnes (col) sachant qu'il y a au maximum 12 colonnes.

Exemple : je veux créer un site comportant une zone à gauche(menu) et une zone centrale 

<div class="container-fluid">
	<section class="row">
		<article class="col-lg-4"> ... </article> 
		<article class="col-lg-8"> ... </article>
	</section>
</div>

Analysons cet exemple.
Pour pouvoir utiliser la grille, Bootstrap demande que l'entièreté du site soit encapsulé dans une division associée à la classe container-fluid. Ceci permet à Bootstrap de rendre votre site Responsive.
Ensuite nos différentes zones peuvent se placer sur la grille. On définit ici une seule ligne qui est composée d'une zone comportant les 4 premières colonnes de la grille, suivit d'une zone(tjs sur la même ligne) comprenant les 8 dernières colonnes.

Vous le voyez le positionnement a été grandement facilité. Bien sûr on peut définir plusieurs lignes (row). On peut donc avoir une ligne comptant 12 colonnes (header) suivit par une ligne comptant une zone de 4 colonnes et une zone de 8 colonnes.

Remarquez également que Bootstrap utilise des classes, le choix des éléments HTML article et section dans l'exemple précédent appartient au développeur. N'oubliez donc pas les bonnes habitudes apprises avant Bootstrap notamment sur l'utilisation des balises sémantiques.

Dans l'exemple, ces sont des classes col-lg-* qui ont été utilisées. Sachez qu'il existe également des versions col-xs-*, col-sm-*, col-md-* de ces classes. xs, sm, md et lg définissent en fait le type d'écran pour lequel le site a été conçu. La taille des colonnes étant évidemment différente sur un smartphone(xs), sur une tablette (sm), sur un écran de bureau (md) et sur un écran large.

Les classes Bootstrap

Bootstrap propose différentes classes permettant d'embellir votre site ou de l'enrichir avec des composants prêts à l'emploi. Evidemment pour pouvoir les utiliser, il faut connaître ces classes et savoir comment les utiliser. Le site de de W3School propose justement la liste des composants bootstrap ainsi qu'un exemple l'illustrant.

Important Pour le projet, vous pouvez utiliser Bootstrap !!!