| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue134:c_c [2018/07/15 19:56] – andre_domenech | issue134:c_c [2018/07/17 06:08] (Version actuelle) – andre_domenech |
|---|
| **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.** | **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/. Ça 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? | **What is Tailwind CSS? |
| Qu'est-ce que Tailwind CSS ? | 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 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 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? | **Why? |
| Pourquoi ? | Pourquoi ? |
| |
| 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 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.). | 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 prototypé 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 | **Preamble |
| Vous aurez aussi besoin que nodejs et npm soient installés. | 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). |
| |
| |
| 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° 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 : 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. | 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. |
| |
| |
| Explication du HTML | 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> | <header> |
| </header> | </header> |
| |
| Il n'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 | **Adding Utility Classes |
| Ajout des classes d'utilitaires | 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"> | <body class="font-sans leading-tight antialiased h-screen"> |
| <main class="container mx-auto mt-16"> | <main class="container mx-auto mt-16"> |
| | |
| Ce sont les cinq premières lignes du pen. La première classe de la balise « body » dit que le navigateur utilise 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). | 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. | **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. |
| 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.** | 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 légère, 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. | 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 hauteur 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 mx-auto ajoute un feston au sommet. Par défaut, tailwind.js ne définit que jusqu'à mt-8. Pour ajouter mt-16 comme je l'ai utilisé, vous aurez besoin d'ajouter la ligne suivante : | 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', | '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. | 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 | **Customizing Tailwind |
| Personnalisation de Tailwind | Personnalisation de Tailwind |
| |
| Comme vous l'avez vu à la fin de dernière section, les changements de paramètres et de valeurs par défaut sont extrêmement simples. Pour prototyper quelque chose, vous pourriez vouloir enlever toutes 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). | 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 libres 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. | 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 | **The Design |
| La conception | La conception |
| |
| La conception de mon codepen est plutôt simple : j'ai choisi une couleur orange car elle est fréquente dans le Full Circle Magazine, et autrement, je m'en suis tenu au gris et au noir pour la lisibilité. | 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 et display:block aux éléments. overflox-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 fournit 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. | 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 (à partir de 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. J'avais prévu, soit qu'il n'aurait pas un CSS assez fignolé, soit qu'il ne soit simplement pas fini à ce moment. | 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 | **The Repetition |
| Utilisation de @apply | 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 avez besoin d'ajouter un point devant le nom des classes si vous les copiez directement du HTML, car vous écrivez des sélecteurs du CSS. Exemple : | 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 { | .code { |
| </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. | 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: | **If you want to use these classes in @apply, you will need to remove the definition before the colon. So for the hover state: |
| Similarly with the md, you’d need to place that within a media query.** | 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 la virgule. Aussi, pour l'état d'un survol : | 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 { | button:hover { |
| Étapes suivantes | Étapes suivantes |
| |
| Une fois que vous avez 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 | 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 | **Conclusion |
| Conclusion | Conclusion |
| |
| J'espère que cet article intéressera quelques personnes. Souhaitons qu'il en encourage aussi quelques-uns à 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 à propos de cet article, ou si quelque chose doit être corrigé, je peut aussi être joint par le mail indiqué ci-dessus. | 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. |
| |
| |
| https://refactoringui.com/ - Projet de Steve Schoger et Adam Wathan où ils offrent des astuces de conception. | 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 avoir de l'intérêt pour vous. | 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.** | https://tailwindcss.com/docs/what-is-tailwind - La documentation de Tailwind CSS.** |
| |
