CSS : Positionnement et mise en page

Utiliser un préprocesseur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour des projets importants, il est intéressant de vous appuyer sur des préprocesseurs comme less ou sass. Ainsi, bénéficiez encore d'une grande souplesse !
08:46

Transcription

Enfin, pour des projets moyens à plus larges, il est plus important ou plus intéressant de travailler avec des préprocesseurs aujourd’hui. Tous les préprocesseurs s’appuient également sur les modes grilles. On en a vu dans les frameworks qui étaient installables directement depuis le mode grille. Par exemple, bootstrap a été porté, travaillé avec less maintenant et porté sous Sass. Il utilise les préprocesseurs, tous utilisent ces préprocesseurs ce qui vous permet de rester d’une part beaucoup plus souple dans la création des css, mais en plus d'avoir un aspect qui ne va pas pénaliser l’aspect sémantique de votre structure. Alors si vous avez simplement besoin d’appuyer une grille quelque part on a vu qu’il y avait des bookmarklet qui permettaient de le faire mais vous pouvez utiliser Compass qui propose un Layout avec un background Grid, alors ce n’est pas très puissant mais ça permet de dessiner un mode grille très simplement en CSS, et surtout, si vous utilisez un préprocesseur de pouvoir vous en séparer dès que nécessaire. Alors ici j’ai un simple fichier html. On va attaquer le css. Donc premier élément : c’est d’importer une libraire compass/layout/grid-background, de faire un import et puis ensuite de définir la largeur du container principal. Le container principal ça va être 960, dont le pad unité, ce sera des chiffres. On verra comment on va porter les unités pour être plus simple par la suite si on va travailler en pourcentage par exemple. De dire ensuite le grid-backrgound, c’est quoi ? C’est composé de colonnes. Combien il y a-t-il de colonnes ? Je vais en utiliser 12, et puis on va dire que je voudrais une gouttière de 10 pixels par exemple, qui va venir travailler. Alors là, on va rentrer maintenant dans des calculs parce qu’il va falloir définir la largeur de la colonne. Et pour connaitre la largeur de la colonne, il faut compter combien d’espaces gouttières je vais utiliser. L’espace gouttière c’est le nombre de colonnes moins un que je vais multiplier par la largeur de la gouttière. Donc ici, je vais connaître l’espace de la gouttière. Si je veux connaître l’espace qui me reste, le grid-background-column-width en fait va être égal à 960 dans le container width moins l’espace utilisé par les gouttières, et le tout divisé par le nombre total de colonnes. Ce qui va me donner maintenant une largeur de colonnes. On va pouvoir définir avec quelle unité on va travailler. On va travailler avec un pixel. Et maintenant, on va pouvoir passer au stylage de notre container. N’oublions pas ici, que notre container c’est cet élément [div wrap global] qui est une classe container ici. Donc si je lui dis : sa largeur est égale à container-width multipliée par l’unité, donc 960, parce que lui veut du pixel. Ruby s’adapte. Mais le css a besoin de pixels donc ici c’est ça. Et on va faire un margin: 0 auto simplement pour pouvoir centrer tout ce monde-là. Le problème, c’est que là c’est la seule chose en css qu’on va faire au niveau de notre page, parce qu’après on n’a pas de grilles dessus, mais ce qu’il nous faut c’est quand même demander de faire un include pour pouvoir demander d'afficher le grid-background. Par contre ce qu’il ne faut pas oublier, c’est que derrière puisqu’on a un préprocesseur il y a Ruby qui tourne et il y a un watcher, une sorte de commande qui permet de surveiller le dossier et qui fabrique des fichiers css à la demande chaque fois que nécessaire. Donc, si je bascule maintenant dans ma page ici et que j’actualise, on voit bien que ça s’est mis en page sur 12 colonnes, ça fait 960 pixels et j’ai mes 12 colonnes. Le gros intérêt maintenant d’avoir ce genre d’ustensiles-là, c'est que si je veux travailler à 1200 et d'avoir 16 colonnes, ici. Je garde le même nombre de gouttières et j’actualise, j’ai simplement à enregistrer. Je repasse dans ma page et quand j’actualise, on voit que je suis plus grand, et que cette fois-ci j'ai 16 colonnes qui sont affichées donc c’est assez sympa. La seule modification que je ferais par la suite dans mon fichier, c’est de venir commenter cet élément-là pour lui dire je ne veux plus afficher ma grille. Une autre possibilité va d’être d’utiliser Susy. Alors regardons deux secondes Susy ici. Susy est un outil complet qui va nous permettre de travailler le mode grille mais surtout le positionnement dans ces grilles de manière extrêmement puissante, extrêmement souple. On peut le coupler, on ne le fera pas ici mais je vous invite à vous rapprocher de notre catalogue avec des formations sur la mise en page responsive et Susy. On peut utiliser break point qui est une autre librairie qui va nous permettre d’aller encore plus loin sur les positionnements complexes. Alors ici, on va retourner sur notre page de départ, qui n’est pas stylée. Et on va venir travailler sur l’aspect scss. Alors première chose, attention, dans votre fichier de configuration si vous travaillez avec Ruby c’est de dire attention j’ai besoin d’utiliser Susy. Alors justement, puisqu'on a besoin d’utiliser Susy la première chose à faire c’est d’importer Susy, la librairie, pour travailler avec dans ce fichier-là. Ensuite, on va définir une variable Susy qui est simplement composée d’une map au niveau Ruby mais qui est un tableau si vous faites du javascript par exemple dans lequel on va définir certaines variables comme les colonnes, on va dire qu’on en veut 12, puis on va définir le container on veut un container qui fasse 960 pixels. Et puis on va surtout demander d’afficher cette image de grille. Donc là, on va pouvoir voir la grille. Alors je n’ai fait aucun positionnement mais vous voyez avec quelle souplesse on peut faire ce genre d'élément-là. On pourrait définir les colonnes, les gouttières... Là, pour l’instant j’ai juste fait ça, j’actualise ma page, et rien ne se passe parce qu'il me manque un élément majeur ici. C’est de pouvoir venir définir le container et de dire que j’inclus ce container dans la partie container ici. Donc j’inclus container. Ne pas confondre ce mot-là et ce mot-là. Ce mot là, c'est la classe qui est affectée à la balise div, et ça, c'est un mot clé Susy qui dit j’inclus un container. C'est-à-dire, je définis cet élément-là comme étant un container. J’enregistre. On bascule dans le navigateur. On actualise. On voit bien que notre grille est présente et puis le container s’est défini. Alors là on va aller assez rapidement sur le codage de la mise en place des éléments. Donc ici on sait qu’on a un header, il suffit d’utiliser le mixin span, et de l’étendre sur 12 colonnes, @include span sur 12 colonnes. Je fais 12 colonnes, pas besoin de spécifier plus, il va s’étendre sur 12 colonnes. Le aside, lui, on va lui faire pareil, un @include span 4 tout simplement. On va dire maintenant au main qu’on va faire un include span 8. Si j’enregistre et que je regarde ce qui se passe, on a un petit artefact qui peut se passer. Alors ici, s’il ne se passe pas, ça tombe bien. Mais il aurait pu nous causer des soucis. En fait si regardez, ça se passe. En fait, vous voyez que le main est là-dessous. C’est le footer qui remonte sur le côté droit. C’est-à-dire que le main, lui, n’a pas trouvé sa place ici. Il n’a pas trouvé sa place car il a une marge droite, et cette marge droite devra être supprimée. Pour cela, on va définir ce mixin ici, qu'on est le dernier élément. Et si j’enregistre et que je regarde sur ma page ici, et que j’actualise, on voit bien que maintenant le main est passé sur le côté. Voilà donc c’est très simple à utiliser on va continuer comme ça sur le footer à faire un 12. Si on veut styler le menu de navigation on va rajouter ici un nav ul, et on va dire à ce nav ul, je vais rajouter un horizontal list. Alors, déjà le ul va faire un span de 12. Il va s'étendre sur 12. Mais on va utiliser une librairie compass ici. Donc en disant : attention j’importe le fameux horizontal list qui va dire que ce container ici est un container à liste horizontale. Ce qui va me permettre de travailler sur un float en quelque sorte pour tous les éléments de li. Donc maintenant, mes éléments de li, eux, je vais leur dire qu’ils ont un include span de 2 ici tout simplement. Si j’enregistre et que je visualise dans le navigateur ici, on voit que certains gardent leur puce. Ça me gêne un peu, ce qui risque de pousser le 6 à la porte. Donc on va retourner ici. On va, puisqu’on utilise cette librairie horizontal list définir que l'élément li est un list-item. J’enregistre. Je visualise dans le navigateur et cela nous a enlevé les puces mais vous voyez qu’on a un petit pad ici sur le côté qui vient sur le menu 2 qui se répercute et qui pousse toujours le 6 dehors. Donc on va passer un paramètre ici en disant que je ne veux pas de padding donc on met un zéro. J’enregistre, on revient sur l’élément ici. On actualise, c’est passé. Le 6 est toujours dehors pour la même raison que ce que le main avait été dehors tout à l’heure. Donc on va revenir ici, c'est un petit bug de compass ici. Donc, ici on va dire qu’il n’y a pas de soucis. Je vais prendre le last-of-type, le dernier élément de ces li et je vais lui dire que j’inclus un span 2, mais ce coup-ci je lui dis que je passe le last derrière. Quand je reviens maintenant dans mon élément ici, j'actualise et vous voyez bien tous les menus sont venus se positionner. Donc vous voyez en utilisant les préprocesseurs on écrit du css en EStud. On peut s'appuyer sur Susy pour faire du span 2. On ne se préoccupe pas de savoir si c’est du float du flex, ou quels éléments. On pourrait s’en préoccuper si on veut dans cet élément-là on peut aller très très loin. Susy c’est quelque chose de très puissant, et vous voyez avec quelle souplesse avec quelques lignes de code, on arrive à mettre en page en utilisant des processeurs, en voyant notre grille et en s’appuyant dessus.

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 !