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, cliquez sur le bouton CSS Variables (l'icône pinceau).

  1. Cliquez sur + New variable et choisissez Color. Une nouvelle ligne apparaît dans la liste.
  2. Dans le champ Name, tapez color-primary (notre couleur de marque)
  3. Dans la colonne Desktop, choisissez une couleur (par ex. #0047AB pour un bleu professionnel)
  4. Cliquez à nouveau sur + New variable > Color 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. Créez chacune avec + New variable > Size, puis tapez le nombre et choisissez l'unité.

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

Variables de typographie :

  1. --font-size-body : 16px (une variable Size)
  2. --font-size-heading : 32px (une variable Size)
  3. --font-family-sans : une variable Font Family. Choisissez une police dans la liste. Les polices ajoutées dans la boîte de dialogue Fonts y sont aussi.

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

Pour utiliser une variable sur une propriété de style :

  1. Sélectionnez un élément
  2. Dans le Style Manager, trouvez la propriété (par exemple Background color)
  3. Cliquez sur l'icône crayon (Use variable) à côté du nom de la propriété
  4. Choisissez color-primary dans la liste

L'icône crayon ne propose que les variables du bon type : les variables Color pour les couleurs, les variables Size pour les tailles (chaque côté de Padding et de Margin a la sienne), les variables Font Family pour Font family.

Dans la suite de cette page, une valeur comme --color-primary veut dire : utilisez cette variable avec l'icône crayon. Pour Padding et Margin, réglez la variable sur chaque côté.

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 {}              /* Bloc principal */
.block__element {}     /* Partie du bloc */
.block--modifier {}    /* Variation du bloc */

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 --font-size-body
  • Color : --color-text (texte foncé)
  • Background : --color-background (blanc ou clair)
  • Padding : --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 : --color-text - Text-decoration : none (supprime le soulignement) - Padding : 8px 12px (espace autour de chaque lien) - État de survol : sélectionnez un lien et donnez-lui la classe agency-nav__link (cliquez sur + dans la zone du sélecteur). Cliquez ensuite sur Pseudo Class : la ligne affiche On mouse hover, et le sélecteur devient .agency-nav__link:hover. Réglez Color sur --color-accent. Voir Sélecteurs.

Styliser la section hero (page d'accueil)

Le hero est la grande bannière en haut de la page d'accueil. Glissez un bloc Container sur la page index pour cela.

Conteneur hero : - Display : Flex - Flex-direction : Column - Justify-content : center - Align-items : center - Text-align : center - Background : --color-primary (utilisez votre couleur de marque) - Padding : --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 : --font-size-heading ou plus grand (par ex. 48px) - Font-weight : bold (ou 700) - Color : white (texte blanc sur le fond coloré) - Margin-bottom : --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 : --spacing-large

Bouton CTA : - Background : --color-accent - Color : white - Padding : --spacing-medium en haut et en bas, --spacing-large à gauche et à droite - Border-radius : 4px (coins légèrement arrondis) - Font-weight : bold - Survol : avec la Pseudo Class hover (comme pour les liens de navigation), 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 : --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 : --spacing-medium

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

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

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

Styliser la typographie

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

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

Liens : - Color : --color-primary - Text-decoration : underline (optionnel, mais aide à distinguer les liens) - Survol : définissez Color sur --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, le menu déroulant des appareils propose quatre appareils : Desktop, Tablet, Mobile Landscape et Mobile Portrait. Utilisez-le pour tester l'apparence de votre site à différentes tailles.

Ajustements responsives :

  1. Choisissez Mobile Portrait dans le menu des appareils 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'aux écrans plus petits.
  5. Répétez pour Tablet et Mobile Landscape 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 --color-primary)
  • Color : --color-text ou blanc si vous utilisez un fond foncé
  • Padding : --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 Publication pour le mettre en ligne.

Pages connexes

Éditer cette page sur GitLab