Considérations pour faire un cadre CSS

Il y a huit mois, j'ai lancé HalfMoon, une alternative bootstrap offrant un mode sombre intégré, idéal pour les tableaux de bord et les outils. Bien que cela reste vrai, je veux mettre en évidence un aspect crucial et souvent sous-estimé: personnalisation et personnalisation des utilisateurs. L'industrie sous-estime le pouvoir de laisser les utilisateurs adapter leur expérience de conception. Il ne s'agit pas seulement de systèmes de conception; Il s'agit de la fonctionnalité du cadre. Halfmoon répond directement à ces besoins.

HalfMoon vous a-t-il raison?

Avant de continuer, considérez ces questions:

• Construire un tableau de bord, un outil ou un site de documentation? Halfmoon offre des composants uniques pour ceux-ci.
• Familier avec les cours de bootstrap mais désirer une esthétique plus premium?
• Vos utilisateurs attendent-ils un mode sombre?
• Vous préférez les dépendances minimales? Halfmoon évite les préprocesseurs JQuery et CSS; C'est pur CSS et JavaScript.
• Frustré par des systèmes de construction complexes? Halfmoon n'a pas - incluez simplement les fichiers (localement, via CDN ou NPM) et commencez à construire.

Un "oui" à toute question suggère que Halfmoon mérite d'être exploré. Cependant, Halfmoon n'est pas une bibliothèque React / Vue / Angular UI. Si vous préférez un développement purement axé sur les services publics, le CSS du vent arrière pourrait être un meilleur ajustement. Halfmoon adopte une approche équilibrée: combiner les services publics avec des classes sémantiques pour les composants communs.

Tirer parti des propriétés personnalisées CSS

Les propriétés personnalisées CSS sont les changements de jeu, prêts à remplacer les variables de préprocesseur. Avec un excellent support de navigateur, ils deviennent standard.

Halfmoon utilise plus de 1 500 variables CSS globales, permettant une personnalisation approfondie. Ce n'est pas seulement une question de couleur; Presque tout est personnalisable en remplaçant une propriété. La documentation fournit des exemples clairs.

Alors que d'autres frameworks utilisent des variables SASS ou moins, la dépendance de Halfmoon sur les propriétés personnalisées CSS natives élimine les dépendances de construction, améliorant la flexibilité et la neutralité de la netteté technologique. Cependant, la gestion de nombreuses variables nécessite une attention particulière. Prioriser les variables pour améliorer la flexibilité, mais être conscient de la maintenabilité.

Sélection des composants

Choisir les composants à inclure est crucial. Bien qu'un projet passionné puisse inclure tout, l'aspect pratique dicte la sélectivité.

Halfmoon propose actuellement la plupart des composants trouvés dans des frameworks comme Bootstrap ou Bulma, mais son accent sur les tableaux de bord et les outils se traduit par des fonctionnalités uniques:

• Cinq types de barres latérales avec des bascules et des superpositions intégrées.
• Deux types de Navbar, y compris une option alignée inférieure pour les boutons d'action.
• Desnonces omnidirectionnelles (12 placements).
• Composants de forme améliorés.
• Système de raccourci clavier intégré.
• Cours de services publics réactifs étendus.

Le mode obscur intégré, la personnalisation large et les composants standard se rendent à HalfMoon bien adapté aux outils Web et aux tableaux de bord. Les futures mises à jour comprendront un validateur de formulaire, plus de composants de formulaire, un composant multi-sélection, un sélecteur de date / heure, une table de données, etc.

Les composants manquants (onglets, groupes de liste, filateurs) sont prévus pour V1.2.0. D'autres (carrousels, navigation d'arbres, avatars) sont actuellement hors de portée.

Activer les préférences des utilisateurs

Les cadres négligent souvent les paramètres de préférence des utilisateurs (taille de police, thème). Le Web rattrape ce que les systèmes d'exploitation offrent depuis des années.

Des exemples de personnalisation Web comprennent:

1. Sélection du mode couleur: enregistrement automatique et respect des préférences des utilisateurs, ou même synchronisation avec les paramètres du système d'exploitation.
2. Dimensionnement des éléments: en particulier la taille de la police, permettant les ajustements de lisibilité au-delà du zoom du navigateur.
3. Compacité du contenu: options pour les grands coins de rembourrage / coins arrondis par rapport aux dispositions plus strictes.
4. Paramètre de couleur primaire: une fonctionnalité cosmétique mais attrayante.
5. Mode de contraste élevé: crucial pour l'accessibilité, manquant souvent dans les cadres en raison de compromis esthétiques.

La mise en œuvre de la personnalisation des utilisateurs peut être difficile. Cependant, l'architecture variable CSS de HalfMoon simplifie cela. JavaScript peut définir et modifier dynamiquement les variables CSS:

 // Obtenez la balise (pour la lecture et la définition des variables dans la portée globale)
var myelement = document.DocumentElement;

// Lire la variable CSS
getCompuledStyle (myelement) .getPropertyValue ("- variable-name");

// Définir la variable CSS
myElement.style.setProperty ("- variable-name", "valeur");

La mise en œuvre de Halfmoon implique:

1. Paramètre de préférence de l'utilisateur (modification d'une valeur de variable).
2. Réglage des variables et stockage basés sur JavaScript dans les cookies ou le stockage local.
3. Référence de préférence et définition de la charge de page.

Des exemples visuels dans la documentation illustrent comment ajuster la taille de la police et la compacité du contenu via des changements variables.

Le "pourquoi"

La personnalisation de l'utilisateur améliore UX en offrant un choix. Bien que moins critique pour les pages d'atterrissage, il est crucial pour les outils et les tableaux de bord largement utilisés. Le design de Halfmoon répond à ce besoin. Il aide également à différencier les sites Web construits avec Halfmoon, en concentrant l'attention sur le contenu plutôt que sur le cadre lui-même.

Tout n'a pas besoin de personnalisation, mais de comprendre le public cible du cadre et l'objectif du cadre guide ces décisions.

Directions futures

Halfmoon vise à améliorer la flexibilité de la personnalisation et à promouvoir la diversité de conception. Les plans futurs comprennent:

• Validateur
• Nouveaux composants (plage de curseurs, onglets, filateurs)
• Préférence en mode de contraste élevé
• Composant multi-sélection
• Pickeur de date / heure
• Tableau de données
• Formulaire de formulaire de GUI
• Plus de thèmes et de modèles

Explorez la documentation Halfmoon et le référentiel GitHub pour plus d'informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!