CSS : Positionnement et mise en page

Comprendre et utiliser les grilles

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Commencez par décrire l'origine des grilles et définissez leur rôle au sein de vos visuels. Puis, explorez leur premier modèle CSS et suivez son évolution en fonction des besoins.
05:21

Transcription

Avant d’aller plus loin dans la construction de nos pages, on va regarder une notion qui peut être très utile pour nous aider dans la composition des contenus et surtout pour les coder. On va voir que même le futur des CSS va également vers là. Ici, si je regarde cette ancestrale mise en page en tableau, on a des colonnes qui nous permettent de mettre de contenu en place Et ces colonnes, en fait, elles correspondent à certaines largeurs et puis on peut avoir des espaces entre ces colonnes ici ou pas, comme on peut avoir des espaces ici sur les bordures, etc. ou pas. Donc il y a eu un travail qui a été fait sur la mise en page papier, à l’époque, pour pouvoir rendre le document le plus lisible possible, améliorer la lisibilité des contenus et Mark Boulton, il y a quelques années déjà en 2005, commençait à faire un travail sur le découpage de cette mise en forme papier. Alors au départ on n’est pas sur du A4 on est sur du B4, le format américain, le format en inch ici, mais peu importe, ce qui est intéressant c’est de voir comment va se positionner son raisonnement. En fait en découpant ces contenus et en découpant ces contenus en 2 puis en 3, on arrive à obtenir une certaine grille ici, et avec cette grille, en fait, on va pouvoir placer des contenus à l’intérieur pour accroitre la clarté, la lisibilité de ces contenus. Et Mark Boulton est parti en disant qu’en prenant des rapports de subdivision de nos pages, on va pouvoir rentrer dans des grilles un peu plus complexes, et il a continué à le développer en disant qu’on peut le porter sur le web, et on peut le porter de manière fixe ou de manière fluide. En plus de ce qu’on a rencontré tout à l’heure avec l'adaptative et le responsive ici, je vous invite à lire l’intégralité de ce travail, de cette étude qui avait été faite à l'époque par Mark Boulton. Alors cela a donné naissance à des systèmes de grille, et notamment un des premiers les plus connu ça a été 960, alors, pourquoi 960 ? Déjà parcqu'à l’époque les écrans n’étaient pas supérieurs à 1024, déjà en arrivant à 1024 c’était beaucoup, 1200 pour les plus riches, mais les moniteurs les plus fréquemment rencontrés c’était du 1024 et donc 960 c’était la dimension la plus proche de 1024, qui soit plus petite qui puisse rentrer dans l’écran, et surtout qui soit divisible par un grand nombre de facteurs. Les seuls facteurs qui n’étaient pas divisibles c’était 7 et 9, essayez de diviser 960 de 1 à 10, vous allez voir que tout se divise. Donc je peux faire une colonne, deux colonnes, trois colonnes etc, pour pouvoir découper mon information. Mais surtout, c’est que je peux avoir un ensemble global par douze, donc je vais pouvoir le diviser par douze, cela me fera 8 pour le contenu et 4 pour les side, et puis cela peut aller jusqu’à 16, 24 pour avoir la granularité la plus forte. Alors si on reste ici sur 960, on peut avoir un certain nombres de sites web ici. Et puis il suffit de dire, fait moi voir la grille on me montre la grille pour voir comment le contenu à été découpé et où les gouttières ont été placées. Vous voyez ici je travaille sur une base de 12 colonnes, ici sur une base de 16 colonnes. Pourquoi ? Parce qu’ici j’ai eu besoin de découper en 3*4 12 et 1*4 ici pour cette colonne latérale. Donc vous voyez qu’un grand nombre de possibilités va s’ouvrir sur ces grilles-là. Sauf que ces grilles sont restées un peu rapidement obsolètes puisqu’on est arrivé sur le web responsive, le web adaptatif, et surtout les générations d’écran un peu plus grands, un peu plus forts qui rendaient 960 vraiment un site un peu petit. Donc il est arrivé adapt.js qui lui déjà s’affranchissait déjà de la problématique de la prise en compte ou non des média query par les navigateurs, mais en plus permettaient d’avoir différentes feuilles de style en fonction des types d’écran sur lesquels on veut travailler. Et puis cela a eu besoin d’évoluer encore en disant qu’on a besoin d’un web qui soit proportionnel, donc en pourcentage, donc on ne travaillait plus avec un mode grille mais avec un mode grille en pourcents, donc plus du pixel mais du pourcent, et surtout cela devenait asémantique, il fallait rajouter, on le verra dans une autre étape, un certain nombre de classes , classe=grid 50, classe=alpha, Oméga, push-x, pull-x, tout ça pour pouvoir indiquer ce que l’on voulait faire avec cette colonne et ce bloc, mais cela rendait notre html pollué et non sémantique et donc si on voulait travailler avec un préprocesseur comme Sass, en sémantique on quitte l’évolution de Adapt.js qui lui-même était l’évolution de 960, donc pour pouvoir rendre des classes personnalisées et utiliser un html structuré et en sémantique comme on le souhaitait. Donc en partant du travail d’étude de Mark Boulton sur comment et pourquoi utiliser des mises en page en grille, on voit que l’on peut avoir des framework directement comme 960 qui vont nous permettre de le réaliser. Mais cela ne s’arrête pas là, on va voir que l’on peut avoir des outils, comme par exemple fireworks qui vont me permettre de directement me proposer de travailler sur un modèle, et quand je vais travailler sur un modèle, je vais pouvoir travailler sur des grid-systems, et on verra pas la suite qu’il y a plusieurs grid system comme Golden Grid, Blueprint, Frameless, Less, 960 notamment, je vais donc pouvoir avoir des templates de démarrage qui sont déjà préparées, avec un certain nombre de colonnes, des goutières à travailler, et je n’ai plus qu’à venir poser mes contenus ici, qu’il s’agisse de composants ou qu'il s'agisse de mises en page, je vais pouvoir directement les travailler là-dessus pour avoir une meilleur portabilité et ensuite pour du positionnement CSS.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !