initClub · 1ère Communauté Webflow Francophone

Updated last month

Utilisation des variables dans client-first

At a glance
The post is about a community member's questions regarding the use of variables in the Client-First approach. The comments provide detailed explanations from another community member, who explains that with Client-First, variables can be used for colors, fonts, and sizes, but that font sizes were previously limited in their use. The community member also explains that for a short project like a one-page website, it's sometimes more efficient to modify element properties directly on the page rather than updating the style guide, as long as the impact is limited. The answer summarizes this information.

Bonjour à tous 🙂
Temps pluvieux dans le pays basque, alors ça en profite pour avancer sur la formation 🙂

J'ai une petite question, je suis sur la correction de ArcDesign, et j'ai vu la premiere vidéo qui parle de Client-First.
Sur celle ci, on voit les variables de couleurs que Théo utilise.
Mais auparavant, on avait aussi noté les tailles de polices et les polices dans les variables.
Cela veut dire que avec Client-First, on utilise plus les variables pour la font et sa taille, mais uniquement le style guide ?

Merci à vous, et bonne fin de WE

Marked as solution

Hello Nicolas !

Si tu crées un élément, que tu utilises une .class existante et que tu modifies les propriétés de cette .class, alors cette modification a lieu sur tous les éléments ayant cette .class

Si tu souhaites faire une modification uniquement pour cet élément, tu peux dupliquer la .class ou créer une combo-class en ajoutant une deuxième .class.

Ce que tu as vu, c’est un raccourci.
Effectivement, pour un projet relativement court comme un One-Page (cf. ArcDesign), il m’arrive de modifier la propriété d’un élément depuis la page en construction et non depuis le Styleguide.

Par exemple :

  • Je crée mon projet en partant du clonable Client-First.
  • Je personnalise le styleguide en ajoutant mes typos, mes couleurs et en faisant mes boutons par exemple. Je laisse le reste tel-quel (container, padding, etc…)
  • Au moment de la construction de ma page, je crée une div et j’ajoute la .class .container-medium et là je me rends compte que la valeur par-défaut de ce container ne correspond pas à mon projet.
  • Je modifie donc directement ici la valeur de mon .container-large.

Ça modifiera toutes les instances de cette class .container-medium. Dans le styleguide et sur les autres pages.
Je le fais ainsi pour 2 raisons :
  • Je n’ai pas besoin de retourner dans le styleguide pour appliquer la modification à la .class puis revenir sur ma page pour ajouter la .class.
  • Je sais qu’il y peu d’instances de cette .class (uniquement le styleguide), donc je connais les répercutions de cette modification.

Est-ce que ça répond à ta question ?

View full solution
T
N
4 comments

Hello @Nicolas Wache !

Avec Client-First, tu peux tout à fait utiliser les variables les couleurs, les tailles et les typos.

Cependant, les tailles dans les variables étant limitées à l’époque, on utilisait peu les variables pour gérer les tailles.

Aujourd’hui, j’utilise rarement les variables pour les tailles mais principalement pour gérer les couleurs et typos. Tu peux définir les tailles dans le styleguide de Client-First 😉

Oui je me posais la question car je l'avais fait sans Client First en suivant la premiere vidéo sur les variables. Et la je voyais que c'etait plus le cas.

De prime abord, client first parait complexe à prendre en main, dans le sens ou le style guide est ultra complet, les variables sont deja full remplies, alors que finalement pour notre projet on a peu être besoin de beaucoup moins.

Je profite de t'avoir la pour une derniere question aujourd'hui.

Imaginons j'ai une classe dans mon style guide avec des choses specifiques ( un padding en REM par exemple)

Si lorsque je dev, je crée une Div et j'apelle cette classe, et que je la modifie. il se passe quoi ?
Ca modifie la classe au global ( et donc si je l'avais deja utilisé auparavant tout sera modifié ?
Ou ça crée une classe spécifique ?

J'aurais tendance à dire que ça modifie tout, et que si je veux juste modifier cet élément la, alors je l'utilise mais je lui crée une seconde classe.

En fait ma question, c'est plus quand je t'ai vu utiliser par exemple les containers qui avaient pas le padding à la bonne taille, est ce que je dois passer par le style guide pour modifier ou est ce que je peux le faire à la volée directement en appelant la classe.

Desolé je fut long, mais merci beaucoup pour ta réponse :)

Hello Nicolas !

Si tu crées un élément, que tu utilises une .class existante et que tu modifies les propriétés de cette .class, alors cette modification a lieu sur tous les éléments ayant cette .class

Si tu souhaites faire une modification uniquement pour cet élément, tu peux dupliquer la .class ou créer une combo-class en ajoutant une deuxième .class.

Ce que tu as vu, c’est un raccourci.
Effectivement, pour un projet relativement court comme un One-Page (cf. ArcDesign), il m’arrive de modifier la propriété d’un élément depuis la page en construction et non depuis le Styleguide.

Par exemple :

  • Je crée mon projet en partant du clonable Client-First.
  • Je personnalise le styleguide en ajoutant mes typos, mes couleurs et en faisant mes boutons par exemple. Je laisse le reste tel-quel (container, padding, etc…)
  • Au moment de la construction de ma page, je crée une div et j’ajoute la .class .container-medium et là je me rends compte que la valeur par-défaut de ce container ne correspond pas à mon projet.
  • Je modifie donc directement ici la valeur de mon .container-large.

Ça modifiera toutes les instances de cette class .container-medium. Dans le styleguide et sur les autres pages.
Je le fais ainsi pour 2 raisons :
  • Je n’ai pas besoin de retourner dans le styleguide pour appliquer la modification à la .class puis revenir sur ma page pour ajouter la .class.
  • Je sais qu’il y peu d’instances de cette .class (uniquement le styleguide), donc je connais les répercutions de cette modification.

Est-ce que ça répond à ta question ?

Oui ça reponds parfaitement à ma question.

Et vraiment je te remercie pour le temps que tu prends à répondre à chaque fois. Je saisi la chance de cette commu 🙂

Add a reply
Sign up and join the conversation on Slack