Commençons à jeter un oeil à la disposition des éléments selon les principes d'une grille, comme décrit dans la première partie de ce cours. Vous avez appris que l'utilisation d'une grille, qu'elle soit destinée à l'imprimerie ou au Web, permet d'organiser le contenu de façon à ce qu'il soit le plus cohérent possible.
Vous avez entrevu comment se crée une grille sur Photoshop. Le jeu maintenant va être de la recréer en CSS.
Entièrement en CSS ? Olala, mais cela va me prendre des heures ! Et je ne suis pas sûr-e d'avoir le niveau requis en CSS...
Ne vous inquiétez pas, vous n'allez pas avoir à créer votre propre grille par vous-même ! Nous allons utiliser une excellente grille responsive mise en place par les développeurs de Twitter : Bootstrap.
Qu'est-ce que Bootstrap ?
Bootstrap est un framework HTML, CSS et JavaScript incroyablement populaire. Il est souvent utilisé sur le Web : il l'est probablement sur les sites web que vous visitez régulièrement.
Bootstrap peut vous aider à tout niveau de développement, que vous travailliez avec des configurations de base ou que vous vouliez faire un travail de conception très personnalisé.
Dans ce cours, nous sommes particulièrement intéressés par Bootstrap pour deux raisons : sa réactivité et sa grille. L'utilisation de la grille Bootstrap vous permettra de construire un site qui s'adapte bien à différents appareils et à différentes tailles d'écran, sans trop de travail de développement intensif. Vous pouvez visiter http://getbootstrap.com pour plus d'informations sur l'outil lui-même.
La grille Bootstrap est un système de grille fluide de 12 colonnes qui se réarrangent selon la taille de l'écran de l'utilisateur en fonction des critères que vous définissez. Chaque row (ce qui signifie un groupe de contenu) de votre code sera divisée en groupes horizontaux de colonnes, et Bootstrap vous fournit des classes prédéfinies pour définir la largeur de chaque colonne. Vous avez certainement l'habitude de mesurer les choses avec des pixels, des pieds, des centimètres, des pouces, etc., mais si vous utilisez une grille Bootstrap, vous devez vous habituer à mesurer en colonnes !
Comment faire pour définir les critères pour une mise en page différente selon la taille de l'écran de l'utilisateur ?
La grille de Bootstrap étant responsive, elle s'adaptera à toutes les dimensions d'écran. En fait, elle reprend le concept de breaking-points que nous avons déjà vu pendant la première partie.
Souvenez-vous...
En général, nous retrouvons 4 breaking-points :
- Les très petits écrans (< 768 px : pour les écrans dont la largeur est comprise entre 0 px et 768 px)
- Tablettes (768 px - 991 px)
- Ordinateurs (992 px - 1199 px)
- Grands écrans d'ordinateurs et télévisions
Il nous faut donc "simplement" apprendre la syntaxe de Bootstrap et les classes adaptées aux différentes esquisses que nous avons déjà.
Comment "traduire" la maquette Photoshop en Bootstrap ?
Commencez par les deux premiers éléments qui sont côte à côte sur la maquette : le paragraphe "Picture perfect" et la photo du smartphone. En regardant vos esquisses, vous remarquerez que le paragraphe occupe un espace de 8 colonnes avant qu'il ne touche la photo du smartphone. Néanmoins, la photo se trouve sous le paragraphe et occupe 100% de l'espace quand on visite le site en utilisant un smartphone.
Comment peut-on faire ?
Nous pouvons indiquer le breaking-point et le nombre de colonnes directement dans la classe utilisée par Bootstrap :
class="col-XX-##"
Le XX sera soit xs, sm, md, ou lg. "Xs" sera applicable pour les appareils comme les téléphones (<768px), "sm" sera pour les petits écrans comme les tablettes (≥768px), "md" pour les écrans d'ordinateur moyens (≥992px), et "lg" s'appliquera pour les grands écrans (≥1200px).
Le ## sera le nombre de colonnes que l'élément devrait occuper. Vous pouvez combiner plusieurs règles de taille de l'écran en une seule déclaration. Par exemple :
class="col-md-8 col-sm-12 col-lg-6"
L'apprentissage de la grille de bootstrap pourrait être un cours complet en lui-même, donc si vous sentez que vous avez besoin de plus amples informations afin de comprendre la manière dont fonctionnent les colonnes, consultez ce chapitre de notre cours Bootstrap et la documentation de Bootstrap.
Ajoutez les différentes colonnes à vos différentes sections. Votre code va peu à peu ressembler à ceci :
<!DOCTYPE html>
<!-- Metatags, links to Bootstrap and stylesheets -->
<!-- Header -->
<!-- Section 1 -->
id="section_one"
class="container"
class="col-md-8"
Picture perfect
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
class="col-md-4"
src="images/phone.png"
<!-- Section 2 Description -->
id="description"
<!-- Section 3 Contenu mis en avant -->
id="featured_content"
<!-- Section 4 Details -->
id="details"
<!-- Section 5 Big picture -->
id="big_picture"
<!-- Section 6 A propos -->
id="about"
<!-- Section 7 Gammes de prix -->
id="price_ranges"
Prenez un peu de temps pour mesurer la largeur de chaque élément majeur dans les colonnes, et incorporer une balise div dans votre code HTML avec la classe de taille de la colonne appropriée. Il suffit simplement de continuer à construire le code en suivant l'exemple ci-dessus ! Une fois que vous avez la largeur des colonnes mis en place, vous pouvez placer des éléments à l'intérieur, et Bootstrap réglera le reste pour vous (et s'occupera d'adapter votre site selon les écrans).
