Personnalisation des styles
Introduction
Slidde.co offre une approche unique de la conception web en vous permettant de personnaliser les styles en utilisant du CSS directement dans chaque composant. Contrairement aux créateurs de sites traditionnels comme Webflow, Slidde.co se distingue par :
- Utilisation standard du CSS :
- Réalisez n'importe quel style de site web.
- Exportez les styles vers n'importe quel créateur de site, les rendant réutilisables si vous passez à un développement basé sur le code.
- Valeurs prédéfinies :
- Inspiré par des bibliothèques comme Tailwind, Slidde.co fournit des valeurs prédéfinies pour les styles, vous permettant de sélectionner des options d'un simple clic de souris plutôt que de taper.
- Structure claire :
- Même pour des styles complexes, les paramètres restent clairs et ne perturbent pas la structure du DOM.
Composant Exemple : Barre de Navigation Horizontale
Prenons un composant complexe, la barre de navigation horizontale, et explorons les cinq zones de personnalisation :
- Styles personnalisés : CSS pour l'ensemble de la barre de navigation.
- Styles personnalisés du conteneur : Styles pour le conteneur de gauche, abritant généralement un logo ou un titre.
- Styles personnalisés des boutons : Styles pour les boutons de bureau.
- Styles actifs des boutons : Styles pour les boutons actifs de bureau.
- Styles personnalisés du bouton bascule : Styles pour le bouton de menu hamburger mobile.
Vous pouvez voir un exemple complet de barre de navigation ici template.
Syntaxe CSS Avancée
Slidde.co prend en charge une syntaxe CSS avancée pour un style plus précis :
- Séparateur par point : Utilisez un
.
pour séparer les propriétés des modificateurs. - CamelCase : Utilisez le camelCase pour les noms de propriétés CSS.
Exemples :
&:hover.color
: Couleur de la police au survol.&:hover.borderColor
: Couleur de la bordure au survol.padding
: Rembourrage pour toutes les tailles d'écran.md.padding
: Rembourrage pour les écrans plus grands que moyen (bureau).
Pour définir des rembourrages différents pour mobile et bureau : padding: .5rem
& md.padding:2rem
Sélecteurs CSS standard :
& > img.height
: Hauteur des élémentsimg
de premier niveau à l'intérieur de l'élément actuel.&:first-child.color
: Pseudo-classe::first-child
pour le premier élément enfant.&::after.content
: Pseudo-classe::after
pour ajouter des éléments supplémentaires.
En suivant ces directives, vous pouvez utiliser efficacement Slidde.co pour concevoir et personnaliser vos composants web avec précision et facilité.