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 :

1. Styles personnalisés : CSS pour l'ensemble de la barre de navigation.
2. Styles personnalisés du conteneur : Styles pour le conteneur de gauche, abritant généralement un logo ou un titre.
3. Styles personnalisés des boutons : Styles pour les boutons de bureau.
4. Styles actifs des boutons : Styles pour les boutons actifs de bureau.
5. 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éments img 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é.