L'essentiel de Ruby on Rails

Poser un squelette HTML responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous verrez de quelle manière mettre une gem à jour et comment ajouter un menu convenable à votre application.
03:55

Transcription

Nous allons dans cette vidéo améliorer un peu l’apparence de notre site. Tout d’abord, si vous n’avez pas la dernière version de foundation-rails, vous pouvez la mettre à jour de cette façon. Allez dans votre Gemfile et ajoutez cette information sur la version de foundation-rails. Ensuite, rendez-vous dans votre terminal. Exécutez la commande bundle update foundation-rails. Cette commande mettra à jours la gem foundation sans toucher aux autres. Une fois fait, n’oubliez pas de réexécuter la commande rails g foundation:install. Avant de poursuivre, j’aimerai vous présenter un petit peu la notion de grille en responsive. Le principe de la grille consiste à découper votre page HTML en un ensemble de lignes et de colonnes. Dans le framework foundation, par défaut, il y a 12 colonnes par ligne. Il s’agira ensuite, pour chaque élément de votre site, d’indiquer sur combien de colonnes il s’étale. Par exemple ici, l’entête fera 12 colonnes - à savoir la largeur entière du site - le contenu principal, 8 colonnes et la barre à droite, 4 colonnes. Le framework comme foundation réarrangeront automatiquement ces éléments selon la taille de l’écran. Remarquez ces classes css : small-12, large-8. small s’appliquera pour tous les écrans, qu’ils soient petits ou grands. large s’appliquera pour tous les écrans au-delà de 1025 pixels. Autrement dit, pour des écrans plus petits que 1025 pixels, cet élément sera pleine page, à savoir, s’étalera sur les 12 colonnes. Je ne vais pas m’étaler davantage sur l’explication du système de grille. Vous pourrez retrouver d’autres tutoriels en ligne expliquant bien mieux que moi ce système. Je tenais toutefois à vous le présenter rapidement pour que vous ne soyez pas trop dérouté par ce qui va suivre. Revenons dans notre code. Tout va se dérouler dans le layouts/application. Nous allons pour le moment simplement ajouter un menu et poser la base du squelette de notre site. Commençons par le menu. Cette structure vient directement de la documentation de foundation. Dans un framework front-end comme foundation, les classes css sont utilisées pour identifier les éléments et correctement les placer. À chaque classe est également associé un style qui permet d’avoir un design basique sans avoir à trop toucher au css. Concernant les liens, pour le moment rien de nouveau, si ce n’est root_path. root_path est la méthode pour obtenir l’URL vers la racine de notre site. Continuons en posant le squelette de base de notre site. Dans un système de grille, nous utilisons la classe row pour ligne et la classe columns pour le nombre de colonnes. Si je veux que mon élément s’étale sur huit colonnes, il suffit que j’écrive medium-8. medium correspond aux tailles d’écran moyennes. Cela pourrait être par exemple une tablette en orientation paysage. Continuons. Fermons la balise. Fermons-le div et rajoutons quatre autres colonnes puisque notre ligne fait jusqu’à 12 colonnes. Et fermons. Fermons également la ligne. Ici, nous pourrons placer des éléments dans une sidebar, à savoir, une barre qui sera affichée sur le côté droit de notre site. Nous pourrons par exemple y lister la liste des sujets récents. Je vois que j’ai oublié un « n », aussi je le corrige. Et voilà, nous sommes bon. Testons. Nous retrouvons bien notre site avec le menu et les éléments, ici, qui s’affichent. Notez que si nous avions mis medium-12, le tableau se serait étalé sur l’ensemble de la page. Voilà ce qui termine notre vidéo. Celle-ci vous a présenté comment mettre à jour une gem et comment poser la base d’un squelette pour votre site.

L'essentiel de Ruby on Rails

Concevez des applications web évolutives et intemporelles avec Ruby on Rails. Installez l’environnement, réalisez un projet de stack overflow, enrichissez-le, etc.

6h08 (85 vidéos)
Aucun commentaire n´est disponible actuellement

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 !