Catégories
Astuces et Design

Considérations pour créer un framework CSS

Il y a environ huit mois, j'ai commencé à construire un framework qui allait devenir Halfmoon. J'ai publié un article sur ce site même pour annoncer le lancement de la toute première version. Halfmoon a été présenté comme une alternative à Bootstrap avec une fonction de mode sombre intégrée, ce qui est particulièrement utile pour la création de tableaux de bord et d'outils. Tout cela s'applique toujours au cadre.

Cependant, aujourd'hui, j'aimerais parler d'un domaine du cadre qui est un peu sous-estimé. Je pense que notre industrie dans son ensemble sous-estime sérieusement la valeur de la personnalisation et de la personnalisation des utilisateurs, c'est-à-dire que les utilisateurs peuvent définir leurs propres préférences de conception. Chris a déjà écrit sur le fait de savoir à qui un système de conception est fait, soulignant un spectre de flexibilité en fonction de OMS un système est destiné à aider.

Mais c’est plus que des systèmes de conception. Voyons comment Halfmoon aborde ces problèmes, car ce sont des considérations importantes pour savoir quel cadre convient le mieux à vos besoins spécifiques.

Tableau de bord construit avec Halfmoon

À qui s'adresse Halfmoon?

Avant de plonger, abordons une question importante: Halfmoon est-il le bon cadre pour vous? Voici une liste de questions pour vous aider à y répondre:

  • Construisez-vous un tableau de bord, un outil ou même un site Web de documentation? Halfmoon possède de nombreux composants et fonctionnalités uniques qui sont spécifiques à ces cas d'utilisation.
  • Connaissez-vous les noms de classe de Bootstrap, mais souhaitez-vous que le design soit un peu plus haut de gamme?
  • Vos utilisateurs souhaitent-ils ou s'attendent-ils à un mode sombre sur votre site Web?
  • Vous n'aimez pas les dépendances? Halfmoon n'utilise pas jQuery et n'a pas non plus de processus de construction impliquant des préprocesseurs CSS. Tout est pur, CSS et JavaScript vanille.
  • Êtes-vous fatigué de gérer des systèmes de construction complexes et des outils frontaux? Cela rejoint le point précédent. Personnellement, je trouve difficile de gérer les outils frontaux et de construire des processus. Comme mentionné ci-dessus, Halfmoon n'a pas de processus de construction, il vous suffit donc d'extraire les fichiers (local, CDN ou npm) et de commencer à créer.

Si vous avez répondu oui à l'une (ou à toutes) de ces questions, vous devriez probablement essayer Halfmoon. Il est important de noter cependant que Halfmoon n'est pas une bibliothèque de composants d'interface utilisateur pour React / Vue / Angular, vous ne devriez donc pas vous y attendre. De plus, si vous aimez plus purement développement piloté par l'utilitaire, puis Tailwind CSS est une meilleure option pour vous. En ce qui concerne les utilitaires CSS, Halfmoon adopte une approche intermédiaire – il existe des utilitaires et des classes sémantiques pour les composants communs.

Utilisation des propriétés personnalisées CSS

Commençons par éliminer les éléments faciles. Les propriétés personnalisées CSS sont incroyables et je m'attends à ce qu'elles remplacent complètement les variables du préprocesseur à l'avenir. La prise en charge des navigateurs est déjà à un solide ~ 96%, et avec la suppression progressive d'Internet Explorer par Microsoft, ils devraient devenir une fonctionnalité standard.

Halfmoon est entièrement construit à l'aide de variables CSS car elles offrent un degré de personnalisation énorme. Maintenant, vous pourriez immédiatement penser que tout cela signifie qu'il y a quelques propriétés personnalisées pour les couleurs saupoudrées, mais c'est plus que cela. En fait, il y a plus 1 500 variables globales dans Halfmoon. Presque tout peut être personnalisé en remplaçant une propriété. Voici un exemple intéressant tiré de la documentation:

Personnalisation d'une demi-lune à l'aide de variables CSS
L'échange de quelques valeurs de propriétés personnalisées ouvre une tonne de possibilités dans Halfmoon, qu'il s'agisse de thématiser des éléments pour une marque ou d'ajuster l'interface utilisateur pour obtenir juste le bon look.

