L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment créer des sites Web uniques et magnifiques avec Tailwind CSS –
Lorsque vous réfléchissez au cadre CSS à utiliser pour un nouveau projet, des options telles que Bootstrap et Foundation vous viennent immédiatement à l’esprit. Ils sont tentés par leur utilisation en raison de leurs composants prédéfinis, prêts à l’emploi, que les développeurs peuvent utiliser avec facilité tout de suite. Cette approche fonctionne bien avec des sites Web relativement simples avec une apparence commune. Mais dès que nous commençons à créer des sites uniques plus complexes, avec des besoins spécifiques, quelques problèmes se posent:
À un moment donné, nous devons personnaliser certains composants, créer de nouveaux composants et nous assurer que la base de code finale est unifiée et facile. maintenir après les changements.
Il est difficile de satisfaire les besoins ci-dessus avec des frameworks tels que Bootstrap et Foundation, qui nous donnent un tas d'opinions et, dans de nombreux cas, de styles indésirables. En conséquence, nous devons résoudre en permanence les problèmes de spécificité tout en essayant de remplacer les styles par défaut.
Les solutions prêtes à l’emploi sont faciles à mettre en œuvre, mais inflexibles et limitées à certaines limites. D’autre part, le style des sites Web sans infrastructure CSS est puissant et flexible, mais il n’est pas facile à gérer et à maintenir. Alors, quelle est la solution?
La solution, comme toujours, est de suivre le centre d’or. Nous devons trouver et appliquer le bon équilibre entre le concret et l'abstrait. Un framework CSS de bas niveau offre un tel équilibre. Il existe plusieurs frameworks de ce type, et dans ce didacticiel, nous allons explorer le plus populaire, Tailwind CSS .
Qu'est-ce que Tailwind?
Tailwind est plus qu'un framework CSS, c'est un moteur pour la création de systèmes de conception. – Site Web de Tailwind
Tailwind est un ensemble de classes d’utilitaires de bas niveau. Ils peuvent être utilisés comme des briques lego pour construire tout type de composant. La collection couvre les propriétés CSS les plus importantes, mais elle peut être facilement étendue de différentes manières. Avec Tailwind, la personnalisation n’a plus mal au cou. Le framework a une excellente documentation, couvrant chaque utilitaire de classe en détail et montrant les possibilités de personnalisation. Tous les navigateurs modernes, ainsi que IE11 +, sont pris en charge.
Pourquoi utiliser un framework d'utilitaires d'abord?
Un framework CSS de bas niveau et d'utilitaires d'abord, comme Tailwind, présente de nombreux avantages. Explorons les plus significatives d’entre elles:
- Vous contrôlez mieux l’aspect des éléments. Vous pouvez modifier et ajuster beaucoup plus facilement l'apparence d'un élément à l'aide de classes utilitaires.
- Il est facile de gérer et de gérer des projets volumineux, car vous ne gérez que des fichiers HTML, au lieu d'une grande base de code CSS.
- créez des conceptions de site Web uniques et personnalisées sans vous battre avec des styles non désirés.
- Il est hautement personnalisable et extensible, ce qui nous offre une flexibilité illimitée. possibilité d'extraire des modèles courants et répétitifs dans des composants personnalisés et réutilisables – dans la plupart des cas sans écrire une seule ligne de code CSS personnalisé.
- Il comporte des classes explicites. On peut imaginer à quoi ressemble l'élément stylé en lisant les classes.
Enfin, comme le disent les créateurs de Tailwind :
il est presque impossible de penser que c'est une bonne idée de la voir pour la première fois. – vous devez réellement l'essayer.
Donc, essayons!
Bien démarrer avec Tailwind
Pour démontrer les fonctions de personnalisation de Tailwind, nous devons l'installer via npm:
npm install tailwindcss
L'étape suivante consiste à créer un fichier styles.css dans lequel nous incluons les styles de cadre à l'aide de la directive @tailwind :
@tailwind;
composants @tailwind;
utilitaires @tailwind;
Ensuite, nous lançons la commande npx tailwind init qui crée un fichier minimal tailwind.config.js dans lequel nous allons placer nos options de personnalisation au cours du développement. Le fichier généré contient les éléments suivants:
module.exports = {
thème: {},
variantes: {},
plugins: [],
}
L'étape suivante consiste à créer les styles pour pouvoir les utiliser:
npx tailwind build styles.css -o output.css
Enfin, nous lions le fichier output.css généré et le Font Awesome dans notre HTML:
Nous sommes maintenant prêts à créer.
Création d'un modèle de site Web d'une page
Dans la suite du didacticiel, nous allons créer un modèle de site Web d'une page en utilisant la puissance et la souplesse de Les classes d'utilitaires de Tailwind.
Vous pouvez voir ici le modèle en action .
Je ne vais pas expliquer chaque utilitaire (ce qui serait ennuyeux et fastidieux), donc je vous suggère d'utiliser le Feuille de triche Tailwind comme référence rapide. Il contient tous les utilitaires disponibles avec leur effet, ainsi que des liens directs vers la documentation.
Nous construirons le modèle section par section. Ils sont en-tête, Services, Projets, Équipe et Pied de page.
Nous emballons d'abord toutes les sections dans un conteneur:
La première section – En-tête – contiendra un logo sur le côté gauche et des liens de navigation sur le côté droit. Voici à quoi cela ressemblera:
Explorons maintenant le code qui le sous-tend
Comme vous pouvez le constater, les cours sont assez explicites, comme je l'ai mentionné plus haut. Nous allons explorer uniquement les points saillants.
Premièrement, nous créons un conteneur flexible et centrons ses articles horizontalement et verticalement. Nous ajoutons également du rembourrage supérieur et inférieur, que Tailwind combine dans un seul utilitaire py . Comme vous pouvez le deviner, il existe également une variante px pour gauche et droite. Nous verrons que ce type de sténographie est largement utilisé dans de nombreux autres services publics. Comme couleur de fond, nous utilisons le bleu le plus foncé ( de bg-blue-900 ) de la palette de couleurs de Tailwind. La palette contient plusieurs couleurs avec des nuances pour chaque couleur réparties de 100 à 900. Par exemple, blue-100 blue-200 blue-300 etc. .
Dans Tailwind, nous appliquons une couleur à une propriété en spécifiant la propriété suivie de la couleur et du numéro de nuance. Par exemple, texte-blanc bg-grey-800 border-red-500 . Easy Peasy.
Pour le logo sur le côté gauche, nous utilisons un élément div que nous avons réglé pour ne pas rétrécir ( flex-shrink-0 ) et le déplacer un peu loin du bord en appliquant la propriété margin-left ( ml-10 ). Nous utilisons ensuite une icône Font Awesome dont les classes se marient parfaitement avec celles de Tailwind. Nous en utilisons un pour rendre l'icône orange. Pour la partie textuelle du logo, nous utilisons un gros texte bleu clair semi-gras, avec un petit décalage à droite.
Au milieu, nous ajoutons une icône qui ne sera visible que sur mobile. Nous utilisons ici l’un des préfixes des points de rupture réactifs ( md ). Tailwind, comme Bootstrap et Foundation, suit l'approche mobile-first. Cela signifie que lorsque nous utilisons des utilitaires sans préfixe ( visibles ), ils s’appliquent aussi bien du plus petit au plus grand. Si nous voulons un style différent pour différents périphériques, nous devons utiliser les préfixes des points d'arrêt. Ainsi, dans notre cas, l'icône sera visible sur de petits périphériques et invisible ( md: invisible ) à moyen et au-delà.
À droite, nous avons placé les liens de navigation. Nous appelons le lien Home différemment, ce qui montre qu’il s’agit du lien actif. Nous déplaçons également la navigation du bord et la configurons pour qu'elle soit masquée en cas de débordement ( de débordement-x-caché ). La navigation sera cachée ( cachée ) sur le mobile et configurée pour fléchir ( md: flex ) à moyen et au-delà.
Vous pouvez en savoir plus sur la réactivité dans la documentation .
Services
Créons maintenant la section suivante, Services. Voici à quoi cela ressemblera:
Et voici le code:
NOS SERVICES
Nous offrons les meilleures solutions de développement Web.
UI Design
Lorem ipsum dolor sit amet, consectetur elit adipiscing. Aenean ac est massa.
...
Nous créons une section avec un fond bleu clair. Nous ajoutons ensuite un titre souligné et un sous-titre.
Ensuite, nous utilisons un conteneur flex pour les éléments de services. Nous utilisons flex-wrap pour que les éléments soient ajustés au redimensionnement. Nous définissons les dimensions de chaque carte et ajoutons de l’espace et une ombre portée. Chaque carte a une section colorée avec une icône de sujet, un titre et une description. Nous avons également placé un bouton avec une icône dans le coin inférieur droit.
Nous utilisons ici l'une des variantes de pseudo-classe (survol, focus, etc.). Ils sont utilisés de la même manière que les points d'arrêt réactifs. Nous utilisons le préfixe de pseudo-classe, suivi de deux points et du nom de la propriété ( survol: bg-orange-300 ).
Vous pouvez en savoir plus sur les variantes de pseudo-classes dans la documentation .
Par souci de concision, je ne montre le code que pour la première carte. Les autres sont similaires. Vous devez modifier uniquement les couleurs, les icônes et les titres. Voir le fichier HTML final sur le référentiel GitHub pour référence.
Projects
Passons à la section suivante, Projects. Voici le dernier aspect:
Et voici le code:
NOS PROJETS
Explorez notre portefeuille riche et diversifié
...
Tout d'abord, vous remarquerez peut-être que j'utilise ici les classes de la section . Ils ne viennent pas du vent arrière. Je les ai créées et je vais vous montrer comment faire maintenant.
Parce que les trois sections du milieu partagent la même apparence de base, ce qui conduit à la répétition de code, il est maintenant temps de penser aux composants. L'une des fonctionnalités intéressantes offertes par Tailwind est la capacité d'extraire et de créer facilement et sans douleur tout type de composants personnalisés. Nous allons donc extraire ici un composant personnalisé de la section .
Voici comment. Ouvrez le fichier styles.css et ajoutez les classes suivantes juste après la déclaration de composants :
...
composants @tailwind;
.section {
@apply w-full p-6;
}
.section titre {
@apply w-48 mx-auto pt-6 border-b-2 border-orange-500 texte-centre texte-2xl texte-bleu-700;
}
.section-subtitle {
@apply p-2 text-center text-lg text-grey-700;
}
...
Comme vous pouvez le constater, pour créer une classe de composants, nous utilisons la directive @apply suivie des utilitaires nécessaires. Voici plus d'informations sur l'extraction de composants .
Maintenant, pour utiliser les nouvelles classes, nous devons reconstruire à nouveau les styles:
npx tailwind build styles.css -o output.css
Maintenant, au lieu d'un long tableau d'utilitaires, nous utilisons simplement une classe unique pour chaque élément. Et comme vous pouvez le constater, les classes personnalisées peuvent être utilisées en toute sécurité avec les utilitaires classiques (section de bg-blue-200 ).
Passons maintenant aux boutons de navigation. Nous les plaçons dans un conteneur flexible et les appelons de jolis rectangles. Mais nous voulons les rendre un peu plus dynamiques et élégants en appliquant un petit effet de biais. Le problème est que Tailwind n’offre pas cet utilitaire. Il est donc temps d’apprendre à créer nos propres utilitaires. C’est très facile.
Ouvrez à nouveau styles.css et ajoutez la classe nécessaire juste après la déclaration des services publics :
...
utilitaires @tailwind;
.-skewx-20 {
transformer: skewX (-20deg);
}
...
Ce que nous voulons, c'est incliner les rectangles horizontalement. Pour cela, nous avons besoin de skewX () avec une valeur négative. Dans Tailwind, les utilitaires avec des valeurs négatives sont créés en plaçant un signe moins avant le nom de l'utilitaire.
Nous pouvons voir l'effet de notre nouvel utilitaire immédiatement après avoir reconstruit les styles.
Voici plus d'informations sur ajout de nouveaux utilitaires .
Nous créons maintenant un autre conteneur flexible pour les cartes de projet. Nous voulons arrondir leurs coins en haut à gauche et en bas à droite, mais la quantité de rondeur qui arrondie offre de services publics est inférieure à ce dont nous avons besoin. Nous allons donc apprendre à personnaliser le thème par défaut Tailwind.
Ouvrez tailwind.config.js et ajoutez l'option borderRadius après le thème . clé:
thème: {
étendre: {
borderRadius: {
xl: '1rem',
'2xl': '2rem',
'3xl': '3rem'
}
}
},
Nous utilisons ici la clé extend car nous ne voulons pas remplacer les autres options, nous voulons inclure des options supplémentaires. Après avoir reconstruit les styles, nous pouvons voir comment nos nouvelles options entrent en vigueur.
Pour pour en savoir plus sur la personnalisation des thèmes, visitez la documentation .
Tailwind n'offre pas par défaut. Nous voulons que la carte se soulève un peu en vol stationnaire. Nous devons donc ajouter une marge négative subtile en vol stationnaire. Mais pour que cela fonctionne, nous devons activer la variante de vol stationnaire de la fonction margin .
Pour ce faire, nous avons mis le texte suivant dans tailwind.config.js :
variantes: {
marge: ['responsive', 'hover']
},
L'important ici est de toujours fournir la liste complète des variantes que nous voulons activer, et pas seulement les nouvelles.
En savoir plus sur la configuration des variantes dans la documentation .
Maintenant, reconstruisons les styles et voyons le résultat.
Team
À ce stade, vous avez une assez bonne idée du fonctionnement de Tailwind et la construction de la section Team vous sera très familière. Voici comment cela se présentera:
Voici le code:
NOTRE ÉQUIPE
Faites connaissance avec nos professionnels chevronnés.
Jessica Thompson
UI Artisan [19659115] ...
Nous créons ici un jeu de cartes de profil. Le code pour eux est très répétitif, nous allons donc l'extraire dans un composant de carte réutilisable. Nous savons déjà comment le faire.
Nous créons les classes de cartes et les plaçons dans le fichier styles.css :
...
.carte {
@apply w-48 m-4 py-2 bg-white shadow-lg;
}
.card-image {
@apply w-24 h-24 mx-auto arrondi-complet;
}
.card-title {
@apply mx-2 mt-2 text-center text-lg text-grey-700 font-semibold;
}
.card-sous-titre {
@apply text-center text-grey-600;
}
.card-icons {
@apply flex justifier-centre items-center mt-2;
}
.card-icon {
@apply mx-1 text-blue-500 curseur-pointeur;
}
.card-icon: survol {
@apply text-orange-500;
}
...
Maintenant, reconstruisons les styles et utilisons les classes de la carte de notre fichier. Nous échangeons les utilitaires avec les classes et obtenons ainsi une version beaucoup plus courte du code.
NOTRE ÉQUIPE
Faites connaissance avec nos professionnels qualifiés
Jessica Thompson
UI Artisan
. .
Nous allons maintenant examiner la dernière section Footer. Cela contiendra trois colonnes et ressemblera à ceci:
Voici le code:
À PROPOS DE NOUS
Lorem ipsum dolor sit amet, consectetur elip. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum à convallis.
Morbi tristique massa nec massa auctor, à scelerisque felis consectetur. Morbi tempus et odio sit amet feugiat. Mécène dignissim un turpis dans molestie. Fusce tincidunt vestibulum iaculis.
CONTACTEZ-NOUS
A108 Adam Street
New York, NY 535022
États-Unis
Téléphone: +1 5589 55488 55
E-mail: info@webcraft.com
SAY HELLO!
Nous créons ici une grille réactive à trois colonnes. Pour cela, nous utilisons l'utilitaire Flexbox et l'utilitaire de largeur avec ses variantes réactives. En utilisant les classes w-full md: w-1/3 nous forçons les colonnes à être empilées sur mobile, et consécutivement sur le support et au-delà.
Dans la première colonne, le texte être aligné à gauche sur le support et au-delà ( md: text-left ).
Dans la deuxième colonne, nous avons mis des informations de contact et un widget de partage social. Voyons comment le créer.
Nous utilisons un conteneur carré flexible dans lequel nous plaçons quatre carrés plus petits placés uniformément à chaque coin. Nous faisons pivoter tous les carrés de 45 degrés. À l'intérieur de chaque petit carré, nous plaçons une icône sociale dans laquelle nous pivotons de -45 degrés pour l'aligner sur son conteneur. En vol stationnaire, chaque petit carré se déplace un peu en dehors du grand carré.
Comme nous pouvons le constater, nous devons créer deux utilitaires supplémentaires pour les opérations de rotation. Donc, nous rouvrons styles.css et ajoutons les classes nécessaires:
...
.rotate-45 {
transformer: faire pivoter (45 °);
}
.-tourner-45 {
transformer: faire pivoter (-45deg);
}
...
Maintenant, reconstruisez les styles et voyez les résultats
Dans la dernière colonne, nous avons un formulaire de contact subtil.
Dernières considérations
Vous avez déjà remarqué avec certitude que la taille finale du fichier est assez grand. Ne vous inquiétez pas, cela peut être corrigé. Pour plus d'informations, reportez-vous à la section sur le contrôle de la taille des fichiers de la documentation .
J'ai volontairement laissé plus de places avec une répétition du code dans le modèle. Vous savez déjà comment traiter ce problème et il sera judicieux de l'extraire en composants pour le renforcer.
Conclusion
Comme vous pouvez le constater, Tailwind vous donne un flux de travail simple, sans restreindre les options ni limiter la flexibilité. . L’approche «utilité d’abord» proposée par Tailwind est mise en œuvre avec succès par de grandes entreprises telles que GitHub, Heroku, Kickstarter, Twitch, Segment, etc.
Pour moi, personnellement, après de nombreuses heures de «lutte» contre les styles des frameworks tels que Bootstrap, Foundation, l'interface utilisateur sémantique, UIkit et Bulma, qui utilisent les utilitaires Tailwind, donnent l'impression de voler librement dans un ciel sans nuage. Il adore jouer avec les langages HTML, CSS, jQuery, PHP et WordPress, ainsi que Photoshop et Illustrator. La devise d'Ivaylo est "Effort minimum pour un effet maximum!"
Source link