Layout rigolo (et responsive)

Ouvrez la console de votre navigateur, vous trouverez des informations…

Les recommandations de Google sont de plus en plus strictes, voir impossibles à suivre. Paradoxalement, alors que les terminaux sont de plus en plus puissants, les seuils d'alerte diminuent (alerte à partir de 800 éléments dans la balise body).

L'idée à la base…

• Une page avec un contenu de 1440px ( sur base :root à 16px) ;
• Des blocs en pleine largeur ;
• Une navigation sticky (et pas fixed) sans JavaScript ;
• Un XPath « léger » ;
• De jolis Landmarks parce qu'on aime bien le HTML5 et l'accessibilité. Si si !
• Des variables CSS pour s'amuser (mais pas pour IE) ;
• Et zou !, soyons fous : du Responsive Web Design (Conception Web Réactive, pour faire plaisir à l'Académie). En plus.

Nous savons tous faire ça, mais avec quelle méthode ?

Depuis des lustres, nous voyons (et faisons) des div qui contiennent des div et qui contiennent des div, pour afficher un texte qui est suivi d'une image dans une div. Certainement parce que les table nous manquent trop trop trop.
Comme on aime bien les div, on a mis tout ça dans une grosse div englobante avec le très parlant petit nom de content ou le non moins explicite surnom de body. Ben oui, chez les intés on n'est pas des couillons, té !

Et si on repartait de zéro ? Retour au body. Et oui, c'est un container cette chose là.
En y regardant bien, ce que tu lis en ce moment est pile dans une jolie zone toute bien calée : c'est le body de la page dis donc !!
Sauf que là, on lui a dit toi mon coco, tu ne dépasses pas les 1440px !. Si depuis je n'ai pas changé les variables, mais ce n'est pas hyper !important.

Le graphiste s'amuse !

Bon ok, le graphiste a bien tenté de dire au client ça va pas être hyper simple de balancer des images en pleine largeur !. Ce à quoi le client à forcément répondu Ouais, je sais… Et ?. C'est imparable, c'est le client.

Du coup, on a l'air malin maintenant. Va falloir faire des div partout, des calculs à la noix, gérer les viewports… Raaaaaaaaa !!
Beh pas trop finalement, on a LE tips. Easy indeed, relâchement, zenitude.
Aller hop, on code !
heu… ouais, mais ton truc il est dans le body et lui, il ne va pas au bord avec ta manie d'enlever les div !
Pas grave ça, prend mon calc() magique !! Deux margin et c'est plié !

Le bout de CSS

.hero-content {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.size-body {
  width: var(--size-body);
  max-width: calc(100vw - var(--gutter));
  margin-left: auto;
  margin-right: auto;
}
/* view-source pour voir la CSS complète */

Comment ça fonctionne ? C'est tout bête :

• Le html fait 100% du viewport ;
• Le body fait 1440px (90rem) défini dans une variable CSS, avec un max-width à calc(100vw - var(--gutter)) de telle sorte qu'il n'aille jamais coller les bords de la fenêtre, même celle-ci fait moins que cette valeur. Vive le responsive… ;
• le bloc .hero-content passe en bords perdus. La version plus hype de la Direction Artisitique est « immersif » ;
• on place juste un container dans le .hero-content sur lequel s'appliquent les mêmes règles CSS que celles du body.