CSS : Positionnement et mise en page

Appréhender les différents modes de grille

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez 960.gs qui est l'un des frameworks CSS proposant l'usage des grilles. Faites le tour des possibilités qui s'offrent à vous.
03:32

Transcription

Nous avons parlé de 960.gs parce qu’en fait cela a été le premier framework de css basé sur les grilles qui est apparu. Mais il existe plusieurs autres types de framework, qui utilisent tous des technologies différentes basées sur le float, sur le display inline, sur le flex etc, peu importe la technologie on le verra par la suite. Mais en fait ils ont un résultat qui vont proposer soit des grilles fixes, liquides, sur le nombre d’or qui sont personnalisables, adaptés à des préprocesseurs, et qui même deviennent standards. Alors je vous propose de faire le tour rapide de quelques-uns, et je vous invite à taper dans google framework css grid, et vous allez voir vous en avez une grande quantité. Ici responsive grid css qui permet de placer très rapidement un framework qui va permettre d'avoir une grille responsive et c’est quelque chose de très simple à mettre en place. Simple grid qui est, comme son nom l’indique, une grille qui est très légère, et qui donc, pour quelques kilo-octets, vons nous permettre de pouvoir présenter un divers mode de colonne et vous voyez que tous ici peuvent faire des colonnes de 1 à 7, des colonnes de 1 sur 10, 1 sur 11, et c’est lui qui va gérer l’intégralité de cette mise en page très rapidement, et c’est lui qui est basé sur du 11 40 au lieu de 9 60 comme on l’avait vu au par 9 60 au départ. Ici golden grid system qui se base, comme son nom l’indique sur le nombre d’or, mais qui en fait fait partie de quatre modèles de travail qui sont bi-directionnels [ce] qui est même assez expérimental, qui est un frameless qui permet de définir des colonnes et des gouttières qui vont s’adapter à la largeur de l’écran et ils vont s'ajouter au fur et à mesure que l’on va agrandir l’écran, less framework, qui est la poursuite du travail basé sur less, et donc on va s’apercevoir que l’on peut avoir comme ça un grand travail basé sur les grilles grâce à cette approche ici. Gridpack qui permet de personnaliser ces grilles donc de dire, voilà je veux travailler en 8 colonnes avec un padding de 2,5 %. Je veux une gouttière qui soit plus importante, donc de toutes petites colonnes, et donc on va pouvoir travailler comme ça, et une fois que l’on aura terminé la mise en place de notre grille, on va pouvoir télécharger directement le framework ici pour l’utiliser. Bourbon qui est une librairie de Sass nous propose NEAT. NEAT est un mode grille qui s’adapte à Bourbon. Mais vous avez d’autres modèles qui se basent sur Sass comme par exemple MUELLER qui va être aussi un autre outil assez sympa puisque eux ne rentrent pas dans notre site en sémantique dans le sens où on n’aura pas besoin d’aller venir surcharger nos balises html, on va redéfinir les classes directement dans notre pré processeur. Mais si vraiment vous voulez passer à la cavalerie au-dessus, vous avez Susy qui est un framework complètement hallucinant qui va vous permettre de pouvoir cadrer des grilles des plus complexes possibles, et imbriquer des grilles dans des grilles et puis vous avez une autre librairie qui se charge pour venir completer Susy qui est Britpoint qui va nous permettre d’aller encore plus loin dans ce travail-là. Et vous avez également un autre petit nouveau dans la bande qui arrive qui est tuktuk et qui va nous permettre d’approcher des modèles grilles directement depuis un pré processeur et donc de pouvoir rendre des mises en page qui pourront être complexes. Et puis le dernier élément qui est loin d’être négligeable qui est le css grid layout module level 1 qui est en fait un travail de recommandation du W3C, proposé directement d'afficher des grilles, de gérer des grilles et la mise en page de nos éléments, directement en se basant sur un standard, pris en compte dans nos navigateurs de manière native, et sans devoir passer par des librairies ou des préprocesseurs externes.

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 !