4 façons de styliser vos composants KendoReact

Que vous remplaciez simplement la couleur primaire pour refléter plus fidèlement votre marque ou que vous redéfinissiez complètement l’ensemble de la bibliothèque avec un design personnalisé, KendoReact facilite la modification de l’apparence et de la convivialité de nos composants avec quatre façons différentes de styliser et thème.

Écoutez, nous comprenons – il y a beaucoup à aimer dans le style Default KendoReact, mais parfois vous voulez juste le changer un peu ! KendoRéagir facilite la modification de l’aspect et de la convivialité de nos composants.

En fait, il y a quatre manières différentes faire cela. Celui que vous devriez choisir dépend de quelques facteurs, tels que combien vous aimez écrire du CSS, l’étendue de vos modifications, et plus encore. Laissez cet organigramme pratique vous guider tout au long du processus de prise de décision, puis lisez la suite pour plus de détails sur chaque approche !

Variables Sass

La personnalisation des variables Sass est notre approche recommandée pour les équipes avec un spécialiste frontend dédié.

Lorsque vous avez les connaissances CSS, il peut parfois sembler plus rapide d’ouvrir simplement le fichier et de commencer à faire ces ajustements vous-même. Ou peut-être que vous (comme moi !) adorez vraiment écrire du CSS ! Quoi qu’il en soit, nous nous assurons que ce n’est pas seulement possible, mais facile à faire lorsque vous utilisez KendoReact.

Nous utilisons Sass pour notre thématisation et nous avons intentionnellement exposé ces variables à votre usage, afin que vous puissiez personnaliser en utilisant la même approche que nous, si c’est votre confiture.

Chaque package de thème KendoReact comprend les fichiers source du thème, qui vous offrent des options pour modifier et reconstruire le thème dans le cadre de votre processus de construction. Par exemple, vous pouvez modifier les couleurs du thème, supprimer le CSS des composants inutilisés ou utiliser des couleurs de thème spécifiques pour styliser votre application. Les fichiers source du thème se trouvent dans le dossier scss dossier du package de thème.

Nous avons également toutes ces variables répertoriées dans notre documentation, si vous essayez de trouver ce qui en est responsable une chose précise vous essayez de changer. Voici ces liens pour notre Défaut, Amorcer et Matériel thèmes.

Kits Figma

Les kits d’interface utilisateur Figma sont notre approche recommandée pour les équipes qui incluent un concepteur.

Si vous n’êtes pas familier avec le concept d’un kit d’interface utilisateur, il s’agit d’une collection de tous les éléments de votre conception d’interface utilisateur, y compris (mais sans s’y limiter) les polices, les couleurs, les icônes, les fichiers de conception de composants et la documentation. Ceux-ci sont utiles en eux-mêmes, à la fois comme forme de documentation et pour accélérer le processus de conception en fournissant un ensemble d’éléments de base qui peuvent être réutilisés dans de nouvelles conceptions, mais qui sont particulièrement puissant lorsqu’il est combiné avec une bibliothèque de composants existante, telle que les kits d’interface utilisateur Kendo pour Figma.

Dans cette situation, vous avez une parfaite corrélation 1 à 1 entre les composants que les développeurs utilisent et les composants que les concepteurs utilisent. Pensez-y comme à la pierre de Rosette de l’interface utilisateur : exactement les mêmes éléments, traduits dans différentes « langues ».

Avec nos kits Figma, nous offrons aux concepteurs un aperçu de la conception de nos plus de 100 composants, y compris tout leurs différents états d’interaction avec l’utilisateur et les principes de conception atomique que nous avons utilisés pour construire notre bibliothèque. Cela donne aux concepteurs une compréhension innée du fonctionnement des composants et de la manière dont les styles visuels sont appliqués, de nos plus petits jetons jusqu’à nos composants les plus complexes.

Nos kits d’interface utilisateur utilisent des composants Figma, permettant aux concepteurs d’apporter des modifications au niveau du composant de base ou du jeton et de voir les modifications immédiatement sur l’ensemble de la suite de composants KendoReact. Explorez, personnalisez et construisez, le tout à partir d’une ressource incroyable.

Sans oublier que tous ces jetons de conception dans Figma correspondent exactement (vous l’avez deviné) aux variables Sass que nous venons de mentionner, ce qui rend la mise en œuvre simple et nomme les conflits/malentendus une chose du passé.

Échantillons

Les échantillons sont notre approche recommandée pour les équipes qui cherchent à apporter des modifications minimales basées sur la couleur à un thème existant ou à correspondre à un système de conception existant (tel que Bootstrap, Material ou Fluent).

Lorsque vous avez juste besoin de mélanger la palette de couleurs et que vous ne cherchez pas à faire une refonte complète du design, Swatches est là pour vous. Un Swatch est un ensemble de variables qui personnalisent l’apparence du thème. Vous pouvez créer le vôtre ou choisir l’un des 14 échantillons différents créés par l’équipe de conception de Kendo UI.

Les échantillons sont utiles pour créer plusieurs variations de thème persistantes. La .css le fichier de sortie peut être partagé entre les projets et ne nécessite aucun traitement supplémentaire. Si vous choisissez de créer le vôtre, vous pouvez trouver plus d’informations et un guide étape par étape dans notre documentation. Mais, à mon avis, les échantillons préfabriqués sont là où cette approche brille vraiment – offrant aux équipes la possibilité de choisir une belle palette de couleurs bien conçue, testée, sans se soucier des choix de conception. C’est surtout utile si vous faites partie d’une équipe qui ne comprend pas de designer.

