Share
Kouto Swiss est une nouvelle bibliothèque de mixages fantastique pour le préprocesseur CSS Stylus, créée par les développeurs Pierre-Antoine Delnatte et Thierry Lagasse de KRKN. Il s’agit de la boîte à outils standard à laquelle les développeurs Stylus se tournent, et après avoir bien examiné ses nombreuses fonctionnalités, je peux affirmer qu’elle mériterait certainement ce rôle..
Si vous n'êtes pas familier avec les préprocesseurs Stylus ou CSS, vous pouvez obtenir une introduction via mon article Pourquoi choisir Stylus (et vous devriez aussi).
Et pendant que vous y êtes, regardez les deux premières vidéos de mon nouveau parcours Devenez un super-héros CSS avec Stylus. Ils sont tous deux gratuits et vous expliqueront ce qu'est Stylus et comment vous pouvez vous y installer facilement..
Pour installer Kouto Swiss, je recommande d’abord d’installer Node.js, puis d’exécuter la commande npm installe kouto-swiss via un terminal ou une invite de commande dans le dossier de votre projet. J'ai trouvé que c'était le moyen le plus simple de s'assurer que les dépendances étaient satisfaites.
Ajoutez ensuite cette ligne en haut de votre fichier Stylus et vous êtes prêt à commencer:
@import 'node_modules / kouto-swiss'
«Kouto Swiss» signifie «couteau suisse» et, dans l'esprit de ce célèbre petit emblème d'utilité concentrée, cette bibliothèque de mixages regroupe de nombreuses choses utiles dans un petit paquet..
Kouto Swiss compte beaucoup trop de fonctionnalités pour pouvoir toutes les couvrir ici. Nous allons donc commencer par examiner une sélection de six de ses fonctions en action..
Inclure Normalize.css dans vos projets est, à mon avis, une nécessité.
Lorsque vous utilisez un préprocesseur CSS, cela signifie généralement de rechercher une version maintenue activement de Normalize.css qui a été réécrite dans la langue de votre choix, de la télécharger dans votre projet, de l'importer, de garder un œil sur les mises à jour, puis de la réimporter si nécessaire..
En revanche, lorsque vous utilisez Kouto-Swiss, vous n’aurez à vous soucier de rien. Ajoutez simplement une seule ligne à votre fichier Stylus:
normaliser()
Le code complet de Normalize.css sera écrit directement dans votre feuille de style:
Avec cette approche, vous devez seulement garder votre Kouto-Swiss à jour et Normalize.css sera pris en charge avec elle. Aucun fichier, package ou importation supplémentaire à craindre; l'ensemble du processus est géré via cette ligne de code.
Si vous n'aimez pas utiliser Normalize.css et que vous préférez peut-être la réinitialisation CSS d'Eric Meyer, vous pouvez également utiliser une «doublure»: meyer-reset ()
Sauf si vous vous en tenez aux anciennes propriétés CSS, vous devrez utiliser des préfixes et des substitutions spécifiques au fournisseur à plusieurs reprises afin de générer du code compatible entre navigateurs. Toutefois, la maintenance de vos préfixes et de vos substituts de fournisseur peut s'avérer délicate, car les exigences relatives à leur utilisation doivent changer constamment..
Kouto-Swiss gère habilement ce problème en communiquant avec le site Web Puis-je utiliser pour garder à jour pour vous tous vos préfixes et replis de fournisseur? Vous pouvez ajouter vos propres paramètres concernant les navigateurs et les versions que vous souhaitez prendre en charge, ou simplement utiliser les paramètres par défaut issus des recommandations «Puis-je utiliser»?.
Il n'y a pas d'étape spéciale pour que votre code soit automatiquement compatible avec tous les navigateurs. Écrivez simplement votre code Stylus comme si toutes ses propriétés étaient déjà universellement supportées:
Le CSS résultant aura les préfixes de fournisseur et le code de secours corrects en place:
Consultez la liste complète des propriétés CSS prises en charge par les fonctionnalités de préfixage et de secours du fournisseur..
La capacité relativement nouvelle de générer des formes avec CSS3 s’est avérée très utile pour ajouter des icônes et des illustrations de base à des sites de manière rapide, facile à colorer et pouvant être redimensionnées uniquement à l’aide de modifications de code..
Les triangles CSS3 sont l’une des formes qui peuvent être créées, mais essayer d’écrire le code pour les sortir avec la taille, la couleur et l’angle que vous voulez peut être délicat.
Kouto-Swiss comprend un incroyablement facile à utiliser Triangle() mixin qui supprime tous les essais et erreurs de la génération de triangle, car vous lui indiquez simplement dans quelle direction le triangle doit être dirigé, quelle doit être sa taille, et quelles couleurs d'arrière-plan et (facultatif) devraient être.
Par exemple, déposez quelques Triangle() mixins avec des variables de couleur prédéfinies comme ceci:
Ensuite, votre création de triangle CSS devient une promenade dans le parc:
C'est toujours une bonne pratique d'inclure un pile de polices contre chaque déclaration de famille de police dans votre feuille de style, donc si votre police préférée est manquante, pour quelque raison que ce soit, des alternatives sont en place. Cela dit, il peut être un peu laborieux et difficile de déterminer quelles polices sont suffisamment similaires les unes aux autres pour former un bon empilement..
Kouto-Swiss comprend un font-stack () mixin qui obtient ses informations de pile de polices auprès de cssfontstack.com, par Denis Leblanc, et vous permet de générer facilement des piles de polices en fonction de familles de polices populaires.
Par exemple, le code de stylet suivant:
génère ces piles de polices complètes:
Consultez la liste complète des polices couvertes par ce mixin..
Kouto Swiss a pour fonctions de créer cinq types de nuanciers différents:
Vous alimentez la fonction génératrice de jeu de couleurs un la graine colorer et stocker les informations renvoyées par rapport à une variable Stylus. Deux à quatre couleurs seront renvoyées, que vous pouvez ensuite imprimer de la manière suivante:
Dans le code ci-dessus, j'ai utilisé une couleur bleue de # 3083bf et passé à travers chacune des cinq fonctions de génération de jeu de couleurs, qui a ensuite généré ces jeux de couleurs:
Si la couleur de départ est ensuite modifiée, un tout nouvel ensemble de schémas de couleurs peut être généré à partir du même ensemble de code. Par exemple, passer à # 30bfb3 vous donne:
Vous pouvez en savoir plus sur chacune des fonctions de génération de combinaisons de couleurs dans la documentation..
L’animation CSS, tout comme les formes CSS, est l’un des nouveaux outils les plus utiles de notre arsenal de conception Web. Les éléments qui auparavant auraient eu besoin de Flash ou de JavaScript peuvent désormais être rendus vivants avec du pur CSS.
Cependant, pour le moment, le code d'animation CSS entre navigateurs a besoin d'une lot des préfixes de vendeurs. En utilisant Kouto Swiss @ keyframe La fonctionnalité combinée avec le préfixe du fournisseur que nous avons décrit ci-dessus devient assez simple pour coder vos animations. Par exemple, ces 29 lignes de stylet:
affichez les 232 lignes de CSS requises, ce qui, je pense, conviendra, serait un cauchemar d'écrire manuellement:
L'animation résultante ressemble à ceci:
Encore une fois, consultez la documentation pour en savoir plus sur @ keyframe animation en Kouto Suisse.
Kouto Swiss est un excellent ajout au monde du développement CSS et je vous recommande vivement de le tester..
Il possède une longue liste de fonctionnalités supplémentaires que nous n’avons même pas abordées, alors rendez-vous sur http://kouto-swiss.io pour obtenir un aperçu complet..
Et rappelez-vous, si vous avez besoin d'un coup de pouce pour lancer le développement de votre stylet, regardez les deux vidéos gratuites de mon cours pour apprendre à démarrer: Devenez un super-héros CSS avec Stylus.
Accentsconagua