Création d'un thème Uikit personnalisé avec Gulp et moins

Les plats clés

• Le personnalisateur d'Uikit peut être utilisé pour créer des thèmes et des variations de thème (styles) uniques pour les sites Web, ce qui leur permet de se démarquer de la foule. Le processus est simple mais nécessite un flux de travail approprié pour minimiser les complications.
• Pour configurer la personnalisation, il faut télécharger ou cloner le référentiel UIKIT, installer le nœud et gulp et installer les dépendances de développement de l'UIKIT. Ensuite, dans le répertoire racine, un dossier du thème peut être créé et les fichiers nécessaires ajoutés et modifiés.
• UIKIT fournit des crochets pour des personnalisations plus complexes, permettant aux développeurs d'ajouter de nouvelles règles ou de modifier les règles existantes sans briser le noyau. Chaque composant a un crochet, qui peut être utilisé pour créer de nouveaux sélecteurs ou modifier ceux existants.
• Le personnalisateur de GUI peut être utilisé directement pour des modifications plus simples. Il permet aux développeurs de modifier les variables, d'obtenir le fichier CSS final pour le thème et de créer automatiquement des styles lors de la création de variations de thème. Il permet également de contrôler la visibilité et la disponibilité des variables dans le panneau de gauche du personnalisateur.

Tout le monde veut être unique. Je suppose que vous ne serez pas super heureux si dans votre environnement il y a beaucoup de gens qui vous ressemblent, non? Cela est également vrai pour les autres personnes. Vos amis ne seront pas non plus heureux de voir des clones de vous partout. Il en va de même pour nos sites Web.

De nos jours, la construction d'un site Web avec un cadre frontal est courante. Le problème est cependant que de nombreuses personnes blâment ces cadres pour que tous les sites Web «se ressemblent». Mais l'outil n'est pas à blâmer si les développeurs ne sont pas disposés à faire les personnalisations nécessaires.

Pour ceux d'entre vous qui souhaitent que les sites Web que vous construisez se démarquent de la foule, je vais montrer comment vous pouvez utiliser le personnalisateur d'Uikit pour créer différents thèmes et variations de thème (styles). Le processus est simple, mais vous avez besoin d'un flux de travail approprié pour le faire avec un minimum de maux de tête.

Configuration de la personnalisation