Lorsque vous consultez l’un de nos composants dans la documentation, vous pouvez utiliser la liste déroulante dans le coin supérieur droit pour prévisualiser les différents échantillons prédéfinis, classés par thème. Nous avons des thèmes pour trois systèmes de conception majeurs – Material, Bootstrap et Fluent – donc si vous en utilisez un, alors c’est définitivement l’approche qu’il vous faut !

ThemeBuilder Pro

La ThemeBuilder Pro est notre approche recommandée pour les équipes qui souhaitent apporter des modifications de conception à l’aide d’une interface WYSIWYG et exporter le code directement.

Si vous avez déjà utilisé nos composants, vous connaissez peut-être déjà la version existante de ThemeBuilder, une application Web qui permet aux développeurs de personnaliser et de styliser rapidement les composants trouvés dans n’importe quel de nos bibliothèques. C’était un moyen efficace d’apporter des modifications au niveau de la surface dans l’ensemble de la bibliothèque, puis d’exporter ce code à utiliser dans vos applications.

Cependant, cette première version de ThemeBuilder se limitait à la simple mise à jour des couleurs de base et à l’exportation de variables CSS ou Sass – utile pour les équipes qui avaient juste besoin de mettre à jour les composants KendoReact pour utiliser les couleurs de leur propre marque, mais pas vraiment assez pour les utilisateurs qui en avaient pleinement besoin. styles personnalisés.

C’est ce qui rend le nouveau ThemeBuilder Pro si excitant. C’est aussi une application Web, mais elle fonctionne comme un éditeur WYSIWYG complet pour tous nos composants, permettant aux développeurs ou aux concepteurs d’approfondir et de personnaliser les détails de chaque composant, sans toucher à aucun CSS ou Sass. Sans oublier qu’il a également été entièrement reconstruit et optimisé à partir de zéro, ce qui le rend significativement plus rapide que la version précédente.

Les utilisateurs du nouveau ThemeBuilder Pro peuvent toujours effectuer les mêmes mises à jour de couleurs rapides et faciles qu’auparavant, dans la barre latérale gauche. Vous pouvez également mettre à jour vos paramètres de typographie et de rayon de bordure dans ce panneau, qui s’appliqueront immédiatement à l’ensemble de la bibliothèque.

Une fois que vous avez défini ces valeurs, vous pouvez commencer à explorer l’apparence de ces paramètres dans tous les composants. Si vous voyez quelque chose qui ne semble pas tout à fait correct, ou tout simplement quelque chose qui n’est pas inclus dans cette liste que vous souhaitez ajuster (comme le rembourrage ou la marge, des paramètres de texte plus granulaires, la justification et l’alignement, le contour, les effets, etc.), alors le nouveau Modification avancée panneau vous guidera à travers ces options. Et à cause de la conception atomique approche, les modifications que vous apportez au bouton (par exemple) seront automatiquement répercutées dans chaque composant qui utilise ou inclut un bouton – barres d’outils, groupes de boutons, entrées, listes déroulantes, etc.

Nous savons que plusieurs mains font un travail léger, c’est pourquoi vous pouvez également partager votre thème ThemeBuilder Pro et travailler dessus avec un autre coéquipier. Collaborez en éditant des composants ensemble en temps réel ou partagez-les entre les équipes de produit afin que tout le monde puisse exporter les mêmes fichiers CSS et Sass pour obtenir une apparence vraiment cohérente dans votre suite d’applications.

Le ThemeBuilder Pro est disponible pour KendoRéagir, Interface utilisateur de Kendo pour Angular, Interface utilisateur de Kendo pour Vue et Interface utilisateur Telerik pour Blazor. La prise en charge de Kendo UI pour jQuery, Telerik UI pour ASP.NET MVC, Telerik UI pour ASP.NET Core, Telerik UI pour PHP et Telerik UI pour JSP sera lancée au début de l’année prochaine. Vous pouvez utiliser le nouveau ThemeBuilder sur le niveau gratuit (qui correspond étroitement à l’ensemble de fonctionnalités du précédent ThemeBuilder) – ou pour une fonctionnalité complète, essayez la version Pro avec un essai gratuit de 7 jours !

Quelle approche convient le mieux à votre équipe ?

Avec cette grande variété d’approches, KendoReact vous permet de styliser et de thématiser nos composants, quels que soient les rôles que votre équipe inclut (ou n’inclut pas) !

Si vous avez un designer, il adorera la profondeur et les ressources de nos kits Figma, leur permettant d’accéder à tous les composants de leur logiciel de conception natif. Si vous avez un ingénieur frontend ou UX spécialisé, il appréciera à quel point il est facile d’accéder à nos variables Sass et de les personnaliser sur l’ensemble de la suite de composants. Si vous avez juste besoin d’un moyen rapide de faire correspondre nos composants à un système de conception existant (comme Bootstrap, Material ou Fluent) ou de changer les couleurs, alors les échantillons sont la solution. Et pour les équipes de toutes formes et tailles, ThemeBuilder Pro est là pour rendre l’édition, la prévisualisation, le partage et la mise en œuvre des modifications de conception plus faciles que jamais !

Essayez-les tous et voyez lequel correspond le mieux aux besoins de votre équipe et de votre projet.