Mises à jour de la V1 à la V2
Tout est expliqué plus clairement dans la V2
Nous introduisons l’approche stratégique pour passer de la V1 à la V2
La mise à jour la plus importante de la V2 de Client-First concerne la façon dont nous expliquons les concepts de Client-First. La V1 manquait d'organisation du contenu et d'explications claires pour certains sujets.
La V2 introduit une nouvelle méthode d'organisation du contenu pour nous aider à mieux comprendre Client-First. Chaque sujet a une explication plus précise.
Les sujets les plus essentiels sont organisés en "stratégies" :
- Stratégie des classes
- Stratégie de la structure de base
- Stratégie typographique
- Stratégie d'espacement
- Et plus encore
Folders (Dossiers)
Les Folders (dossiers) vont redéfinir la façon dont nous visualisons les classes dans notre projet Webflow.
Les Folders (dossiers) Client-First nous permettront d'organiser les classes dans une structure de dossier flexible.
Utilisez le tiret du bas (underscore) pour créer un folder (dossier) personnalisé. Organisez les classes utilitaires en utilisant uniquement les tirets.
Les folders (dossiers) ne fonctionnent qu'avec Client-First et l’extension Finsweet. Pour en savoir plus, consultez la rubrique Folders (Dossiers).
Les composants sont mieux définis
Dans la V2, nous serons plus précis lorsque nous utiliserons des composants et plus précis lorsque nous utiliserons des tirets du bas : "_"
V1 - Version initiale
tiret du bas (underscore) dans le nom de la classe = composant
V2 - Version avec les Folders (dossiers)
tiret du bas (underscore) dans le nom de la classe = Folder (dossier)
[nom-du-folder]_component = composant
L'utilisation du tiret du bas (underscore) dans le nom de la classe ne signifie pas nécessairement que le folder (dossier) est un composant. Nous utilisons désormais les tirets du bas (underscore) pour l'organisation ou le groupement d'éléments dans les folders (dossiers).
Les composants ont maintenant une classification spécifique. Si nous voulons qu'un élément soit considéré comme un composant, nous utilisons le mot "component" pour son identification.
Pour en savoir plus, consultez la stratégie des folders (dossiers).
Les types de classe sont mieux définis
Les classes personnalisées, les classes utilitaires, les classes globales et les classes combinées (combo class) sont mieux définies et expliquées dans la stratégie des classes 1.
En appréhendant mieux les types de classes, nous pouvons prendre de meilleures décisions lors du développement.
page-padding devient padding-global
La valeur de retrait (padding) la plus importante de notre projet s'appelle désormais padding-global. Ce changement de nom permet une meilleure organisation dans notre système de dossiers.
Au lieu de placer notre classe padding dans le dossier page-, nous la plaçons dans le dossier padding-.
Pour en savoir plus, consultez la page Stratégie de structure de base.
section-[identificateur] devient section_[identificateur]
Les classes des sections utilisent désormais le tiret du bas (underscore) au lieu du simple tiret.
Notre nouvelle mise à jour des dossiers garantit que les classes utilitaires utilisent uniquement des tirets. Les classes personnalisées utilisent des tirets du bas (underscore). Les classes de section sont classées comme "classes personnalisées", ce qui signifie qu'elles doivent comporter un underscore dans leur nom.
Le tiret du bas (underscore) place les classes des sections dans le système de dossiers des classes personnalisées : section_.
Toutes les classes des sections seront dans le dossier section. Pour en savoir plus, consultez la Stratégie de structure de base.
Uniformisation du retrait (padding) global des section avec la nouvelle classe : padding-section-[taille]
Nous avons ajouté un nouveau système de classe utilitaire pour gérer l'espacement global entre les sections. Cette mise à jour du système d'espacement vise à limiter le nombre d'options d'espacement dont nous disposons pour les sections tout en les gardant uniformisées sur l'ensemble du projet.
Pour en savoir plus, consultez la stratégie de structure de base.
Uniformisation du style des titres (headings) avec la nouvelle classe : heading-style-[h#]
Lorsque les styles d'une balise Heading doivent s'afficher comme une balise Heading différente, nous pouvons utiliser notre classe heading-style-[h#].
Par exemple, si nous avons besoin d'une balise H2 à des fins de référencement naturel (SEO), mais que le texte doit respecter les styles de la balise H3, nous pouvons appliquer la classe heading-style-h3 à la balise H2 pour modifier son style tout en conservant la balise HTML sémantique appropriée.
Pour en savoir plus, consultez la page Stratégie typographique.
Nouvelles classes utilitaires display-inlineflex
Appliquer la propriété CSS display: inline-flex, qui n'est pas une propriété CSS prise en charge dans Webflow.
Cas d'utilisation : L'utilisation de la propriété CSS display: flex est généralement importante dans notre projet. Cependant, display: flex fait que les éléments occupent 100 % de l'espace par défaut. Cela rend difficile l'utilisation de flexbox pour les boutons. display : inline-flex permet aux éléments de se comporter comme des éléments en ligne, tout en conservant les capacités flex à l'intérieur de ceux-ci.
Pour en savoir plus, consultez la rubrique Systèmes de classes utilitaires.
Suppression des classes utilitaires show-
Suppression des classes utilitaires show-. Les classes show appliquaient display : block à différents niveaux de responsive.
Nous avons constaté que les classes "show-" étaient très restrictives, ne fonctionnaient que pour un petit nombre de cas d'utilisation et pouvaient entraîner des problèmes de responsive indésirables.
Au lieu d'appliquer des classes "show-" aux éléments, nous pouvons appliquer des propriétés d'affichage (display) directement à la classe personnalisée.
En outre, nous pouvons appliquer n'importe quelle propriété d'affichage (display) à une classe combinée. Par exemple, modal_component is-visible-tablet.
Nouvelles stratégies d'espacement
La V2 développe la manière dont nous pouvons utiliser les classes utilitaires et les classes personnalisées pour espacer les éléments dans le projet. Nous avons ajouté de nouvelles méthodes pour mettre en œuvre l'espacement.
Espacement avec le système de classes utilitaires
- Spacing wrappers (wrappers d'espacement) (V1)
- Spacing blocks (blocs d'espacement) (nouveau dans la V2)
Espacement avec les classes personnalisées
- Sur l’élément (V1)
- CSS Grid sur l’élément parent (nouveau dans la V2)
Amélioration du CSS personnalisé dans le "Global Styles embed"
Vous trouverez un aperçu complet de chaque extrait CSS inclus dans la page Global Styles embed.
Toutes nouvelles pages dans la V2
La V2 ajoute de nouvelles pages de contenu pour les sujets qui ne sont pas couverts dans la V1.
- L'introduction présente les sujets les plus importants de Client-First.
- La documentation détaillée nous aide à nous motiver pour apprendre Client-First dans son intégralité.
- Le Parcours de formation nous propose un parcours de 7 jours pour apprendre le Client-First.
- La page Folders (Dossiers) et Stratégie des Folders (dossiers) nous donne une explication complète de notre nouvelle méthode de visualisation des classes.
- La page Balises sémantiques HTML nous permet de mieux comprendre comment développer correctement en HTML.
- La page Spécificité CSS nous explique pourquoi les classes margin et padding ne fonctionnent pas lorsqu'on les copie et les colle.
- La page consacrée au Global Styles Embed nous aide à comprendre le but du CSS personnalisé ajouté au clonable Client-First.
- La page Stratégie de vente nous donne des méthodes pour exploiter le principe de Client-First dans notre processus de vente afin de décrocher d'avantages de projets.
- La page Convertir d’anciens projets nous donne des informations sur la façon de convertir un ancien projet en un projet "Client-First".
De Client-first à Client-First
Finsweet a récemment publié un nouveau logo. Ce logo remplace le "f" minuscule par un "F" majuscule.
Nous allons suivre la même tendance pour Client-First.
Client-first V1 présente un "f" minuscule. Dans la V2, nous formalisons le F majuscule à travers la marque. Cette mise à jour change Client-first en Client-First.
Intéressé par le passage de Finsweet de f à F ? Regardez notre diffusion en direct ici.