Disons que vous souhaitez créer un thème sombre pour votre site Web avec Orange comme couleur d'accent. En outre, vous voulez deux autres variantes de ce thème avec des couleurs d'accent bleu et vert. Voyons comment nous pouvons le faire. (Remarque: Pour le souci de concision, je n'utiliserai que des boutons pour démontrer le processus).

Nous devrons commencer par s'assurer que les étapes suivantes sont terminées:

• Télécharger ou cloner le référentiel Uikit.
• Installez le nœud et gulp, si vous ne les avez pas déjà.
• Installez les dépendances de développement d'Uikit. Vous pouvez le faire en naviguant vers le répertoire root Uikit et en exécutant l'installation de NPM à partir du terminal.

Lorsque tout cela est configuré correctement, nous pouvons commencer à créer notre thème.

Création de notre thème

Toujours dans le répertoire racine, créez un dossier appelé «Custom». Dans ce dossier, créez un autre appelé «Dark» et à l'intérieur, créez un fichier appelé uikit.less. Ouvrez le fichier et ajoutez ce qui suit:

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

La première ligne obtiendra tous les fichiers moins du cadre central et la deuxième ligne importera le fichier que vous allez utiliser pour modifier les boutons Uikit par défaut. Enregistrez et fermez le fichier et créez le bouton susmentionné.

Avant de créer d'autres personnalisations, vous devez rendre votre thème disponible localement dans le personnalisateur. Pour ce faire, dans le répertoire des racines Uikit, exécutez ce qui suit dans le terminal:

gulp indexthemes

Lancez maintenant votre copie locale du site Web UIKIT (celle que vous avez installée) et cliquez sur «Customizer» dans la barre de navigation. Lorsque vous ouvrez la liste déroulante «Sélectionner un thème», vous devriez voir «Dark» à la fin. À ce stade, lorsque vous le sélectionnez, vous verrez qu'il n'y a pas de style. Pourquoi pas? Voyons voir.

Une chose non mentionnée dans la documentation d'Uikit et qui peut vous coûter beaucoup de maux de tête, c'est que votre thème a besoin d'un fichier appelé uikit-customzer.less. Créez le fichier et ajoutez la ligne suivante:

<span><span>@import "uikit.less"</span></span>

Vous devez mettre ce fichier, avec la ligne ci-dessus, dans le répertoire racine du thème (à l'intérieur du dossier «sombre», dans notre cas). Si ce fichier n'est pas présent, vous ne pouvez pas utiliser correctement le personnalisateur - le nom du thème apparaîtra dans la liste, mais les styles seront manquants.

Remarque: En règle générale, le fichier UIKit-Customzer.less doit importer tous les fichiers que votre thème utilise. Dans notre exemple, l'importation d'Uikit.less répond à cette exigence car elle inclut à la fois les styles Uikit par défaut et vos styles de bouton personnalisés.

Après avoir ajouté le fichier UIKit-Customizer.less, vous verrez que cette fois tous les composants sont correctement stylés. Donc, nous sommes prêts à passer à autre chose.

Dans la liste déroulante du composant, placée dans le coin supérieur gauche du panneau sur le côté droit du personnalisateur, passez à "Bouton". De cette façon, vous pourrez voir tous les styles de bouton disponibles. Maintenant, nous pouvons ouvrir le fichier Button.less et commencer à ajouter nos modifications:

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

Dans le code ci-dessus, nous avons modifié les variables pour le texte du bouton par défaut et les couleurs d'arrière-plan dans leurs états normaux, planés et actifs. Pour d'autres boutons spécifiques, nous devons également modifier ces variables:

<span><span>@button-primary-color: darken(@button-primary-background, 20%);</span>
</span><span><span>@button-success-color: darken(@button-success-background, 20%);</span>
</span><span><span>@button-danger-color: darken(@button-danger-background, 20%);</span>
</span>
<span><span>@button-primary-hover-color: fade(@button-primary-color, 75%);</span>
</span><span><span>@button-success-hover-color: fade(@button-success-color, 75%);</span>
</span><span><span>@button-danger-hover-color: fade(@button-danger-color, 75%);</span>
</span>
<span><span>@button-primary-active-color: lighten(@button-primary-color, 35%);</span>
</span><span><span>@button-success-active-color: lighten(@button-success-color, 35%);</span>
</span><span><span>@button-danger-active-color: lighten(@button-danger-color, 35%);</span></span>

en utilisant des crochets dans uikit

La modification des variables d'Uikit est le moyen le plus simple de modifier l'apparence des composants du cadre lorsqu'il s'agit de simples modifications. Mais pour des personnalisations plus complexes, telles que l'ajout de nouvelles règles et / ou la modification des existants sans casser le noyau, l'UIKIT fournit un mécanisme spécial. Il utilise

hooks pour ajouter en toute sécurité vos modifications. Voyons cela en action. Mettez le code suivant sous les variables, à l'intérieur du bouton.

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

Ici, le crochet pour le composant bouton est utilisé pour ajouter un rayon de bordure et un effet de shat-shadow.

Pour des changements encore plus spécifiques, l'UIKIT fournit des crochets divers. Chaque composant a un tel crochet. Ceci est utile pour créer de nouveaux sélecteurs ou modifier ceux qui n'ont ni une variable ni un crochet disponible pour la personnalisation. Voyons cela en ajoutant le code suivant:

gulp indexthemes

Ici, nous supprimons le shop-shadow pour chaque bouton actif qui n'est pas désactivé. Ensuite, nous supprimons le soulignement des liens dans tous les états. Enfin, nous supprimons le contour du lien du bouton et ajoutons à la place une belle bordure, illustré lorsque le lien est focalisé. Enregistrez le fichier Button.less.

Remarque: vous pouvez voir tous les crochets disponibles pour un composant particulier en regardant la toute fin de son fichier. Voici un exemple pour le composant bouton.

<span><span>@import "uikit.less"</span></span>

Alors maintenant, le thème principal est prêt et vous pouvez le vérifier dans le personnalisateur. Il suffit de recharger la page et de profiter.

Création de styles pour notre thème

Maintenant, nous sommes prêts à créer les styles du thème. Dans le répertoire de notre thème sombre, nous créerons un nouveau dossier appelé "Styles" et à l'intérieur que nous en créerons un autre appelé "Blue". Dans ce dossier, créez un fichier de style vide. Copiez les trois premières lignes de code à partir de votre fichier Button.less et collez-les dans le fichier, puis modifiez la valeur de @ bouton-Color en # 09F et enregistrez le fichier. Le contenu du fichier ressemblera à ceci:

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

Exécutez à nouveau Gulp IndexThemes dans le terminal pour inclure le style nouvellement créé, puis revenez au personnalisateur et actualisez la page. Maintenant, à la fin de la liste des thèmes, vous devriez voir une option «bleu foncé». Sélectionnez-le et vous verrez que maintenant les boutons apparaissent avec un bel accent bleu. Pour le style vert, répétez la même procédure mais utilisez plutôt une valeur de couleur de # 9C0.

Lorsque vous êtes satisfait de votre thème, vous pouvez le construire en exécutant cette tâche:

<span><span>@button-primary-color: darken(@button-primary-background, 20%);</span>
</span><span><span>@button-success-color: darken(@button-success-background, 20%);</span>
</span><span><span>@button-danger-color: darken(@button-danger-background, 20%);</span>
</span>
<span><span>@button-primary-hover-color: fade(@button-primary-color, 75%);</span>
</span><span><span>@button-success-hover-color: fade(@button-success-color, 75%);</span>
</span><span><span>@button-danger-hover-color: fade(@button-danger-color, 75%);</span>
</span>
<span><span>@button-primary-active-color: lighten(@button-primary-color, 35%);</span>
</span><span><span>@button-success-active-color: lighten(@button-success-color, 35%);</span>
</span><span><span>@button-danger-active-color: lighten(@button-danger-color, 35%);</span></span>

Cela créera le thème sombre et le mettra dans un dossier «dist» dans le répertoire racine Uikit. Ensuite, dans le dossier "CSS", vous trouverez des fichiers uikit.dark.css et uikit.dark.min.css. Malheureusement, ces fichiers ne contiennent que des styles de votre thème principal. Les styles bleus et verts ne sont pas inclus. Mais vous pouvez également obtenir les fichiers CSS pour ceux-ci en utilisant le personnalisateur GUI, comme je vais l'expliquer ensuite.

en utilisant le personnalisateur de GUI

Je vous ai montré comment créer un thème manuellement, car il est toujours bon de connaître le mécanisme sous-jacent d'un processus particulier. Mais si vous n'avez pas besoin de modifications complexes, vous pouvez utiliser directement le personnalisateur de GUI. Explorons les étapes nécessaires.

• Allez au personnalisateur et sélectionnez le thème que vous souhaitez personnaliser.
• Utilisez le panneau de gauche pour modifier les variables. Habituellement, seules les variables globales sont affichées. Pour que les variables des composants soient visibles, vous devez activer l'option «Mode avancé». Par défaut, une variable dont les valeurs sont définies via une autre variable sont cachées. En mode avancé, vous pouvez voir un bouton «(plus)» à côté de groupes qui incluent ces types de variables.
• apportez les modifications que vous souhaitez et appuyez sur le bouton "Get CSS". Cela vous donnera le fichier CSS final pour votre thème. Vous pouvez utiliser ce bouton pour obtenir les fichiers CSS pour vos styles bleus et verts. Sélectionnez simplement «Dark-Blue» ou «Dark-Green» et cliquez sur le bouton.
  
  • Si vous voulez une version minifiée, vérifiez l'option «Minify CSS»
  • Si vous utilisez des langues de gauche à droite, vérifiez le «mode RTL» et que le thème entier se convertira automatiquement.
• Si vous appuyez sur le bouton "Get moins" au lieu du bouton "Get CSS", le fichier de sortie ne contiendra que les variables modifiées. De cette façon, vous pouvez créer des styles automatiquement lorsque vous créez des variations de thème.

Chaque thème utilise un fichier personnalisé.json définissant les variables affichées par défaut ou uniquement en mode avancé. En modifiant ce fichier, vous pouvez contrôler la visibilité et la disponibilité des variables dans le panneau de gauche du personnalisateur. Pour plus de détails à ce sujet, consultez la page Customizer.json.

Remarque: Lorsque vous exécutez la tâche IndexThemes, si votre thème n'a pas son propre fichier personnalisateur.json (qui est le cas lorsque vous créez un nouveau thème), UIKIT utilise le fichier à partir du thème par défaut (/ Thèmes / Default / Customzizer.json). Si vous prévoyez de personnaliser ce fichier, vous devez le copier et le coller dans le répertoire racine de votre thème et exécuter à nouveau Gulp IndexThemes pour mettre à jour le thème.

Conclusion

Vous avez vu que la personnalisation d'un cadre frontal particulier n'est pas une tâche aussi difficile qu'elle peut le paraître au début. Avec une certaine connaissance de Gulp et des efforts supplémentaires, vous pouvez rendre vos sites Web suffisamment uniques pour vous démarquer de la foule sans être étiqueté comme ayant été construit avec un cadre spécifique.

Des questions fréquemment posées sur le thème Uikit personnalisé avec Gulp & moins

Comment puis-je créer un thème Uikit personnalisé à l'aide de Gulp et moins?

Création d'un thème Uikit personnalisé à l'aide de Gulp et moins implique plusieurs étapes. Tout d'abord, vous devez installer Node.js et NPM sur votre ordinateur. Ensuite, vous devez installer Gulp et moins à l'aide de NPM. Après cela, vous pouvez cloner le référentiel UIKIT de GitHub et installer ses dépendances. Une fois que vous avez fait cela, vous pouvez commencer à créer votre thème personnalisé en modifiant les moins de variables dans le fichier theme.less. Vous pouvez ensuite compiler votre thème à l'aide de Gulp, qui générera un fichier CSS que vous pouvez inclure dans votre projet.

Quels sont les avantages de l'utilisation de Gulp et moins pour créer un thème Uikit?

Gulp et moins offrir plusieurs avantages pour créer un thème Uikit. Gulp est un coureur de tâche qui peut automatiser des tâches répétitives comme la minification, la compilation, les tests unitaires et la libellur. Cela peut vous faire économiser beaucoup de temps et d'efforts. Moins, en revanche, est un pré-processeur CSS qui vous permet d'utiliser des variables, des mixins, des fonctions et d'autres fonctionnalités qui peuvent rendre votre CSS plus maintenable, théorique et extensible.

Puis-je utiliser d'autres CSS pré-processeurs comme Sass ou Stylus pour créer un thème Uikit?

Oui, vous pouvez utiliser d'autres pré-processeurs CSS comme Sass ou Stylus pour Créez un thème Uikit. Cependant, vous devez garder à l'esprit que l'Uikit est construit avec moins, vous devrez donc peut-être faire un travail supplémentaire pour convertir le code moins en sass ou stylet.

Comment puis-je personnaliser les couleurs, les polices et Autres éléments d'un thème Uikit?

Vous pouvez personnaliser les couleurs, les polices et autres éléments d'un thème Uikit en modifiant les variables les moins dans le fichier the thème.less. Par exemple, vous pouvez modifier la couleur primaire en modifiant la variable @ primaire-couleur. Vous pouvez également modifier la famille des polices en modifiant la variable @ font-Family-Base.

Comment puis-je ajouter des composants personnalisés à un thème UIKIT?

Vous pouvez ajouter des composants personnalisés à un thème UIKIT En créant de nouveaux fichiers moins pour eux et en les important dans le fichier thème.less. Vous pouvez ensuite utiliser les mixins et variables Uikit pour styliser vos composants.

Comment puis-je tester mon thème UIKIT personnalisé?

Vous pouvez tester votre thème Uikit personnalisé en incluant le fichier CSS généré dans un Fichier HTML et l'ouvrir dans un navigateur Web. Vous pouvez ensuite inspecter les éléments et vérifier s'ils sont stylisés comme prévu.

Comment puis-je optimiser mon thème Uikit personnalisé pour la production?

Vous pouvez optimiser votre thème Uikit personnalisé pour la production en utilisant Gulp pour minimer le fichier CSS. Cela réduira la taille du fichier et améliorera la vitesse de chargement de votre site Web.

Puis-je vendre mon thème Uikit personnalisé sur des marchés comme Themeforest?

Oui, vous pouvez vendre votre thème Uikit personnalisé sur les marchés comme Themeforest. Cependant, vous devez vous assurer que votre thème répond aux normes de qualité du marché et que vous avez les droits nécessaires pour le vendre.

Comment puis-je mettre à jour mon thème UIKIT personnalisé lorsqu'une nouvelle version d'Uikit est publiée ?

Vous pouvez mettre à jour votre thème UIKIT personnalisé lorsqu'une nouvelle version d'Uikit est publiée en fusionnant les modifications de la nouvelle version dans votre thème. Vous pouvez ensuite tester votre thème pour vous assurer qu'il fonctionne correctement avec la nouvelle version.

Puis-je utiliser mon thème Uikit personnalisé dans un thème WordPress?

Oui, vous pouvez utiliser votre uikit personnalisé Thème dans un thème WordPress. Il vous suffit d'inclure le fichier CSS généré dans votre thème WordPress et d'utiliser les classes Uikit dans vos modèles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!