Le layout rigolo

Et encore… Quand on dit « rigolo », il n'y a bien qu'un inté que ça peut amuser.

L'idée à la base…

  • Une page avec un contenu de 1200px (75rem sur base root à 16px);
  • Des blocs en pleine largeur;
  • Une navigation sticky 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 our IE)
  • Et zou, soyons fous : du Responsive Web Design (Site Web Adaptatif, 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 ?». 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

.full-view {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.body-width {
    width: var(--body-width);
    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 75rem défini dans une variable CSS, avec un max-width à calc(100vw - var(--gutter)) de tel sorte qu'il n'aille jamais coller les bords de la fenêtre.
  • le bloc .full-view passe en bords perdus
  • on place juste un container dans le .full-view sur lequel s'applique les même règles CSS que celles du body
Soutenez Aquinum
Voir aussi…
  • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
  • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
  • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass et exemple d'intégration SVG via xlink compatible CSS. SVG encoder, base64 SVG pour CSS.
  • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG
  • Responsive SVG Utilisation des media queries internes au SVG
  • LazyLoad Intersection Observer LazyLoad avec IntersectionObserver API pour images, picture, iframe, etc.
  • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
  • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
  • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran
  • Zipcode patterns Contrôle automatisé de codes postaux internationaux
  • Responsive background-image jQuery responsive background-image plugin
  • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). SVG drapeaux pour internationalisation de sites multilingues.
  • Layout rigolo Une autre approche pour définir un layout de page responsive.
  • Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end
  • Générateur de Lorem Outil de génération de Lorem Ipsum. Utilisable en ligne ou par url distante.
  • Générateur de noms API de génération de couples prénom/nom aléatoires.

Et hop ! Le bloc pleine largeur

Panoramix & Otis

« – C'est une bonne situation, ça, scribe ?»

« – Mais vous savez, moi je ne crois pas qu'il y ait de bonnes ou de mauvaises situations. Moi, si je devais résumer ma vie, aujourd'hui avec vous, je dirais que c'est d´abord des rencontres, des gens qui m'ont tendu la main peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi. Et c'est assez curieux de se dire que les hasards, les rencontres forgent une destinée. Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l'interlocuteur en face, je dirais le miroir qui vous aide à avancer.
Alors ce n'est pas mon cas, comme je disais là, puisque moi au contraire j'ai pu, et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie, je ne suis qu'amour. Et finalement quand beaucoup de gens aujourd'hui me disent : « Mais comment fais-tu pour avoir cette humanité ? » eh bien je leur réponds très simplement, je leur dis : « C'est ce goût de l´amour », ce goût donc, qui m'a poussé aujourd'hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi.»

Musée d'art moderne - Istanbul © kortic

Voilà voilà… Pas grand chose à faire en plus et là, cher toi, ton XPATH et super light !
Le h3 du monologue d'Arthur, ci-dessous, a une profondeur de /html/body/main/div[3]/div/h3.
Autant dire que quand tu vas parser le DOM, ça va décaper !!

Et un autre bloc pleine largeur

Kaamelott, Arthur.

« Eh bien, c’est l’histoire d’un petit ourson qui s’appelle... Arthur. Et y’a une fée, un jour, qui vient voir le petit ourson et qui lui dit : – Arthur tu vas partir à la recherche du Vase Magique. Et elle lui donne une épée hmm... magique (ouais, parce qu’y a plein de trucs magiques dans l’histoire, bref) alors le petit ourson il se dit : – Heu, chercher le Vase Magique ça doit être drôlement difficile, alors il faut que je parte dans la forêt pour trouver des amis pour m’aider.
Alors il va voir son ami Lancelot... le cerf (parce que le cerf c’est majestueux comme ça), heu, Bohort le faisan et puis Léodagan... heu... l’ours, ouais c’est un ours aussi, c’est pas tout à fait le même ours mais bon. Donc Léodagan qui est le père de la femme du petit ourson, qui s’appelle Guenièvre la truite... non, non, parce que c’est la fille de... non c’est un ours aussi puisque c’est la fille de l’autre ours, non parce qu’après ça fait des machins mixtes, en fait un ours et une truite... non en fait ça va pas. Bref, sinon y’a Gauvain le neveu du petit ourson qui est le fils de sa sœur Anna, qui est restée à Tintagel avec sa mère Igerne la... bah non, ouais du coup je suis obligé de foutre des ours de partout sinon on pige plus rien dans la famille... Donc c’est des ours, en gros, enfin bref... Ils sont tous là et donc Petit Ourson il part avec sa troupe à la recherche du Vase Magique. Mais il le trouve pas, il le trouve pas parce qu’en fait pour la plupart d’entre eux c’est... c’est des nazes : ils sont hyper mous, ils sont bêtes, en plus y’en a qu’ont la trouille. Donc il décide de les faire bruler dans une grange pour s’en débarrasser... Donc la fée revient pour lui dire : "– Attention petit ourson, il faut être gentil avec ses amis de la forêt" quand même c’est vrai, et du coup Petit Ourson il lui met un taquet dans la tête à la fée, comme ça : " – BAH !".
Alors la fée elle est comme ça et elle s’en va... et voilà et en fait il trouve pas le vase. En fait il est... il trouve pas... et Petit Ourson il fait de la dépression et tout les jours il se demande s’il va se tuer ou... pas...»

Rome inside © kortic

Et la suite ?

J'ai envie de dire : « – view-source !»
C'est juste une base de layout de page, y'a plus qu'à !
Petite précision : sous Internet explorer, les var() CSS, on oublie. Tout comme le sticky CSS. Minimum Egde !

2020-06-03