C’est ce dont nous parlons ici en matière de personnalisation: le système résiste-t-il toujours et fonctionne-t-il bien si la personne qui l’utilise remplace quelque chose? J'ai beaucoup écrit à ce sujet (et bien plus encore) dans la page officielle de la documentation de Halfmoon.

Les variables ne sont pas un nouveau concept pour les frameworks. De nombreux frameworks utilisent en fait des variables Sass ou Less et le font depuis un certain temps. C’est toujours un moyen efficace et efficace d’établir une expérience personnalisable. Mais en même temps, ceux-ci se verrouillent dans un préprocesseur (ce qui, encore une fois, ne doit pas être une mauvaise chose). En s'appuyant plutôt sur les propriétés personnalisées CSS – et la variable toutes les choses – nous nous appuyons sur le CSS natif, et cela ne nécessite aucune sorte de dépendance de construction. Ainsi, non seulement les propriétés personnalisées peuvent faciliter la personnalisation d'un framework, mais elles sont beaucoup plus flexibles en termes de pile technologique utilisée.

Il y a un équilibre à trouver. Je sais que j'ai suggéré de créer des variables pour tout, mais il peut être tout aussi difficile de gérer et de maintenir des scores et des scores de variables (comme toute autre chose dans la base de code). Alors, reposez-vous fortement sur les variables pour rendre un cadre ou un système de conception plus flexible, mais soyez également conscient de la flexibilité que vous devez fournir et si l'ajout d'une autre variable fait partie de cette portée.

Décider des composants à inclure

Lorsqu'il s'agit de créer un framework CSS, décider des composants à inclure est une grande partie de cette épreuve. Bien sûr, pour un développeur travaillant sur un projet passion, vous souhaitez tout inclure. Mais ce n'est tout simplement pas faisable, donc quelques décisions ont été prises de ma part.

À partir de maintenant, Halfmoon a plus des composants que vous pouvez trouver dans des frameworks similaires tels que Bootstrap ou Bulma. Ces cadres sont excellents et largement utilisés, ils constituent donc un bon cadre de référence. Cependant, comme je l'ai déjà mentionné, une chose unique à propos de Halfmoon est l'accent mis sur la création d'outils et de tableaux de bord sur le Web. Ce créneau, si vous pouvez l'appeler ainsi, m'a conduit à créer des composants et des fonctionnalités uniques:

  • 5 types différents de barres latérales, avec des gestionnaires de bascule et de superposition intégrés. Les barres latérales sont très importantes pour la plupart des tableaux de bord et des outils (et difficiles à faire), donc c'était une évidence.
  • 2 types différents de navbars. Il y en a un qui colle au bas de la page, qui peut être utilisé à bon escient pour les boutons d'action. Pensez aux actions qui apparaissent lorsque vous sélectionnez des éléments sur la table de données. Vous pouvez placer ces boutons d'action ici.
  • Liste déroulante omnidirectionnelle (avec 12 emplacements différents, 3 pour chaque direction).
  • Beaux composants de forme.
  • Système de raccourcis clavier intégré, avec un moyen facile d'en déclarer de nouveaux pour votre outil.
  • Des tonnes de services publics. Bien sûr, ce n'est pas comparable à Tailwind CSS, mais Halfmoon a suffisamment de classes d'utilitaires réactives pour gérer de nombreux cas d'utilisation dès la sortie de la boîte.

De plus, le mode sombre intégré, l'énorme capacité de personnalisation et l'aspect standard des composants devraient tous fonctionner ensemble pour faire de Halfmoon un excellent outil pour la création d'outils Web et de tableaux de bord. Et j'espère que je suis loin d'être terminé! Les prochaines mises à jour apporteront un validateur de formulaire (vidéo de démonstration), plus de composants de formulaire, un composant à sélection multiple, un sélecteur de date et d'heure, un composant de table de données, etc.

