Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue134:c_c [2018/07/07 07:45] – d52fr
+++ issue134:c_c [2018/07/17 06:08] (Version actuelle) – andre_domenech
@@ Ligne 1: / Ligne 1: @@
 **This past month has been spent streamlining my development process, in order to more quickly create prototypes and advance onward to finalized styles. Part of this included watching a video from Adam Wathan (one of the creators of Tailwind CSS). In this video on YouTube, he used Tailwind to quickly create the new https://refactoringui.com/ design. It inspired me to give it a shot, and this article will offer some examples, and my insights.**
-Le mois dernier a été passé à la rationalisation de mon processus de développement de façon à créer des prototypes plus rapidement et de progresser vers des styles finalisés. Parmi tout ça, il y eu le visionnage d'une vidéo d'Adam Wathan (un des créateurs de Tailwind CSS). Dans cette vidéo de Youtube, il utilisait Tailwind pour créer rapidement le nouveau concept https://refactoringui.com/. Il m'a inspiré d'y jeter un œil, et cet article offrira quelques exemples, et mes réflexions.
+Le mois dernier a été passé à la rationalisation de mon processus de développement de façon à créer des prototypes plus rapidement et de progresser vers des styles finalisés. Parmi tout ça, il y eu le visionnage d'une vidéo d'Adam Wathan (un des créateurs de Tailwind CSS). Dans cette vidéo de Youtube, il utilisait Tailwind pour créer rapidement le nouveau concept https://refactoringui.com/. Ça m'a incité d'y jeter un œil et cet article offrira quelques exemples, et mes réflexions.
 **What is Tailwind CSS?
@@ Ligne 9: / Ligne 9: @@
 Qu'est-ce que Tailwind CSS ?
-Trailwind CSS est un framework qui offre des classes d'utilitaires (similaires à certains frameworks fonctionnels de CSS). En gros, les classes d'utilitaires stockent desparamètres CSS typiques dans une classe _ _telle que la classe « shadow » (ombre) au lieu de définir une ombre à la main. Cependant, il offre aussi une fonction « @apply » pour appliquer une combinaison de classes dans CSS, qui peut réduire la répatition qui apparaît dans HTML. C'est une fonctionnalité dnont je n'avais pas entendu parler, jusqu'à ce que je l'utilise. Vous pouvez aussi personnaliser très largement Tailwind en utilisant le fichier tailwind.is.
+Tailwind CSS est un framework qui offre des classes d'utilitaires (similaires à certains frameworks fonctionnels de CSS). En gros, les classes d'utilitaires stockent des paramètres CSS typiques dans une classe, telle que la classe « shadow » (ombre) au lieu de définir une ombre à la main. Cependant, il offre aussi une fonction « @apply » pour appliquer une combinaison de classes dans CSS, ce qui peut réduire la répétition qui apparaît dans HTML. C'est une fonctionnalité dont je n'avais pas connaissance, jusqu'à ce que je l'utilise. Vous pouvez aussi personnaliser très largement Tailwind en utilisant le fichier tailwind.is.
 **Why?
@@ Ligne 19: / Ligne 19: @@
 Pourquoi ?
