Cabinet Modèles CSS

Modèles CSS d'ébénisterie personnalisables pour un contrôle visuel précis

Une porte shaker peinte et une façade lisse en noyer n'ont rien en commun en réalité, et un site de menuiserie doit restituer cette différence à l'écran. Les modèles CSS d'ébénisterie vous fournissent les règles visuelles nécessaires, avec des couleurs, une typographie et des espacements qui restent cohérents, de la première photo de cuisine jusqu'au dernier échantillon de finition. Comme ces règles sont partagées, en modifier une met à jour chaque carte qui l'utilise.

Styliser les échantillons de portes avec des états sélectionnés

Les sélecteurs de portes et de finitions constituent le composant le plus spécifique aux cuisines et placards sur ces sites. Un visiteur comparant des portes shaker, lisses ou à panneau surélevé doit voir chaque option affichée à la même taille, avec un libellé parfaitement lisible aussi bien sur un chêne clair que sur un espresso foncé. Les styles de composants à vérifier dans une démo incluent :

• des vignettes d'échantillons aux dimensions égales avec un état de survol visible
• un état sélectionné, comme une bordure plus épaisse ou une légère superposition, qui met en évidence la finition choisie
• des cartes comparatives pour le bois peint par rapport au bois naturel ou le mat par rapport au brillant
• des libellés de spécifications pour la finition, le matériau et le type de pièce

Grâce aux classes partagées, un atelier qui introduit une nouvelle teinte n'a qu'à ajouter une vignette supplémentaire : le style de la bordure, de l'ombre et du libellé s'applique automatiquement.

Des ratios de galerie adaptés aux photographies de menuiserie

Les photos de menuiserie présentent souvent des formats atypiques. Une cuisine complète avec îlot s'apprécie mieux sous forme de cliché panoramique horizontal, un garde-manger haut nécessite un cadre vertical et un gros plan sur un assemblage à queue-d'aronde convient parfaitement à un petit carré. Un bon système de style gère ces variations à l'aide de ratios d'aspect fixes et d'ajustements d'objet (object-fit), afin que les cartes de projets de différentes tailles conservent un rythme régulier dans la grille. Les mises en page avant/après en sont un autre exemple courant, où deux photos d'une cuisine rénovée doivent partager un recadrage identique pour assurer une comparaison rigoureuse.

Les points de rupture préservent la clarté des bibliothèques de finitions

Sur mobile, une longue bibliothèque de finitions peut se transformer en un défilement interminable. Les règles de points de rupture (breakpoints) déterminent combien d'échantillons s'affichent par ligne, l'espacement qui les sépare et le moment où les libellés passent sous la vignette. Grid et Flexbox prennent en charge la majeure partie de ce travail, permettant à une galerie de cuisine sur trois colonnes de passer à deux colonnes sur tablette et à une seule colonne sur mobile, tout en maintenant la grille d'échantillons compacte.

Les modes responsifs de Nicepage vous permettent d'ajuster ces rendus pour ordinateurs, tablettes et smartphones. Le CSS personnalisé couvre les cas que les commandes visuelles ne peuvent pas traiter, comme un effet de survol particulier sur les vignettes de quincaillerie, et peut s'appliquer à un élément isolé ou à l'ensemble du site. Un moyen rapide d'évaluer un modèle CSS d'ébénisterie consiste à ouvrir la démo, à réduire la largeur de la fenêtre et à vérifier si les galeries de projets, les vignettes de finitions et les cartes de services conservent un langage visuel cohérent à chaque largeur d'écran.