Conception de thèmes personnalisés avec Progress Sass ThemeBuilder

Créez rapidement et facilement le thème parfait pour votre application et appliquez-le à toutes les superbes bibliothèques d'interface utilisateur de Progress avec Sass ThemeBuilder. Les grilles, les graphiques, les sélecteurs et même les boutons sont tous corrigés en même temps! Jetons un coup d’œil.

Les couleurs importent. Il suffit de demander à votre service marketing. Bien sûr, vous souhaitez que vos applications aient un aspect génial, ce qui implique en partie que la conception des couleurs que vous utilisez doit être géniale. Mais vous voulez également empêcher vos concepteurs de produits de vous poursuivre dans la rue en criant: «Ce ne sont pas les couleurs de notre marque!". C'est simplement embarrassant pour tout le monde.

Peut-être plus important encore, vous voulez au moins donner à votre application une apparence semblable. vos autres applications donc il semble qu'elles proviennent d'une seule entreprise. Et à moins que vous n'essayiez délibérément de duper vos clients, vous souhaitez que les boutons des principales fonctions aient les mêmes couleurs que dans votre dernière application. C’est tout simplement pas cool d’avoir le bouton «Entrée» dans une application en bleu et le bouton «Supprimer définitivement toutes mes données» dans votre application suivante en bleu. Parce que cela fera également exploser la tête de votre personne UX, ce qui peut être désordonné.

Mais… oh ça alors… est-ce que cela signifie que vous devez vraiment modifier manuellement les couleurs en CSS pour chacun de vos composants d'interface utilisateur? Cela ne semble pas très amusant non plus. Mais avant que vous ne commenciez à penser que c’est peut-être acceptable si un seul concepteur d’UX n’explose, la réponse est simple. Vous avez juste besoin d'un outil pour vous aider à modifier simultanément les couleurs de conception de vos composants. Un outil qui vous permet de choisir parmi des thèmes de conception populaires ou d’ajuster vos propres thèmes. Un outil qui vous montre tout de suite à quoi ressemblera votre interface utilisateur avec les nouvelles couleurs. Un outil qui vous permettra de sauvegarder vos thèmes clients et de les éditer plus tard.

Si seulement un tel outil existait…

Entrez Progress Sass ThemeBuilder

Eh bien, un tel outil existe ou il s'agirait d'un blog très court. C’est le ThemeBuilder de Progress. Et ce n’est pas simplement un constructeur de thèmes CSS, c’est un constructeur de thèmes Sass pour tous les composants de l’interface Kendo. Sass, si vous ne le connaissez pas bien, est comme "CSS avec des superpuissances" (leurs mots) et est une extension de CSS complètement compatible avec CSS. L'utilisation de Sass nous permet d'utiliser des variables dans nos styles et facilite la propagation des valeurs dans toute une bibliothèque. Et j'espère que vous apprécierez tous que j'ai échappé à toutes les blagues sur le nom «Sass» – de rien!

Sass ThemeBuilder vous permet de créer rapidement et facilement le thème parfait pour votre application et de l'appliquer. dans toutes les superbes interfaces de Kendo, Telerik et autres bibliothèques d’UI de Progress. Les grilles, les graphiques, les sélecteurs et même les boutons sont tous fixés en même temps. Jetons un coup d'œil…

Pour commencer, accédez à l'utilitaire en ligne à l'adresse:

https://themebuilder.telerik.com/

La première chose que vous voyez est une liste des bibliothèques de produits pour lesquelles vous pouvez créer un thème, allant de Angular et React à ASP.NET et PHP. Chaque bibliothèque ayant des caractéristiques uniques, la manière de définir chaque thème est légèrement différente.

