Une nouvelle version améliorée de Progress ThemeBuilder est arrivée ! L’outil évolué rendra le style de vos composants d’interface utilisateur un jeu d’enfant, alors lisez la suite si vous stylisez déjà ou prévoyez de styliser vos composants d’interface utilisateur Telerik et Kendo.
La nouvelle version du Progress® ThemeBuilder™publié avec R3 2022, est officiellement 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. L’interface utilisateur Telerik pour ASP.NET AJAX continuera à utiliser la version précédente de ThemeBuilder pour le moment en raison des différences significatives dans le rendu des composants.
Qu’est-ce que le Progress ThemeBuilder ?
Si c’est la première fois que vous en entendez parler, le ThemeBuilder est une application Web qui permet aux développeurs de personnaliser l’apparence des composants Web Telerik et Kendo UI sans avoir à plonger en profondeur dans Sass ou CSS. Le ThemeBuilder prend en charge toutes nos bibliothèques de composants d’interface utilisateur Web, notamment jQuery, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, ASP.NET AJAX, PHP, JSP et Blazor.
Un fait peu connu est que toutes ces implémentations de ThemeBuilder sont construites à partir de zéro pour chaque plate-forme qu’elles prennent en charge. Cela signifie que le KendoReact ThemeBuilder a été construit avec React et KendoRéagirla Interface utilisateur de Kendo pour Angular ThemeBuilder a été construit avec Angular et le Interface utilisateur Kendo pour les composants angulaires (etc). Comme vous pouvez l’imaginer, ce n’était ni efficace ni évolutif pour nous en tant que fournisseur de cet outil.
Nous n’avions pas non plus ajouté beaucoup de nouvelles fonctionnalités au ThemeBuilder récemment, et nous voulions y remédier. Ainsi, alors que nous commencions à travailler sur les améliorations des différents ThemeBuilders, l’équipe en a profité pour repenser la façon dont nous livrons le ThemeBuilder et où un ThemeBuilder « universel » pourrait vivre.
C’est là que le nouveau ThemeBuilder entre en jeu. La nouvelle application vise à supprimer un niveau de complexité en facilitant autant que possible la personnalisation des styles des composants de l’interface utilisateur Telerik et Kendo pour s’adapter aux guides de style existants. Cela semble familier à ce que le précédent ThemeBuilder a essayé de faire. Cependant, le ThemeBuilder précédent ciblait uniquement les styles de haut niveau, nous avons donc décidé d’étendre ses fonctionnalités pour permettre une personnalisation complète des styles de chaque élément de nos composants d’interface utilisateur.
Comme toujours, votre contribution a été un ingrédient crucial dans les changements que nous avons apportés. Nous avons recueilli tous les commentaires que nous avons reçus sur plus d’options de personnalisation pour le ThemeBuilder et mis en œuvre de nombreuses nouvelles fonctionnalités et améliorations dans le nouvel outil.
Certains peuvent se demander pourquoi nous ajoutons ces fonctionnalités à un nouvel outil ThemeBuilder au lieu de mettre à jour l’application d’origine. La raison principale est que nous voulons que vous ayez une expérience nouvelle, moderne et plus rapide en matière de style, axée sur la satisfaction de vos besoins actuels et futurs.
Nous voulions également créer un outil de style universel pour remplacer les multiples applications ThemeBuilder que nous prenons actuellement en charge. Une application unique mais universelle nous permettra d’ajouter facilement des fonctionnalités et des améliorations pour toutes nos suites de composants d’interface utilisateur Web beaucoup plus rapidement, car nous n’avons pas à implémenter la même fonctionnalité plusieurs fois. Notre objectif est que la nouvelle application ThemeBuilder soit le meilleur endroit pour styliser vos composants d’interface utilisateur Telerik et Kendo en fonction de votre guide de style ou de votre système de conception.
Cela vous donnera un outil unique pour tous vos besoins en ce qui concerne nos thèmes, et si vous utilisez nos bibliothèques d’interface utilisateur sur plusieurs plates-formes, le gain de productivité sera exponentiel.
Un avantage supplémentaire que ce nouvel outil offre est une augmentation de 100% des performances à tous les niveaux. Cela signifie que chaque interaction dans le nouveau ThemeBuilder est deux fois plus rapide, ce qui vous fera gagner du temps lors de l’utilisation de l’outil.
Vous pouvez être assuré que la nouvelle application ThemeBuilder disposera de 100 % des fonctionnalités qui étaient disponibles dans la version précédente de ThemeBuilder, et bien d’autres !
Premiers pas avec le nouveau ThemeBuilder
Passons en revue un flux de travail utilisateur typique afin que vous puissiez voir que nous avons conservé le même ensemble de fonctionnalités et de mise en page que vous connaissez et aimez du ThemeBuilder d’origine. En bref, vous pourrez continuer à styliser vos composants comme vous l’avez toujours fait sans avoir à apprendre un nouvel outil.
La première étape: Connectez-vous à ThemeBuilder en utilisant votre compte Telerik existant. Si vous n’en avez pas, vous pouvez en créer un gratuitement.
Nous introduisons une connexion afin que vous puissiez enregistrer tous vos projets dans votre compte et leur permettre de se synchroniser. De cette façon, vous pouvez enregistrer votre progression et revenir plus tard, ou poursuivre plusieurs projets en même temps. Il s’agit d’une amélioration par rapport à la version précédente, qui ne prenait pas en charge les comptes d’utilisateurs et l’enregistrement des fichiers.
Deuxième étape : Créez un nouveau projet. Cela vous permettra de conserver toutes les modifications dans votre profil et de le personnaliser ultérieurement si nécessaire. Vous pouvez également avoir plusieurs projets de style pour les différentes applications sur lesquelles vous travaillez, le tout en un seul endroit.
Troisième étape: Choisissez un thème comme base. Vous pouvez utiliser l’un de nos magnifiques thèmes Telerik et Kendo et y appliquer vos modifications de style.
Appuyez sur le bouton « Créer » et vous aurez un nouveau projet et serez prêt à personnaliser les composants.
Vous trouverez une poignée d’outils et de fonctionnalités pour vous aider à personnaliser les composants.
Volet Variables
Vous trouverez la liste de toutes les variables de haut niveau des thèmes Telerik et Kendo que vous pouvez utiliser pour styliser nos composants globalement sur le côté gauche. Par exemple, changer la couleur primaire la mettra à jour dans tous les composants utilisant cette variable. Vous pouvez également ajouter des variables personnalisées et les réutiliser dans plusieurs composants. Pour ceux qui ont déjà utilisé le ThemeBuilder, vous remarquerez que la convention de dénomination est légèrement différente ici. En effet, nous alignons désormais les noms de variables dans le ThemeBuilder sur ceux trouvés dans nos thèmes basés sur Sass, garantissant ainsi que le même langage est utilisé tout au long de votre parcours de personnalisation.
Échantillons
Nous vous proposons un ensemble de palettes de couleurs prédéfinies pour chaque thème, que nous appelons « échantillons ». Ces échantillons sont des combinaisons de couleurs qui ont été triées sur le volet par nos designers et nos experts UX pour s’assurer que les couleurs s’accordent bien. Lors de la sélection de l’un de ces échantillons, tous les composants répertoriés sur la page seront immédiatement mis à jour avec les couleurs sélectionnées, le tout en un seul clic. Par exemple, vous pouvez avoir une version sombre des thèmes simplement en utilisant l’un des échantillons intégrés.
Exportez votre thème personnalisé
Une fois que vous êtes prêt avec les modifications, vous pouvez cliquer sur le bouton d’exportation et télécharger votre thème personnalisé. Nous allons générer un package npm que vous pouvez ajouter au contrôle de version, ou vous pouvez utiliser les styles directement. Le package contiendra des fichiers CSS et Sass déjà minifiés pour tous ceux qui souhaitent appliquer des modifications directement aux fichiers de style bruts.
Présentation de ThemeBuilder Pro pour les personnalisations avancées
La création d’un tout nouveau ThemeBuilder avec des performances améliorées, la prise en charge de la synchronisation de plusieurs projets et bien plus n’est pas la seule chose sur laquelle nous nous sommes occupés ces derniers mois. Nous présentons également le nouveau ThemeBuilder Pro, qui s’appuie sur les fonctionnalités mises en évidence ci-dessus et introduit de nombreuses autres options pour une personnalisation détaillée. Ces fonctionnalités vous permettront de faire passer vos personnalisations de style au niveau supérieur.
Utilisation de la personnalisation atomique
ThemeBuilder Pro vous permet d’apporter plusieurs modifications de style par composant et ses états. Vous voulez que votre bouton ait une couleur et que le bouton ciblé en ait une autre ? Maintenant, vous pouvez le faire. Vous pouvez également personnaliser plus de 50 styles et propriétés différents par composant.
Cette fonctionnalité vous permettra d’apporter des modifications de style détaillées à chaque composant de l’interface utilisateur pour répondre à vos besoins en matière de style. Nous utilisons la personnalisation atomique, et vous pourrez personnaliser chaque partie des composants.
Création de variables personnalisées
Nous connaissons tous les avantages de l’utilisation de variables dans le code, ce qui vous fait gagner du temps lorsque vous devez les mettre à jour. Avec ThemeBuilder Pro, vous pouvez créer des variables personnalisées que vous pourrez ensuite utiliser dans les éditeurs de composants et même dans d’autres parties de l’application.
Ces variables personnalisées peuvent être utiles lorsque vous souhaitez ajouter des variables supplémentaires en plus des variables existantes dans nos thèmes. Par exemple, si vous souhaitez utiliser la même couleur pour le texte du guide de style de votre entreprise (système de conception), vous pouvez créer une variable personnalisée avec cette couleur et l’utiliser dans plusieurs composants. Si vous devez modifier la couleur ultérieurement, vous devez mettre à jour uniquement la variable, et non tous les composants qui doivent avoir cette couleur de texte.
Partage de projets et fonctionnalités de collaboration
Vous pouvez maintenant partager le projet avec tous les membres de votre équipe et permettre à plusieurs personnes de travailler sur le projet en même temps. Cela peut encore augmenter votre productivité car vous pouvez coiffer un composant pendant que votre collègue en coiffe un autre.
Il y a plus à venir
Nous prévoyons encore plus de mises à jour à l’avenir pour rendre les composants de style un jeu d’enfant.
L’une de nos améliorations prévues consiste à permettre la migration automatique des styles vers la dernière version des thèmes et des composants en un seul clic. Chaque fois qu’une nouvelle version du thème est disponible, la mettre à jour sera aussi simple que de cliquer sur un bouton !
En savoir plus sur le nouveau ThemeBuilder et démarrez un essai gratuit de 7 jours pour le voir en action !
Nous sommes impatients d’entendre vos commentaires ! Quelles autres fonctionnalités aimeriez-vous voir à l’avenir ?
Source link