Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Parcourir les divers frameworks à disposition

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
On parle souvent de frameworks en parlant de librairie pour le mode grille. Mais il existe de véritables ensembles plus complets qui vous permettent de prototyper tout type de sites ou d'applications web.
04:32

Transcription

Donc on a souvent parlé de Framework CSS pour définir ces grid-system. En fait il ne s’agit vraiment que des grid-system. Le terme framework s'est vraiment complété par la suite avec l’évolution des besoins. Regardez si je vais sur le Github ici et que je regarde dans la partie code ici, code CSS, CSS 960 text, vous vous rappelez ce fameux petit fichier text difficilement présentable, qu’est-ce qu’il contient en fait ? Il contient un peu la base de départ au-delà de la réinitialisation, c’est-à-dire la typo qu’on va utiliser la manière dont on va utiliser certaines particularités... Comme par exemple la granularité que l’on aurait entre les divers titres, h1, h2, h3 etc. Les listes, comment on va les gérer, est-ce qu’on veut utiliser des marges particulières, etc. Donc tous ces éléments sont placés par défaut. Mais on ne va pas très loin, on va simplement dans des éléments d’en-tête, de paragraphe et de typo. On aurait pu aller dans des boutons, dans des éléments même comme des composants, des boîtes à onglets, des boîtes à accordéons, des listes à puces², etc. Et c’est là où les véritables framework se sont gonflés, c’est-à-dire qu’au-delà de la grille, ils sont allés à nous proposer tout un ensemble d’éléments. Le plus connu d’entre eux reste bootstrap qui fonctionne aussi bien en préprocesseur qu’en fourniture classique un peu comme on a utilisé 960 juste avant. Mais vous voyez qu’ici, au niveau des CSS on a l’intégralité des éléments, on a le code, les tables et on a les formulaires, et on a également le grid-system sur lequel on va pouvoir s’appuyer pour pouvoir définir chacune de nos grilles Et attention, cerise sur le gâteau : de manière responsive pour pouvoir affecter l’intégralité des périphériques de visualisation. Bootstrap n’est pas le seul bien qu’il soit quand même quelque chose de très utilisé autour de la planète mais on a des éléments comme foundation aussi qui talonnent de très près bootstrap et qui, lui aussi, propose tout un ensemble d’éléments. Alors, si vous venez dans les Showcase ici vous allez avoir toute une présentation qui pourra être faite sur les possibilités de travail. Mais si vous venez dans la documentation et que vous venez dans les documentations plus orientées sur les sites vous avez l’intégralité de l’utilisation et de tous les éléments qui peuvent être fabriqués que ce soient des barres de navigation, des éléments de contrôle, des conteneurs, des médias, etc, donc tout est directement utilisable, simplement à part l’ajout de classe comme on l’a vu tout à l’heure pour les modes grilles. Ici vous avez Metro UI, CSS 3. Et tous proposent également leurs systèmes de grille, c’est à dire que ce n’est pas que des éléments qui vont pouvoir être rajoutés sur nos sites, c'est vraiment qu'on a l’intégralité dans le framework de développement. Vous avez un élément ici qui est extrêmement léger donc qui nous permet de faire à peu près la même chose que ce qu’ont fait les autres mais d’une manière extrêmement allégée, pur CSS qui est un autre composant extrêmement adapté vraiment à la création d’application ou de sites web de manière très rapide et très moderne aussi. Ici Onsen UI qui est un framework beaucoup plus orienté sur les composants par rapport aux applications mobiles et notamment si vous avez une destination vers Phonegap et l’utilisation de Cordova ; Uikit qui est extrêmement développé pour tout ce qui va être composition de composants personnalisés que vous allez pouvoir utiliser. Encore une fois tous sont à creuser et je vous invite à le faire. HTML Kickstart qui était arrivé à l’époque avec Boilerplate qui était une un peu une solution alternative qui permettait d’avoir non seulement l’ensemble des fichiers CSS html et javascript nécessaires comme les Library Jquery. 99Lime Uikit qui est aussi une sorte de framework prêt pour des applications à destination d’appareils mobiles. Groundworkcss2, c’est vraiment un système qui est prêt pour être utilisé avec un pré-processeur et toutes les animations, tout, c’est super bien pensé tout s’est très très bien travaillé. Vous avez un grid-system qui est utilisé, c’est utilisé avec SAS. Vous pouvez utiliser directement un rapide prototyping. C’est vraiment quelque chose qui est super bien fait et en plus regardez, vous avez des animations de partout dans toutes les transitions dans tous les changements qui pourront être faits qui sont intégrés à ce genre de framework. Gumby framework bon je les passe un peu rapidement, Bass css Semantic UI, TopCoat. Ce que je voulais c’était vous montrer qu’il y avait une pléthore de solutions sur le marché, que bootstrap était celui qui était le plus fréquemment rencontré mais qu’il existe énormément de solutions et qu’en fonction de vos projets je vous invite à aller explorer toutes ces solutions et à regarder celles qui correspondraient le mieux à vos besoins.

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 !