Découvrir Ember.js

Utiliser les styles CSS

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez comprendre comment gérer et appliquer les styles CSS dans un projet suivi avec Ember CLI.
03:05

Transcription

Maintenant que notre app commence à être fonctionnelle, nous allons voir comment appliquer les styles sur nos pages. Prenons, par exemple, la page application.hbs, la première page de notre site. Il y a pour l'instant uniquement un titre Welcome to ember.js avec notre outlet qui permet d'afficher la route suivante à l'intérieur. Si je souhaite modifier le style de cette balise, je peux le faire bien sûr en ajoutant html du style, mais je vais même pas le faire parce que vous devez le savoir, si vous avez déjà fait un petit peu du web, c'est quelque chose qui est déconseillé : on va toujours essayer de séparer la notion de style, la notion fichier, séparer plutôt que de le mettre avec la jig de mise en page. Donc, habituellement dans un développement standard d'un site web vous voyez dans votre haut de page un lien vers un fichier css et vous voyez votre développement dans ce fichier css. Sur ember, le principe est le même sauf que le fichier css est déjà prêt pour vous, il vous suffit d'aller dans app, vous ouvrez le dossier style et vous avez un fichier app.css. Enfin je le met au-dessus d'une fenêtre à part pour les voir côte à côte. Si, par exemple, je veux changer la couleur du texte, je vais ajouter l'arx ss, [ bruit de clavier ] title donc pour les objets avec l'idée title, je vais faire color deux points red, par exemple, pour voir le résultat. Et on voit qu'il a bien appliqué le style sur mon titre. Donc, on a un fichier séparé qui est disponible en toute application et dès que vous appliquez des styles là-dedans, ils seront automatiquement chargés dans les templates ou dans vos composants. Si votre application grossit, vous aurez un fichier qui risque de prendre du volume et qui peut être compliqué à gérer. Dans ce cas-là, ce que vous pouvez faire, c'est créer plusieurs fichiers CSS. Je vais dans ce dossier style, alors il faut que les fichiers soient présents dans le même dossier, je peux leur donner le nom que je veux, je vais donner, par exemple, special-age.css, je l'enregistre. Je vais déplacer mon code à l'intérieur. Pour l'instant, si j'affiche la page, on voit que le style n'est pas appliqué, pour qu'il soit appliqué, il suffit dans mon fichier app.css de faire un import, donc arobase import special page point css. Et il a appliqué mon style. Les règles d'import sont relativement simples : tous les imports doivent se faire en début de page et ensuite vous pouvez ajouter le style spécifique à app.css, si vous en avez besoin. Au niveau des conventions de marges à vous de voir ce qui vous arrange le mieux pour le CSS. Moi, ce que j'aime bien faire, c'est prendre les différents sous-dossiers de mes routes et réorganiser sous la même manière ici. On peut créer des dossiers si on le souhaite. Donc ça me permet en fait d'avoir une page css pour chaque page de mon application. Si vous avez peu de styles, vous pouvez utiliser un, deux ou trois fichiers, comme vous voulez. Moi, j'aime bien découper, avoir un fichier css pour une page. Et des règles communes, les garder dans app.css, et puis les règles spécifiques à une page justement, faire une page css à part. Mais ça, ça dépend de chacun.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 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 !