-Le prototypage réclame classiquement des allers er retours sur les différents réglages de CSS, et les valeurs par défaut livrées avec Tailwind (et la possibilité de les personnaliser) sont bien vues. Aussi, au lieu de faire la navette entre un fichier HTML et le fichier CSS (et probablement d'attendre que votre préprocesseur compile), vous pouvez à la place rester sur votre vue HTML et simplement attacher des classes aux différents éléments quand vous en avez besoin. Je trouve cette approche plus rapide que la navette HTML-CSS et elle vous donne un point de départ pour l'apparence (à l'inverse de la création de vos propres ombres, bordures, fonds, etc.).
+Le prototypage réclame classiquement des allers et retours sur les différents réglages de CSS, et les valeurs par défaut livrées avec Tailwind (et la possibilité de les personnaliser) sont bien vues. Aussi, au lieu de faire la navette entre un fichier HTML et le fichier CSS (et probablement d'attendre que votre pré-processeur le compile), vous pouvez à la place rester sur votre vue HTML et simplement attacher des classes aux différents éléments quand vous en avez besoin. Je trouve cette approche plus rapide que la navette HTML-CSS et elle vous donne un point de départ pour la présentation (à l'inverse de la création de vos propres ombres, bordures, fonds, etc.).
-Ensuite, une fois que vous avez prototyper le système, vous pouvez réduire la répétition des classes en créant vous propres classes et styles personnalisés, et en utilisant les paramètres exacts du prototype, grâce à @apply. Pour les exemples, voyez le codepen et les sections suivantes.
+Ensuite, une fois que vous avez prototypé le système, vous pouvez réduire la répétition des classes en créant vos propres classes et styles personnalisés, et en utilisant les paramètres exacts du prototype, grâce à @apply. Pour les exemples, voyez le codepen et les sections suivantes.
 **Preamble
@@ Ligne 39: / Ligne 39: @@
 Préambule
-De façon à suivre cet article ( et pour avoir un accès ffacile à tous les fichiers que j'ai créé), j'ai créé les deux codepen suivants :
+De façon à suivre cet article (et pour avoir un accès facile à tous les fichiers que j'ai générés), j'ai créé les deux codepen suivants :
 • https://codepen.io/lswest/full/XYKVVw/ - C'est la partie 1, où nous n'utilisons que les classes d'utilitaires offertes par Tailwind.
 • https://codepen.io/lswest/full/LrZeaZ/ - C'est la partie 2, où nous extrayons les combinaisons de classes répétitives et les transformons en styles personnalisés.
@@ Ligne 47: / Ligne 47: @@
 Vous aurez aussi besoin que nodejs et npm soient installés.
-Je vous recommanderais aussi (sans obligation) d'utiliser quelque chose comme Atom ou Visual Studio paramétré avec Emmet (disponible automatiquement dans Code).
+Je vous recommanderais aussi (sans obligation) d'utiliser quelque chose comme Atom ou Visual Studio Code paramétré avec Emmet (disponible automatiquement dans Code).
@@ Ligne 61: / Ligne 61: @@
 Paramétrage
-• Créez un dossier dans lequel vous voudrez travailler à ce projet.
+• Créez un dossier dans lequel vous travaillerez à ce projet.
-• Allez sur un des codepen cités au-dessus et copiez le contenu du fichier package.json dans votre propre fichier package.json.
+• Allez sur un des codepen cités ci-dessus et copiez le contenu du fichier package.json dans votre propre fichier package.json.
 • Lancez npm install pour installer tous les paquets nécessaires.
 • Lancez ./node_modules/.bin/tailwind init de façon à générer votre propre fichier tailwind.js.
 • Allez sur le premier codepen cité au-dessus et copiez tous les fichiers dans les emplacements correspondants (listés dans le pen).
-• Une fois que tous les fichiers osnt à la bonne place, vous lancerez, soit npmrun, soit npm run watch. Ceci lancera webpack et générera le fichier ./dist/styles.css.
+• Une fois que tous les fichiers sont à la bonne place, vous lancerez, soit npm run, soit npm run watch. Ceci lancera webpack et générera le fichier ./dist/styles.css.
 **Note: If you’re installing these packages by hand into a custom package.json file, at the time of writing you will need to install extract-text-webpack-plugin@next (the beta version) for it to be compatible with Webpack 4.
@@ Ligne 72: / Ligne 72: @@
 Note #2: While Tailwind is available via CDN, using it removes some of the flexibility, as you have no control over the tailwind.js file. If you just want to try it out, feel free to use the CDN. If, however, you’re looking to customize it, definitely use some form of precompiler as explained in the documentation.**
-Note : Si vous installez ces paquets à la main dans un fichier personnalisé package.json, à l'heure où j'écris, vous devrez installer extract-text-webpack-plugin@next (la version beta) pour qu'il soit compatible avec Webpack 4.
+Note n° 1 : Si vous installez ces paquets à la main dans un fichier personnalisé package.json, à l'heure où j'écris, vous devrez installer extract-text-webpack-plugin@next (la version bêta) pour qu'il soit compatible avec Webpack 4.
-Note n°2 : Alors que Tailwind est disponible via CDN, l'utiliser enlève un peu de flexibilité, car vous n'avez plus de contrôle du fichier tailwind.js. Si vous voulez juste le tester, n'hésitez pas à utiliser CDN. Cependant, si vous souhaitez le personnaliser, utilisez, sans aucun doute, une des sortes de précompileur comme expliqué dans la documentation.
+Note n° 2 : Bien que Tailwind soit disponible via CDN, l'utilisation de celui-ci enlève un peu de flexibilité, car vous n'avez plus le contrôle du fichier tailwind.js. Si vous voulez juste le tester, n'hésitez pas à utiliser CDN. Cependant, si vous souhaitez le personnaliser, utilisez, sans aucun doute, un des types de précompileur comme expliqué dans la documentation.
@@ Ligne 93: / Ligne 93: @@
 Explication du HTML
-Dans les deux codepens, le HTML est assez proche. J'ai utilisé des balises pre (pour preformaté) pour m'assurer que le formatage des fichiers fonctionne bien et inclus simplement une petite en-tête pour indiquer de quel projet il s'agit. La majorité du texte standard a été généré en utilisant l'abréviation emmet html:5 et ensuite la vue d'écran a été ajoutée (meta:vp).
+Le HTML des deux codepens est assez similaire. J'ai utilisé des balises pre (pour preformaté) pour m'assurer que le formatage des fichiers fonctionne bien et j'ai inclus simplement une petite en-tête pour indiquer de quel projet il s'agit. La majorité du texte standard a été générée en utilisant l'abréviation emmet html:5 et ensuite la vue d'écran a été ajoutée (meta:vp).
-À l'origine, j'avais tiré tout le contenu dans le fichier en utilisant des éléments HTML vierges. Ceci veut dire qu'au début, l'en-tête ressemblait à ça :
+À l'origine, j'avais mis tout le contenu dans le fichier en utilisant des éléments HTML vierges. Ceci veut dire qu'au début, l'en-tête ressemblait à ceci :
 <header>
@@ Ligne 103: / Ligne 103: @@
 </header>
-I ln'y a rien de trop difficile dans le HTML, et, donc, je vais m'arrêter ici pour les explications. Ce qui suit maintenant, est la phase de prototypage, où nous avons utilisé les classes d'utilitaires de Tailwind CSS.
+Il n'y a rien de trop difficile dans le HTML ; aussi je vais m'arrêter ici pour les explications. Ce qui suit maintenant, est la phase de prototypage, où nous avons utilisé les classes d'utilitaires de Tailwind CSS.
 **Adding Utility Classes
@@ Ligne 123: / Ligne 123: @@
 Ajout des classes d'utilitaires
-Toute personne qui a copié le HTML à partir de mon premier lien vers codepen notera que beaucoup de styles ont été ajoutés. Je passerai sur certaines de ces classes, mais elles sont en général faciles à comprendre.
+Toute personne qui a copié le HTML à partir de mon premier lien vers codepen notera que beaucoup de styles ont été ajoutés. Je jetterai un œil à certaines de ces classes, mais elles sont en général faciles à comprendre.
 <body class="font-sans leading-tight antialiased h-screen">
@@ Ligne 135: / Ligne 135: @@
     <main class="container mx-auto mt-16">
-C'est les cinq premières lignes du pen. La première classe de la balise de « body » dit que le navigateur utilise la classe font-sans, là où Tailwind définit une famille de polices « sans ». les autres classes sont informent simplement le navigateur d'applique l'anti-alias sur les polices ainsi qu'un qu'un interlignage serré (un terme de typographie faisant référence à l'espacement vertical des lignes du texte).
+Ce sont les cinq premières lignes du pen. La première classe de la balise « body » dit au navigateur d'utiliser la classe font-sans, là où Tailwind définit une famille de polices « sans ». Les autres classes informent simplement le navigateur d'appliquer l'anti-alias sur les polices ainsi qu'un interlignage serré (un terme de typographie faisant référence à l'espacement vertical des lignes du texte).
 **The header gets the default orange as a background, and the h1 is centered, made a light grey color, and receives padding on the y-axis (top and bottom) of “8”. This “8” is defined in the tailwind.js file, and by default is 2rem (for a total of 4 rem, split between the top and the bottom). These numbers (by default) are the rem value * 4.
@@ Ligne 144: / Ligne 144: @@
 This line should go at the end of the margin array (simply search the file for “margin:”). Once webpack has recompiled the styles, you’ll have access to mt-16.**
+Le fond de l'en-tête est orange, la couleur par défaut, et la partie « h1 » est centrée, avec une couleur grise claire, et reçoit une guirlande de « 8 » sur l'axe y (en haut et en bas). Ce « 8 » est définit dans le fichier tailwind.js et, par défaut, est 2rem (pour un total de 4 rem, répartis entre le haut et le bas). Ces chiffres (par défaut) sont la valeur de rem * 4.
+L'élément principal est un conteneur (où la largeur est limitée sur la base de la taille de l'écran), et la classe mx-auto ajoute des marges automatiques à droite et à gauche (axe x). Ceci centre en gros le conteneur au milieu de l'écran. Le paramètre mt-16 ajoute un feston au sommet. Par défaut, tailwind.js ne définit que jusqu'à mt-8. Pour ajouter mt-16 comme je l'utilise, vous aurez besoin d'ajouter la ligne suivante :
+'16': '4rem',
+Cette ligne devra aller à la fin de la zone des marges (cherchez juste « margin: » dans le fichier). Une fois que webpack a recompilé les styles, vous aurez accès à mt-16.
 **Customizing Tailwind
@@ Ligne 150: / Ligne 158: @@
 Naturally, as you continue your project, you may need to adjust screen sizes, margins, shadows, etc. - which you are free to do at any time. I simply recommend starting with the colors, as these are fundamental, and can have a large impact on the number of classes.**
+Personnalisation de Tailwind
+Comme vous l'avez vu à la fin de la dernière section, les changements de paramètres et de valeurs par défaut sont extrêmement simples. Pour prototyper quelque chose, vous pourriez ne pas vouloir enlever les valeurs par défaut et simplement, à la place, y faire des ajouts (come vous l'avez fait ci-dessus avec les marges). Une fois que vous êtes prêts à passer en production, (ou si vous suivez un guide de style), je vous recommanderais vivement ensuite d'enlever toutes les couleurs inutiles et d'ajouter/corriger celles qui correspondent aux styles indiqués. Ceci réduira très fortement le fichier CSS résultant (car chaque couleur est utilisée pour les fonds, le texte et les bordures).
+Naturellement, en continuant votre projet, vous pourriez avoir besoin d'ajuster les tailles d'écran, les marges, les ombres, etc., ce que vous êtes libre de faire à n'importe quel moment. Je recommande juste de commencer par les couleurs car elles sont fondamentales et peuvent avoir un large impact sur le nombre de classes.
 **The Design
@@ Ligne 158: / Ligne 172: @@
 This prototype took me less than 10 minutes in total (to the state of codepen part 1). While it isn’t the most complex, it’s also visually attractive enough to leave it be at that point. I would have previously either had much less polished CSS, or simply not be finished at this point.**
+La conception
+La conception de mon codepen est plutôt simple : j'ai choisi une couleur orange car elle est fréquente dans le magazine Full Circle ; autrement, je m'en suis tenu au gris et au noir pour la lisibilité.
+J'ai fait une large utilisation des classes inline/block, overflow, rounded et bg/text. La classe rounded arrondit juste les coins des balises pre, et les classes inline/block ajoutent display:inline ou display:block aux éléments. overflow-x-auto est utilisé dans les balises pre pour éviter que le texte sorte du fond gris sur les petits dispositifs, et le fichier webpack.config.js reçoit overflow-y-auto et une hauteur (64 = 16rem). C'est dû à la longueur du fichier - je voulais éviter que le fichier HTML soit trop long et le fichier webpack restera inchangé tout au long de cet article.
+Ce prototype m'a pris moins de 10 minutes au total (pour arriver à l'état du codepen de la partie 1). Alors qu'il n'est pas des plus complexes, il est suffisamment attractif visuellement pour qu'il reste dans cet état. Auparavant, le CSS était soit beaucoup moins fignolé, soit simplement pas fini à ce stade.
 **The Repetition
@@ Ligne 165: / Ligne 187: @@
 • pre - in the process steps, I repeat “inline” classes a lot. As such, I made the display: inline; the default one, and simply added class=”block” to the file tree, and integrated it into the code class.
 • h3 - These should be orange. While it is a single class that we are replacing, imagine if you decide you want to use a red color? You wouldn’t want to define “orange” as a red color, nor would you want to adjust a bunch of styles in various HTML locations. Instead, I use an element selector, and simply move the text-orange setting into CSS. This way any changes occur in one location.**
+La répétition
+Au lieu de retirer toutes les classes de Tailwind et et de doubler mon travail en donnant à chaque élément un style spécifique ou une classe spécifique, je me suis concentré uniquement sur les éléments que je répétais. En gros, 3 styles sont à définir :
+• des blocs de code (affichage du bloc, fond gris, une bande verticale de 2rem, des coins arrondis et overflow-x: auto;).
+• pre - dans les étapes du process, je répète beaucoup les classes « inline ». Aussi, j'ai fait de display: inline; l'affichage par défaut et j'ai ajouté simplement class="block" à l'arborescence du fichier et l'ai incorporé au code de la classe.
+• h3 - Elle devrait être orange. Alors que c'est une classe simple que nous remplaçons, imaginez si nous décidions d'utiliser une couleur rouge ? Vous ne voudriez pas déclarer « orange » comme étant de couleur rouge, ni avoir envie de modifier un paquet de styles à différents endroits du HTML. À la place, j'utilise un sélecteur d'éléments, et déplace le paramètre text-orange dans le CSS. De cette façon, les changements ne se font qu'à un endroit.
 **Using @apply
@@ Ligne 177: / Ligne 206: @@
 When webpack recompiles the file, this @apply will be replaced with the actual styles from the classes listed. For the other two styles, check the second codepen for the contents of my src/styles.css file.**
+Utilisation de @apply
+L'utilisation de @apply est extrêmement simple. Après les imports dans le fichier src/styles.css, vous définissez votre classe comme normale, puis vous écrivez @apply <classes venant du HTML>. Gardez bien en tête que vous devez ajouter un point devant le nom des classes si vous les copiez directement du HTML, car vous écrivez des sélecteurs du CSS. Exemple :
+.code {
+	@apply .block .bg-grey .py-4 .rounded .overflow-x-auto
+}
+Quand webpack recompile le fichier, cet @apply sera remplacé par les vrais styles venant des classes listées. Pour les deux autres styles, vérifiez dans le second codepen le contenu de mon fichier src/styles.css.
 **Extra Features
@@ Ligne 189: / Ligne 230: @@
 The classes in that example defines the button’s width to be 100% by default. On medium devices (breakpoint is defined in tailwind.js) the width is then ⅓, and on hover the background should become orange.**
+Fonctionnalités additionnelles
+Tailwind offre aussi des classes spéciales pour vous permettre de définir des styles par taille d'écran, ou pour définir un style lors d'un survol. Par exemple :
+<button class=”w-full md:w-1/3 hover:bg-orange”>
+Button
+</button>
+Dans cet exemple, les classes définissent la largeur du bouton à 100 % par défaut. Sur des dispositifs de taille moyenne (la limite est définie dans tailwind.js), la largeur est de ⅓ et, lors d'un survol, le fond devient orange.
 **If you want to use these classes in @apply, you will need to remove the definition before the colon. So for the hover state:
@@ Ligne 199: / Ligne 252: @@
 Similarly with the md, you’d need to place that within a media query.**
+Si vous voulez utiliser ces classes dans @apply, vous devrez supprimer la définition avant les deux-points. Aussi, pour l'état d'un survol :
+button:hover {
+	@apply .bg-orange
+}
+Comme pour md, vous devrez mettre ça dans une requête de media.
 **Next Steps
 Once you’ve created your website using Tailwind CSS, you may want to reduce the file size of your CSS. This can be done by removing unused settings from the tailwind.js file, and possibly adjusting the modules available. The documentation for Tailwind has details here: https://tailwindcss.com/docs/controlling-file-size **
+Étapes suivantes
+Une fois que vous aurez créé votre site Web en utilisant Tailwind CSS, vous pourriez vouloir réduire la taille de votre fichier CSS. Ceci peut être fait en supprimant les paramètres inutilisés du fichier tailwind.js et peut-être en ajustant les modules disponibles. Des détails sont disponibles dans la documentation de Tailwind, ici :  https://tailwindcss.com/docs/controlling-file-size
 **Conclusion
@@ Ligne 208: / Ligne 275: @@
 I hope this article is of interest to some people. Hopefully it will also encourage a few people to try out Tailwind after having previously dismissed it (as I originally did). If this was interesting, but you’re more of a designer than a developer, feel free to look at Refactoring UI. If you enjoyed this format of article, please let me know by writing to me at lswest34+fcm@gmail.com. If you want to request an article, or see something that needs to be corrected, I can be reached at the above email for that as well.**
+Conclusion
+J'espère que cet article intéressera quelques personnes. Souhaitons qu'il en encourage aussi quelques-unes à re-tester Tailwind après l'avoir délaissé précédemment (comme je l'avais fait). Si c'était intéressant, mais que vous êtes plus un concepteur qu'un développeur, n'hésitez pas à regarder Refactoring UI. Si vous avez aimez le format de cet article, faites-le moi savoir en m'écrivant à lswest34+fcm@gmail.com. Si vous avez une demande d'article ou voyez quelque chose qui doit être corrigé, je peut aussi être joint par le mail indiqué ci-dessus.
@@ Ligne 219: / Ligne 288: @@
 https://tailwindcss.com/docs/what-is-tailwind - The Tailwind CSS documentation.**
+Pour aller plus loin
+https://refactoringui.com/ - Projet de Steve Schoger et Adam Wathan où ils offrent des astuces de conception.
+https://youtu.be/17OBlxY2C_0 - La vidéo à laquelle je fais allusion dans l'introduction. Adam Wathan diffuse beaucoup de codage en direct, si ça peut aussi vous intéresser.
+https://tailwindcss.com/docs/what-is-tailwind - La documentation de Tailwind CSS.**