Découvrir LESS

Créer les variables

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez les variables dont vous aurez besoin dans votre application LESS. Puis recherchez les valeurs directement dans le fichier Photoshop.

Transcription

Nous allons maintenant définir les variables dont on va avoir besoin dans notre application LESS. Alors, pour accélérer un petit peu le travail, et puis pour se concentrer d’ailleurs exclusivement sur la partie LESS de la problématique, eh bien, je vous ai donné ici une série de fichiers texte dans le dossier txt, il y en a un qui s’appelle variables.txt, je vais l’ouvrir, sélectionner tout ce qu’il y a dedans avec un COMMANDE ou un CONTRÔLE-A, comme ceci, copier avec COMMANDE ou CONTRÔLE-C, et puis revenir au niveau de variables.less et venir coller avec COMMANDE ou CONTRÔLE-V. Voici donc les variables dont on va avoir besoin. Alors, d’où viennent toutes ces valeurs ? Vous voyez que j’ai ici une série de couleurs. Alors, ces codes couleurs, eh bien, j’ai directement été les chercher dans Photoshop. Regardez, si je reviens dans ma maquette Photoshop, eh bien j’ai dans Photoshop, un outil qui s’appelle l’Outil Pipette et quand je clique sur une couleur, par exemple ici, le bleu de l’en-tête, eh bien regardez, cette couleur apparait ici, dans le petit carré dans le fond, je clique dessus, et voici le code couleur à utiliser. Je peux faire la même chose pour d’autres couleurs. Regardez par exemple mon gris ici, eh bien voilà le code couleur à utiliser. Même chose pour mon vert, voilà le code couleur à utiliser. Et donc j’ai tout simplement été - je vais annuler ceci - reporter ces différents codes couleur ici, au niveau de mes variables less. J’ai fait la même chose avec les polices de caractère, donc vous voyez que j’ai ici une variable qui s’appelle titleFonts, qui est égale à une liste de polices, même chose pour contentFonts, c’est égale à une liste de polices possibles ici. Alors là, j’ai deux polices un petit peu spéciales : Raleway et Oxygen, ça, ce sont deux google fonts, eh bien je vais en profiter pour intégrer ces deux google fonts dans mon application LESS. Je vais donc me rendre sur le site de Google Fonts et je vais faire une petite recherche sur la première des deux polices dont j’ai besoin. Raleway, eh bien là voici, je vais cliquer sur le petit + qui est ici pour la sélectionner. La deuxième police, c’était Oxygen, là voici, je clique également sur le petit + et j’ai donc sélectionné, vous le voyez, deux familles de police de caractère. Alors, pour les intégrer dans mon application, l’option standard, c’est d’utiliser, vous le voyez ici, une balise link, mais je vais utiliser plutôt l’option d’importation, comme ceci, avec une directive, @import. Je vais copier ceci avec COMMANDE ou CONTRÔLE-C, et puis je reviens au niveau de Dreamweaver, et je vais venir coller ceci dans styles.less, donc import needed google fonts, et voilà, un simple COMMANDE ou CONTRÔLE-V pour venir coller ceci. Je sauvegarde, et voici donc mes google fonts intégrés à mon application LESS, donc. Alors, je viens dans mes variables, vous voyez également que j’ai défini une taille pour la police de caractère, j’appelle ça donc : bodySize, c’est la taille de base. J’ai également défini une navSize, c'est-à-dire une taille pour la police de caractère de la zone de navigation, et vous voyez que là, j’ai besoin de deux tailles différentes, une que je vais utiliser pour la tablette et pour les appareils nomades, les appareils tactiles donc. Bah oui, puisque sur ces appareils, je dois interagir avec mes liens avec mon doigt et pas avec ma souris, donc vous voyez que je vais ici doubler la taille des caractères. Par contre, sur les autres appareils, donc sur les ordinateurs de bureau, eh bien je vais me contenter d’une fois et demie, la taille de la police de caractère de base donc, pour mes liens, pour ma zone de navigation, vous voyez également que grâce à ces petits calculs, eh bien je rends navSizeTablet et navSizeLandscape dépendants de la valeur de bodySize, ça veut dire que si vous décidez d’augmenter ou de diminuer la taille de bodySize, eh bien vous augmenterez ou diminuerez la taille de vos deux autres variables ici, dans les mêmes proportions. Alors, j’ai également ici, vous le voyez, des breakpoints, des points d’arrêt. Eh bien oui, si vous revenez dans votre fichier Photoshop, je vais faire un petit zoom arrière pour bien vous montrer, vous voyez que j’ai trois plans de travail ici, dans Photoshop, qui représentent donc trois points d’arrêt de ce site qui doit être responsive. Alors, comment ai-je été cherché les différentes valeurs ? Eh bien j’ai été cherché ici mon Outil Plan de travail, j’ai cliqué sur le nom du plan de travail, et regardez donc, mon premier plan de travail, mon premier point d’arrêt fait 1481 pixels de large, le second fait 1024 pixels de large, et le petit dernier ici fait 768 pixels de large, j’ai donc été tout simplement reporté ces valeurs ici, dans mon application LESS également. J’ai quelques variables pour ma grille, puisque regardez, au niveau de Photoshop, eh bien mon designer a utilisé une grille comme ça, une grille qui ne se verra pas, c’est juste une grille virtuelle ceci, et si vous comptez ici, le nombre de colonnes dans la grille, donc le designer a ici, placé des guides dans Photoshop pour visualiser cette grille, eh bien vous avez 12 colonnes, donc j’ai tout simplement reporté ici, cette valeur, au niveau de mon application LESS. J’ai également donné, vous le voyez, un CornerRadius par défaut donc, de cinq pixels pour les arrondis dont je vais avoir besoin. Voici mes variables, je vais faire exactement la même chose avec mes mixins, donc vous voyez que j’ai ici un fichier texte qui s’appelle mixins.txt. COMMANDE ou CONTRÔLE-A pour tout sélectionner, COMMANDE ou CONTRÔLE-C pour copier, et je vais venir dans mixins.less pour COMMANDE ou CONTRÔLE-V, coller tout ceci dans mon fichier mixins.less. Nous reviendrons sur ces mixins dans le courant de ce chapitre, bien évidemment. Je vais donc sauvegarder tout ça, et puis pour bien vérifier que tout est correct, eh bien je reviens au niveau de styles.less, je vais de nouveau faire un petit F9 pour compiler, et vous voyez que je n'ai toujours daucune erreur puisque dans mon panneau de sortie, eh bien, la compilation s’est bien passée. Nous sommes donc prêts à passer à l’étape suivante.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 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 !