Supplément Modèles CSS

Modèles CSS supplémentaires que vous pouvez personnaliser sans les recréer

Un modèle CSS supplémentaire est une maquette de page prête à l'emploi, fournie avec sa feuille de style : le balisage existe déjà, et les couleurs, les polices, l'espacement, les boutons et le comportement de la grille sont définis dans des règles CSS que vous pouvez modifier. Vous ne partez pas de zéro pour créer une feuille de style. Vous modifiez celle de quelqu'un d'autre, ce qui est différent et comporte ses propres pièges.

Ce que vous modifiez réellement

La plupart du travail consiste à modifier quelques valeurs. Les couleurs de la marque remplacent la palette du modèle, généralement composée de quelques valeurs hexadécimales. Les polices changent en une ou deux déclarations de famille de polices, ainsi que leur taille et leur interligne. L'espacement est souvent sous-estimé : les marges et le remplissage des sections sont ce qui empêche un modèle de ressembler à sa démo, et c'est là que les modifications s'accumulent.

Vont ensuite les classes réutilisables. Un modèle vous fournit des styles pour les boutons, les cartes, les badges et les titres. Il suffit de modifier le style de chaque classe une fois, et toutes ses instances seront automatiquement modifiées. Modifier la même règle quinze fois, ou insérer des surcharges en ligne sur des éléments individuels, est généralement le signe que quelqu'un a ignoré la classe et est passé directement à l'élément.

La mise en page repose sur les règles Grid et Flexbox : nombre de colonnes, espacements, alignement. Il en va de même pour le comportement adaptatif, au sein des requêtes média qui redessinent les éléments sur les écrans de tablettes et de téléphones. Modifiez le nombre de colonnes sur un ordinateur de bureau et vérifiez immédiatement les points de rupture. C'est là que le restylage échoue le plus souvent.

Avant d'utiliser un modèle CSS supplémentaire, il est judicieux d'examiner la feuille de style, si l'aperçu le permet. Des classes et des variables nommées signifient une après-midi de refonte. Des milliers de sélecteurs générés signifient une semaine.

Où placer les règles personnalisées

Nicepage conserve les contrôles intégrés pour le style courant et réserve le code CSS personnalisé pour tout le reste. Les règles peuvent s'appliquer à un seul élément, une seule page ou l'ensemble du site. Le guide CSS personnalisé explique les trois niveaux et leur fonctionnement en cascade. Les règles personnalisées s'appliquent à un état de survol particulier, à une forme que les contrôles standard ne produisent pas, ou à une exception unique au sein d'une section. L'option « Exporter le CSS minimal par page » limite le CSS généré de chaque page aux styles qu'elle utilise. Il est judicieux de l'activer lorsqu'un modèle complexe alimente plusieurs pages simples.

La plupart des éléments graphiques d'une page supplémentaire se résument à la répétition de quatre valeurs : une police, une palette, une échelle d'espacement et un rayon de bordure. Si vous les modifiez systématiquement, le modèle devient méconnaissable. Modifiez-les à huit endroits sur dix, et il restera reconnaissable précisément aux deux endroits où vous avez omis de les modifier.