| Les deux révisions précédentesRévision précédente | |
| issue134:c_c [2018/07/16 12:49] – auntiee | issue134:c_c [2018/07/17 06:08] (Version actuelle) – andre_domenech |
|---|
| 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 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.). | 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 |
| 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 |
| |
| 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é 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 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 : | À 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 : |