Alors, que manque-t-il exactement à Halfmoon? Les plus évidents sont les onglets, les groupes de listes et les fileurs. Mais tous ces éléments devraient être ajoutés v1.2.0, qui est la prochaine mise à jour. Il y a aussi d'autres composants manquants tels que les carrousels, la navigation dans l'arborescence, les avatars, etc., qui sont légèrement hors de portée.

Fournir les préférences de l'utilisateur

Donner aux utilisateurs finaux la possibilité de définir leurs préférences est souvent négligé par les cadres. Des choses comme la définition de la taille de la police d'un article ou l'utilisation d'un thème sombre ou clair. À certains égards, c'est plutôt drôle, car le Web rattrape ce que les systèmes d'exploitation permettent aux utilisateurs de faire depuis des décennies.

Voici quelques exemples de personnalisation utilisateur sur le Web:

  1. Être capable de sélectionner votre mode de couleur préféré. Et, mieux encore, le site Web enregistre et respecte automatiquement vos préférences lorsque la page est chargée. Ou mieux encore, en regardant les préférences de votre système d'exploitation et en les adaptant automatiquement.
  2. Définition de la taille par défaut des éléments. Surtout la taille de la police. Une petite police peut sembler bonne dans une conception, mais permettre aux utilisateurs de définir leur taille de police idéale rend le contenu réellement lisible. Techniquement, chaque navigateur moderne a une option pour zoomer sur le contenu, mais cela est souvent difficile à manier et n'enregistre pas réellement vos paramètres.
  3. Réglage de la compacité des éléments. Par exemple, certaines personnes préfèrent un grand rembourrage avec des coins arrondis, tandis que d'autres le trouvent un gaspillage d'espace, préférant plutôt une interface utilisateur plus étroite. Un peu comme la façon dont Gmail vous permet de décider si vous voulez beaucoup d'espace dans votre boîte de réception ou la rendre aussi petite et restreinte que possible pour voir plus de contenu.
  4. Définition de la couleur principale sur le site Web. Bien que ce soit entièrement cosmétique, il est toujours charmant de pouvoir définir votre couleur préférée sur chaque bouton et lien sur un site Web.
  5. Activation d'un mode de contraste élevé. Quelqu'un m'a signalé cela sur GitHub. Apparemment, beaucoup (et je veux dire beaucoup) Les frameworks CSS échouent souvent au contraste minimum recommandé entre les couleurs de premier plan et d'arrière-plan sur les éléments communs, tels que les boutons. Cette liste comprend Halfmoon. C'est souvent un compromis, car les éléments trop contrastés semblent souvent pires (uniquement en termes d'esthétique). La personnalisation de l'utilisateur peut vous permettre d'activer un mode de contraste élevé, si vous rencontrez des difficultés avec le contraste par défaut.

Autoriser les personnalisations des utilisateurs peut être très difficile à réaliser – en particulier pour un framework – car cela pourrait signifier échanger d'énormes parties de CSS pour s'adapter aux différents paramètres et combinaisons de personnalisation. Cependant, avec un framework comme Halfmoon (c'est-à-dire construit entièrement à l'aide de variables CSS), cela devient trivial car Les variables CSS peuvent être définies et modifiées lors de l'exécution à l'aide de JavaScript, ainsi:

// Get the  tag (for reading and setting variables in global scope)
var myElement = document.documentElement;

// Read CSS variable
getComputedStyle(myElement).getPropertyValue("--variable-name");

// Set CSS variable
myElement.style.setProperty("--variable-name", "value");

Par conséquent, la personnalisation de l'utilisateur peut être mise en œuvre à l'aide de Halfmoon de la manière suivante:

  • L'utilisateur définit une préférence. Cela signifie essentiellement qu'une valeur de variable est modifiée. La variable est définie avec JavaScript (comme indiqué ci-dessus) et la nouvelle valeur est stockée dans un cookie ou un stockage local.
  • Lorsque l'utilisateur revient sur le site Web, ses préférences sont récupérées et définies à l'aide de JavaScript (à nouveau, comme indiqué ci-dessus) une fois la page chargée.

Voici des exemples visuels pour vraiment marteler le point d'origine.

Définition et enregistrement de la taille de police par défaut