Si vous cliquez sur un produit (et ici j'ai sélectionné “Kendo UI”, qui est la version JavaScript de base), vous avez le choix entre démarrer un nouveau thème ou importer un thème personnalisé existant.

La nouvelle option de thème est évidente, mais pourquoi voudriez-vous importer un thème personnalisé existant? Ceci est réellement utile dans un certain nombre de scénarios.

Tout d'abord, vous pouvez travailler avec une nouvelle norme et créer un thème, voir à quoi il ressemble et éventuellement effectuer des tests utilisateur et peaufiner le thème. Plutôt que de repartir de zéro à chaque fois, vous pouvez simplement importer le thème que vous avez développé lors de votre dernière itération et le modifier. Sinon, vous devrez peut-être revenir des mois plus tard et apporter des modifications pour refléter les nouvelles normes de thème. Ou vous pourriez même trouver une couleur après un moment que vous avez oublié de définir. Ou quelqu'un d'autre a oublié de définir, plus probablement, parce que bien sûr * vous * ne commettriez jamais une telle erreur.

Cliquez sur «Démarrer le thème» et vous aurez un choix supplémentaire à faire avant de commencer: choisir le thème de base. à utiliser comme point de départ!

Il y a trois options:

• Notre propre thème par défaut (présenté ici et utilisant les blancs, les rouges et les gris)
• Bootstrap (basé sur le thème Bootstrap 4, utilisant les blancs et les bleus – my favori personnel)
• Matériel (basé sur les recommandations de Google relatives aux matériaux, qui utilise un mélange blanc / rouge / bleu / gris)

Vous pouvez bien sûr tout changer, mais cela vous donne un point de départ proche de beaucoup de choses. thèmes de couleur d'usage courant. Sélectionnez-en un (comme Bootstrap, car le bleu est la meilleure couleur) et cliquez sur «Créer».

Nous en arrivons maintenant à la partie la plus intéressante!

Nous sommes maintenant dans l'outil et nous avons plusieurs options. La première chose que nous voyons est un panneau sur le côté droit de l’écran qui nous montre tout un tas de composants: menus, boutons, sélecteurs, grilles, graphiques, éditeurs, etc. Notez que vous pouvez faire défiler cette liste et voir qu'il y a * beaucoup * de composants instanciés ici. Cela vous permet de voir exactement à quoi ressembleront les modifications apportées au thème dans tous les composants que vous allez utiliser.

Et ce sont tous des composants réels et vivants. Vous pouvez sélectionner des boutons, réduire les lignes de la grille, choisir des dates, etc. Elles contiennent toutes des données réelles. Ainsi, lorsque vous sélectionnez une liste déroulante, vous disposez de plusieurs options de sélection. Vous avez besoin de tout cela pour voir quelles couleurs vont apparaître où.

«Mais attendez, je vous entends me plaindre. "C'est trop. Je ne vais pas utiliser tous ces composants et il est difficile de trouver ceux que j’utilise au milieu de cette immense bibliothèque.

Et vous avez tout à fait raison, personne ne va probablement utiliser tous ces composants (et si vous le faites, écrivez-moi, je suis sûr que je pourrai vous trouver un prix.) . C'est pourquoi nous vous permettons de personnaliser la liste des composants affichés. En haut à droite, juste en dessous du bouton rouge «télécharger», cliquez sur «Widgets». Cela vous montre une liste de tous les composants de cette bibliothèque (tous sélectionnés par défaut) et il vous suffit de décocher ceux que vous ne voulez pas utiliser.

Par exemple, supposons que je n’utilise que les fonctions Grid, Chart, TabStrip, ButtonGroup, DatePicker et TimePicker. Si je ne sélectionne que ces composants et que je réduis l'écran «widgets», je ne vois plus que ces cinq composants. Assez cool, non?

Maintenant que nous avons corrigé notre environnement, changeons quelque chose! Tout d'abord, avant de nous attarder aux couleurs individuelles, nous avons encore plus d'options. Si nous cliquons en haut à gauche pour développer le panneau «Échantillons de couleurs», nous voyons un ensemble d’échantillons de couleurs que nous pouvons sélectionner. Cela nous donne encore plus d'options pour utiliser des thèmes de couleurs prédéfinis.

Ou, si nous voulons simplement modifier des couleurs individuelles, nous pouvons le faire de deux manières: nous pouvons simplement taper le code de couleur dans la zone de texte de cet élément, ou ouvrir le sélecteur de couleur et trouver une couleur qui a l'air géniale.

À titre d'exemple, ci-dessous, j'ai changé la couleur du premier graphique du bleu au rouge – et nous pouvons le voir sur l'image ci-dessous, où la ligne supérieure du graphique est maintenant rouge.

Lorsque vous avez terminé, cliquez simplement sur "Télécharger", ce qui est très difficile à rater car il s'agit d'un gros bouton rouge. Entrez un nom, un emplacement et un boom, vous êtes prêt.

Vous obtiendrez un fichier ZIP contenant deux fichiers. Le premier est votre fichier `.css` et le second est un fichier` .scss` qui contient les paramètres de session de votre thème. C'est le fichier que vous utiliserez pour importer ultérieurement dans ThemeBuilder si vous souhaitez apporter des modifications.

Le fichier SCSS (ci-dessous) est assez simple mais il contient les paramètres clés. Plutôt que de mettre à jour et de modifier constamment les CSS vous-même, ce fichier SCSS nous donne la possibilité de sauvegarder et d’implémenter les modifications que nous souhaitons apporter au moyen de variables Sass simples.

Le fichier CSS (ci-dessous) est un peu plus compliqué car il contient tous les paramètres CSS de la bibliothèque Kendo UI, pas uniquement les couleurs que vous avez modifiées.

Très bien, c’est en quelques mots le générateur de thèmes. Vous pouvez aller voir par vous-même et jeter un coup d'œil. C’est gratuit, vous n’avez pas besoin d’une licence, vous n’aurez rien à installer. Il suffit d'aller à la page Web. À présent. Maintenant!

Check Out ThemeBuilder