Découvrez laquelle de ces approches de style et de thème des composants de l’interface utilisateur Kendo fonctionne le mieux pour votre équipe et votre projet.
Comme nous l’avons exploré dans d’autres blogs, il y a plusieurs options quand il s’agit d’écrire (ou de ne pas écrire !) du CSS pour vos composants Kendo UI. Aujourd’hui, nous allons examiner quelques exemples de code et explorer comment ces différentes options fonctionneraient dans un environnement réel.
Comme pour la plupart des choses en technologie, il n’y a pas vraiment de bonne ou de mauvaise approche ici, juste différentes manières de faire les choses. En fin de compte, chacune de ces options vous offrira une application magnifiquement stylée utilisant nos composants d’interface utilisateur Kendo hautement personnalisables et accessibles. Les seules options qui sont « mauvaises » sont celles qui ne conviennent pas à votre équipe ! Ce guide vous aidera à prendre une décision éclairée quant à l’approche de style qui vous convient le mieux.
Générer du CSS ou du SCSS avec ThemeBuilder
Générateur de thèmes est un éditeur WYSIWYG complet (ce que vous voyez est ce que vous obtenez) pour tous nos composants, permettant aux développeurs ou aux concepteurs d’approfondir et personnaliser les détails de chaque composant—sans avoir à écrire de CSS eux-mêmes !
C’est une solution idéale pour les équipes qui ne disposent pas d’ingénieur UX ou d’un autre spécialiste du front-of-the-front-end et qui préféreraient ne pas styliser les composants manuellement. C’est également une option fantastique pour les entreprises disposant d’une équipe de conception : l’approche sans code du style ThemeBuilder permet concepteurs non-codeurs pour implémenter eux-mêmes un système de conception ou un thème d’interface utilisateur, sans avoir à naviguer dans le fameux transfert. Lorsque les composants de l’aperçu en direct ressemblent exactement à ce que vous souhaitez, il vous suffit de cliquer sur le bouton Exporter pour générer du code prêt pour la production, à la fois en CSS Vanilla et en SCSS.
Si vous utilisez du CSS Vanilla dans votre application, le CSS ThemeBuilder exporté sera un gros fichier CSS réduit, similaire à de nombreuses bibliothèques CSS standard. Utilisez-le comme styles globaux pour votre application et ne perdez plus une seconde à penser au CSS !
Toutefois, si vous utilisez SCSS dans votre application, les fichiers ThemeBuilder exportés seront légèrement plus complexes, mais également beaucoup plus lisibles par l’homme. Il se présente sous la forme d’un ensemble de trois fichiers interconnectés : _overrides.scss,
_tokens.scss et index.scss.
Le index.scss file importe simplement tout le contenu de style requis dans un seul fichier « hub », qui peut ensuite être utilisé comme page de style globale.
_themes.scss définit toutes les variables utilisées dans votre thème.
Et (comme vous pouvez le deviner) _overrides.scss C’est là que vous trouverez tous les ajustements de style de composant spécifiques que vous avez définis dans le panneau d’édition avancée de ThemeBuilder.
Écriture manuelle de CSS ou SCSS
Il existe plusieurs options différentes pour les équipes qui préfèrent adopter une approche légèrement plus pratique de leur style. Jetons-y un coup d’œil du moins au plus impliqué :
Utilitaires CSS
Les thèmes de l’interface utilisateur Kendo sont tous fournis avec Utilitaires CSS, une approche de style Tailwind basée sur notre ensemble de classes utilitaires prédéfinies. Avec CSS Utilities, vous n’aurez pas à définir aucune des classes vous-même : vous pouvez simplement appliquer les classes sans écrire de CSS. Une liste complète des classes d’utilitaires CSS disponibles peut être trouvée dans notre
Documentation du système de conception.
Une fois appliqué, le code HTML ressemblera à ceci :
Variables SCSS
Pour ceux qui souhaitent avoir un contrôle un peu plus direct, en écrivant eux-mêmes certains styles, mais pas tous, nous proposons un large éventail de variables SCSS qui peut être facilement personnalisé. Chaque thème de Kendo UI comprend un ensemble de variables qui peuvent être ajustées pour faciliter la création de thèmes. La liste des variables est légèrement différente pour chaque thème et se trouve dans notre documentation pour le Défaut, Amorcer et Matériel thèmes.
Et la réaffectation des valeurs par défaut de ces variables ressemble à ceci :
Modification du code source du thème
Bien entendu, il est également tout à fait possible de éditer directement le code source des thèmes-bien que ce ne soit pas particulièrement recommandé, sauf si vous êtes un expert en CSS.
Pour créer votre propre thème personnalisé en modifiant manuellement le code source, vous devrez cloner le kendo-themes dépôt et installez les dépendances pour tous les thèmes (
npm install && npx lerna bootstrap). Ensuite, vous pourrez apporter toutes les modifications que vous souhaitez !
Les styles dans kendo-themes sont répartis par type de thème, puis à nouveau par composant. Ainsi, par exemple, si vous souhaitez mettre à jour certains styles du composant Button dans le thème par défaut, vous souhaiterez accéder à
kendo-themes/packages/default/scss/button.
Dans chaque dossier de composant, vous trouverez quatre fichiers : _index.scss, _layout.scss, _theme.scss et _variables.scss. En général, vous souhaiterez quitter le _index.scss fichier seul, puisqu’il s’agit simplement de collecter et d’exposer les divers autres fichiers nécessaires. Le
_layout le fichier a des styles de positionnement, d’espacement et d’alignement. Le _theme C’est dans ce fichier que vous personnaliserez les options d’affichage pour différents états et variantes de composants. Et bien sûr _variables C’est ici que vous pouvez mettre à jour les variables SCSS utilisées dans les styles de composants.
Lorsque vous êtes prêt à construire, exécutez simplement npm run sass ou npm run dart pour créer votre thème personnalisé, vous le trouverez dans la packages/[theme name]/dist/all.css déposer. Ajoutez le CSS compilé à votre projet et vous êtes prêt à partir !
Qu’est-ce qui convient le mieux à votre équipe ?
Avec cette grande variété d’approches, Kendo UI vous permet de styliser et de thématiser nos composants, peu importe à quel point vous êtes à l’aise (ou non) avec l’écriture de CSS !
Si vous avez un concepteur, il adorera pouvoir effectuer ses propres modifications et implémenter son propre système de conception dans ThemeBuilder. Si vous avez juste besoin de pouvoir effectuer quelques personnalisations rapides, les utilitaires CSS facilitent l’ajout de styles prédéfinis basés sur les classes sans jamais ouvrir de fichier CSS. Si vous disposez d’un ingénieur frontend ou UX spécialisé, ils apprécieront l’accès complet et les niveaux élevés de contrôle dont ils peuvent disposer en modifiant directement le code source du thème. Essayez-les tous et voyez lequel correspond le mieux aux besoins de votre équipe et de votre projet !
Source link