Création des bases d'un projet Webflow

Introduction

• Présentateur : Thibo, assisté de Florian
• Sujet : Comment créer les bases d'un projet Webflow
• Rappel de la session précédente : Initialisation du projet, présentation de Webflow Designer et Workspace, préparation des paramètres, intégration des variables depuis Figma

Programme de la session

1. Répondre à une question posée lors du précédent live (sur les groupes de variables)
2. Standang Guide Client First dans Webflow
3. Paramétrage du standang guide
4. Création de la structure de page

Réponse à la question sur les variables (épisode précédent)

• Création de groupes de variables
  • Nommer votre groupe (ex. : groupe test), puis ajouter un / suivi de la variable (ex. : color test)
  • Exemple : Groupe test / Color test crée un groupe de variables
  • Les variables peuvent être automatiquement intégrées aux groupes créés

Paramétrage du Standang Guide Client First

Pages Structure

• Page Wrapper : Contient tous les éléments de la page
• Main Wrapper : Contient le contenu principal (sections)
• Conteners : Évite l'étirement des éléments sur de grandes tailles d'écran
  • Exemple : Container Small a une taille maximale de 48 REM
• Global Paddings : Ajoute des espacements pour éviter que les éléments ne soient collés au bord de l'écran

Sections Padding

• Différentes tailles de padding pour les sections (Small, Medium, Large)
  • Exemple : Padding Section Large = 8 REM en haut et en bas

Éléments Utilitaires

• Heading (titres) : H1, H2, H3, etc.
  • Class CSS et balise HTML, important pour le SEO et la structure
  • Configurer les styles : Fonte, couleur, taille, espacement
• Paragraphes
  • Configurer les éléments par défaut (ex. : Fonte Inter, 16px)
  • Utilisation des variables pour garder la flexibilité

Classes Utilitaires

• Textes
  • Tailles : Text Size Large, Text Size Medium, etc.
  • Autres : Text Italic, Text Uppercase, etc.
• Boutons
  • Classes de base + Combo Classes (Button, Button is-secondary)
  • Gérer les états (hover) et transitions
• Couleurs de texte et de fond : Text Color Primary, Background Color Primary, etc.
• Espacements
  • Paddings, Margins, Spacers, etc.

Formulaires et Rich Text

• Configuration des styles pour les formulaires et Rich Text
• Parler de leur importance lors de la création de contenus dynamiques

Finalisation

• Importance de la structure et du standang guide pour garantir une uniformité et cohérence du design
• Encouragement à cloner le projet et tester les différentes configurations et classes
• Annonce des futurs live et disponibilités pour les questions