Badge Webflow Award Winner 2023

Version 2.1 de Client-First. What's new ?

Publié le 
10/1/2024
Modifié le 
10/1/2024
Temps de lecture : 5 min
Client-First version 2.1
Écrit par
Florian Bodelot avec un T-shirt Digidop

Florian Bodelot

Co-fondateur

Le framework de développement Webflow Client-First by Finsweet annonce une importante mise-à-jour ! (Nouvelles méthodes et classes CSS, nouveau branding et nouveau site)

Points clés à retenir

Hier soir, les équipes de Finsweet ont annoncé la sortie d'une nouvelle version du framework de développement Webflow Client-First: la version 2.1.

Ambassadeur historique de cette méthodologie de développement, nous vous partageons dans cet article les nouveautés, notre avis et nos suppositions pour la suite de Client-First.

1. Nouvelles guidelines & ressources

Update Client-First du 9 Janvier 2023

Pour commencer, à première vue, nous sommes enthousiastes quant aux nouvelles annoncées : le système intègre bien les dernières fonctionnalités de Webflow, afin de minimiser l'utilisation de combo classes et de CSS personnalisés. Et des nouvelles guidelines visent à réduire la (sur)utilisation des divs dans le Navigator, sujet parfois critiqué sur le système.

1.1 Intégration des variables

Tableau de variable Webflow avec Client-First

Les variables sont au cœur de la nouvelle version Client-First. Elles viennent complémenter de nombreuses classes CSS telles que les .text-color, ou bien .background-color.

1.2 Réduction de l'utilisation des Divs et MaJ de classes CSS

  • Ajout du padding-section directement en combo classe du padding globale
  • Recommandation de l'utilisation des Grid et Flex Size pour créer des gaps (vs Spacer)
  • Suppression du custom code Pointer-Event (remplacer par le CSS Webflow)
  • Ajout de classes Aspect Ratio

1.3 Nouveau Cloneable sur le Made in Webflow

Nouveau Cloneable Client-First Made in Webflow (version 2.1)

L'ensemble de ces nouveautés à été intégré dans le cloneable Client-First disponible gratuitement depuis la page Made in Webflow ↗

1.4 MaJ des visuels avec la nouvelle interface Webflow

Travail remarquable à noter, les équipes de Finsweet ont mises à jour l'ensemble des visuels de leurs contenus avec la nouvelle interface (UI) de Webflow.

Mais ce n'est pas tout... car les équipes de Finsweet en ont profité pour faire peau neuve sur Client-First avec un nouveau branding et un nouveau logo !

2. Rebranding de Client-First !

Nouveau Logo Client-First (Finsweet)
Nouveau Website Client-First

Certainement pour s'aligner avec le repositionnement de Webflow du 5 octobre 2023, Client-First fait peau neuve !

  • Nouveau site
  • Nouvelle DA
  • Nouveau logo !

Et sans oublier de mettre à jour l'ensemble de leurs visuels au passage. Bravo !

(À nous de jouer et faire aussi bien avec l'update de quelques ressources... 😅)

Notre avis sur Client-First 2.1

Nous sommes heureux de voir le framework s'adapter rapidement aux évolutions de Webflow. Aussi bien d'un point de vue UI - en mettant à jour son univers après le rebranding de Webflow - que d'un point de vue technique - en tirant profit des nouvelles fonctionnalités de l'outil pour faire évoluer son système.

Cette nouvelle version souligne les efforts des équipes de Finsweet sur l'amélioration continue de Client-First, pour une approche de développement toujours plus propre et plus facile à maintenir. Mais, peut-être, de plus en plus tech' ? Notamment avec le besoin, nouveau, d'expliquer aux clients le fonctionnement des variables.

Et... What's next Client-First V3?

Tweet de Sergey anticipant une V3 de Client-First

2.1 ? Seulement ? D'après le dernier tweet de Sergey, cet update n'est qu'une infime partie des nouveautés attendu sur Client-First prochainement. L'ensemble du système devrait encore évoluer, une fois l'arrivée des différents breakpoints sur les variables Webflow.

Puis, une fois la sortie des "variables responsives", je pense, que l'on peut déjà s'attendre à une refonte des systèmes d'espacements ? 😉 Suivez l'ensemble des mises à jour de Client-First directement depuis le Changelog Client-First ↗

Ressources complémentaires :

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop