Aller au contenu

Style : système de design et design responsive

Dans cette section, nous allons construire un système de design cohérent à l'aide de variables CSS, configurer la typographie et rendre le site responsive sur tous les appareils.

Configurer les variables CSS

Les variables CSS stockent des valeurs réutilisables pour les couleurs, l'espacement et la typographie. Modifiez la variable une fois et elle se met à jour partout.

Créer une nouvelle variable CSS :

Dans la barre latérale gauche, trouvez CSS Variables (ou recherchez-le).

  1. Cliquez sur + pour ajouter une nouvelle variable
  2. Nom : --color-primary (notre couleur de marque)
  3. Valeur : choisissez une couleur (par ex. #0047AB pour un bleu professionnel)
  4. Cliquez à nouveau sur + pour --color-text, valeur #333333 (gris foncé pour un texte lisible)
  5. Ajoutez --color-background, valeur #ffffff (blanc)
  6. Ajoutez --color-accent, valeur #FF6B35 (une couleur d'accent pour les CTA)

Variables d'espacement :

Elles aident à maintenir un padding et des gaps cohérents dans tout le site.

  1. --spacing-small : 8px
  2. --spacing-medium : 16px
  3. --spacing-large : 32px
  4. --spacing-xlarge : 64px

Variables de typographie :

  1. --font-size-body : 16px
  2. --font-size-heading : 32px
  3. --font-family-sans : choisissez une police (par ex. "Inter", sans-serif ou simplement sans-serif)

Vous disposez maintenant d'une palette pour travailler. Utilisez ces variables dans vos styles au lieu de taper les valeurs à répétition.

Utiliser les variables CSS dans le Style Manager

Lorsque vous définissez une propriété de style :

  1. Sélectionnez un élément
  2. Dans le Style Manager, définissez (par exemple) Background sur une couleur
  3. Au lieu de taper #0047AB, cherchez un champ pour utiliser une variable
  4. Choisissez --color-primary

Certaines propriétés acceptent les variables directement dans le champ de valeur. Par exemple :

  • Background : var(--color-primary)
  • Padding : var(--spacing-medium)
  • Font-size : var(--font-size-body)

Pour un guide détaillé, voir Variables CSS.

Styliser avec les noms de classes BEM

BEM (Block, Element, Modifier) garde le CSS organisé et lisible. Le format est :

.block {}              /* Composant principal */
.block__element {}     /* Partie du composant */
.block--modifier {}    /* Variation du composant */

Exemple pour une carte d'agence :

  • .agency-card — le bloc carte
  • .agency-card__image — l'image à l'intérieur de la carte
  • .agency-card__title — le titre
  • .agency-card__description — le texte de description

Lors du stylisme, utilisez ces noms de classes dans l'éditeur et référencez-les de manière cohérente.

Styliser le header

Sélectionnez le header (instance de Symbole) :

  • Font-size : 18px ou var(--font-size-body)
  • Color : var(--color-text) (texte foncé)
  • Background : var(--color-background) (blanc ou clair)
  • Padding : var(--spacing-medium) (espace à l'intérieur du header)
  • Border-bottom : 1px solid #e0e0e0 (ligne subtile séparant le header du contenu)

Logo : - Width : 80px (ajustez selon la taille de votre logo) - Object-fit : contain (conserve les proportions)

Liens de navigation : - Color : var(--color-text) - Text-decoration : none (supprime le soulignement) - Padding : 8px 12px (espace autour de chaque lien) - État de survol : dans le Style Manager, trouvez la pseudo-classe :hover, définissez Color sur var(--color-accent) (change la couleur au survol)

Styliser la section hero (page d'accueil)

Le hero est la grande bannière en haut de la page d'accueil. Créez un nouveau Div sur la page index pour cela.

Conteneur hero : - Display : Flex - Flex-direction : Column - Justify-content : center - Align-items : center - Text-align : center - Background : var(--color-primary) (utilisez votre couleur de marque) - Padding : var(--spacing-xlarge) (padding généreux) - Min-height : 400px (ou 60vh pour 60 % de la hauteur de la fenêtre ; voir Design responsive)

Titre du hero : - Font-size : var(--font-size-heading) ou plus grand (par ex. 48px) - Font-weight : bold (ou 700) - Color : white (texte blanc sur le fond coloré) - Margin-bottom : var(--spacing-medium)

Sous-titre du hero : - Font-size : 18px ou 20px - Color : rgba(255, 255, 255, 0.9) (blanc légèrement transparent) - Margin-bottom : var(--spacing-large)

Bouton CTA : - Background : var(--color-accent) - Color : white - Padding : var(--spacing-medium) var(--spacing-large) (vertical, horizontal) - Border-radius : 4px (coins légèrement arrondis) - Font-weight : bold - Survol : définissez un fond plus foncé (par ex. une nuance plus sombre de --color-accent) - Cursor : pointer (le CSS peut le définir)

Styliser les cartes

Les cartes affichent des projets, des articles de blog ou des membres d'équipe. Utilisez flexbox pour un alignement cohérent.

Conteneur de carte : - Display : Flex - Flex-direction : Column - Border : 1px solid #e0e0e0 (bordure subtile) - Border-radius : 8px (coins arrondis) - Padding : var(--spacing-large) - Box-shadow : 0 2px 8px rgba(0, 0, 0, 0.1) (ombre subtile pour la profondeur) - Width : flexible (par ex. Flex-basis 300px, Flex-grow 1 pour rendre les cartes responsives ; voir Flexbox)

Image de la carte : - Width : 100% (pleine largeur de la carte) - Height : 200px (hauteur fixe) - Object-fit : cover (recadre l'image pour s'adapter sans distorsion) - Margin-bottom : var(--spacing-medium)

Titre de la carte : - Font-size : 20px ou var(--font-size-heading) - Font-weight : bold - Color : var(--color-text) - Margin-bottom : var(--spacing-small)

Description de la carte : - Font-size : 14px - Color : #666666 (gris moyen) - Margin-bottom : var(--spacing-medium)

Lien/bouton de la carte : - Color : var(--color-primary) - Text-decoration : none (pas de soulignement) - Font-weight : bold - Survol : définissez Color sur var(--color-accent)

Styliser la typographie

Titres (h1, h2, h3) : - Font-family : var(--font-family-sans) (ou une famille spécifique comme "Georgia", serif pour l'élégance) - Font-size : varie selon le niveau (h1 : 48px, h2 : 32px, h3 : 24px) - Font-weight : bold (700) - Color : var(--color-text) - Margin-bottom : var(--spacing-medium) - Line-height : 1.2 (interligne plus serré pour les titres)

Paragraphes du corps : - Font-family : var(--font-family-sans) - Font-size : 16px ou var(--font-size-body) - Line-height : 1.6 (plus spacieux pour la lisibilité) - Color : var(--color-text) - Margin-bottom : var(--spacing-medium)

Liens : - Color : var(--color-primary) - Text-decoration : underline (optionnel, mais aide à distinguer les liens) - Survol : définissez Color sur var(--color-accent) et éventuellement Text-decoration : none

Pour en savoir plus sur la typographie, voir Typographie.

Rendre le site responsive

Utilisez les breakpoints pour ajuster les styles pour mobile, tablette et desktop.

Dans la barre d'outils supérieure, vous verrez des aperçus par appareil (Desktop, Tablette, Mobile). Utilisez-les pour tester l'apparence de votre site à différentes tailles.

Ajustements responsives :

  1. Cliquez sur Mobile pour prévisualiser sur un écran étroit
  2. Sélectionnez un élément qui semble trop à l'étroit
  3. Ajustez ses propriétés : réduisez la police, diminuez le padding, changez la mise en page
  4. Repassez en Desktop — les modifications ne s'appliquent qu'au mobile
  5. Répétez pour Tablette si nécessaire

Ajustements courants pour mobile :

  • Titres : réduisez la font-size (par ex. 32px en desktop → 24px en mobile)
  • Padding : réduisez (par ex. 64px → 20px)
  • Column-gap et Row-gap : gaps plus petits sur mobile
  • Section hero : réduisez Min-height (par ex. 400px → 300px)
  • Navigation : empilez verticalement sur mobile (Flex-direction : column)

Pour des conseils détaillés, voir Design responsive.

Similaire au header, mais généralement :

  • Background : légèrement plus foncé (par ex. #f5f5f5 ou var(--color-primary))
  • Color : var(--color-text) ou blanc si vous utilisez un fond foncé
  • Padding : var(--spacing-large)
  • Font-size : 14px (plus petit que le corps)
  • Text-align : center
  • Border-top : 1px solid #e0e0e0

Prochaines étapes

Votre site dispose maintenant d'un système de design cohérent. Rendez-vous sur Intégration CMS pour connecter une source de données et ajouter du contenu dynamique (articles de blog).

Si vous souhaitez passer l'intégration CMS, allez directement à Publication.

Pages connexes

Éditer cette page sur GitLab