Dans l'exemple ci-dessus, chaque fois que le curseur de plage est modifié, la variable --base-font-size est mis à jour à la valeur du curseur. C'est idéal pour les personnes qui préfèrent un texte plus grand. Comme expliqué dans la section précédente, cette nouvelle valeur peut être enregistrée dans un cookie ou un stockage local, et la prochaine fois que l'utilisateur visite le site Web, la préférence de l'utilisateur peut être définie lors du chargement de la page.

Définition de la compacité du contenu

Thème compact utilisant des variables CSS
Comme il existe des propriétés personnalisées CSS utilisées comme utilitaires, comme l'espacement et les bordures, nous pouvons les supprimer ou les remplacer facilement pour créer une disposition de composant plus compacte ou développée.

Seules deux variables sont mises à jour dans cet exemple pour passer d'une vue développée à une vue compacte:

  • --content-and-card-spacing changé de 3rem (30px) à 2rem (20px).
  • --card-border-radius changé de 0.4rem (4px) à 0.2rem (2px).

Pour un scénario réel, vous pourriez avoir une liste déroulante qui demande à l'utilisateur s'il préfère que son contenu soit Défaut ou Compact, et en choisir une définirait évidemment les variables CSS ci-dessus pour thématiser le site. Encore une fois, cela peut être enregistré et défini lors du chargement de la page lorsque l'utilisateur visite le site Web lors de sa prochaine session.

Attends, mais pourquoi?

Même avec tous les exemples que j'ai montrés jusqu'à présent, vous vous demandez peut-être encore pourquoi est-ce vraiment nécessaire. La réponse est vraiment simple: Une taille unique ne convient pas à tous. Dans mon estimation, environ la moitié de la population préfère une interface utilisateur sombre, tandis que l'autre moitié préfère la lumière. De même, les gens ont des variations sauvages sur les choses qu'ils aiment en matière de design. La personnalisation des utilisateurs est une forme d'amélioration de l'UX, car il permet à l'utilisateur de choisir ce qu'il préfère. Cela n'est peut-être pas si important sur une page de destination, mais lorsqu'il s'agit d'un outil ou d'un tableau de bord (que l'on doit utiliser pendant longtemps pour faire quelque chose), avoir une interface utilisateur qui peut être personnalisée est une aubaine pour la productivité. Et savoir que c'est ce pour quoi Halfmoon est conçu le rend idéal pour ces types de cas d'utilisation.

De plus, vous savez comment les gens se plaignent souvent que les sites Web créés avec un certain cadre (par exemple Bootstrap) se ressemblent tous? Il s'agit d'une étape pour s'assurer que les sites Web créés avec Halfmoon auront toujours un aspect distinct, de sorte que l'accent soit mis sur le site Web et le contenu lui-même, et non sur le cadre qui a été utilisé pour le créer.

Encore une fois, je ne dis pas que tout devrait pouvoir être personnalisé. Mais savoir à qui est destiné le cadre et à quoi il est conçu permet de clarifier ce qui doit être personnalisé.

Regarder vers l'avant

Je suis fermement convaincu que la flexibilité de personnalisation et de comptabilisation des préférences des utilisateurs est souvent négligée sur le Web, en particulier dans le paysage du framework. C’est ce que j’essaie d’aborder avec Halfmoon.

À l'avenir, je souhaite faciliter la mise en œuvre des préférences utilisateur par les développeurs et promouvoir la diversité de la conception avec de nouveaux modèles et thèmes. Cela dit, voici quelques choses à l'horizon pour Halfmoon:

  • Un validateur de formulaire (vidéo de démonstration)
  • Nouveaux composants, notamment des curseurs de plage, des onglets et des flèches
  • Préférence de l'utilisateur en mode de contraste élevé
  • Composant multi-sélection (comme Select2, uniquement sans jQuery)
  • Un sélecteur de date et d'heure
  • Un composant de table de données
  • Un générateur de formulaires basé sur l'interface graphique
  • Plus de thèmes et de modèles

Vous pouvez bien sûr en savoir plus sur Halfmoon sur le site de documentation, et si vous souhaitez suivre le projet, vous pouvez lui donner une étoile sur GitHub.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *