I have some questions about how to use client first best. These are the points that I don’t understand fully and would love to grasp. I find the use of spacers, paddings and breakpoints in combination with clientfirst not so straigh tforward. The problem I have is that:
A: The amount classes ramp up fast
B: The class stacking (due to padding or .is-white or .is-tablet etc.) makes it hard to adjust the orginal class.
C: At breakpoints all kinds of measurements (spacers, paddings, margins) need to often change and font sizes as well but due to class stacking this is hard to do.
So these are the different questions I’d love to have answers to:
1: For responsiveness. If I would add .is-mobile or for instance for adding .is-padding-mobile. I could change things but then 1a: the class also gets added to the desktop, which I don’t need. 2b: it therefor creates clutter for the classes. Is it not better to not use is-mobile? And if I do need to use it, when do I specifically use it or not?
2: In general the amount classes for padding. For instance. If I give an element the classes .padding .padding-small but then I don’t want it to have a padding-left. So I would give it another class .no-padding-left. Is this how I should do it? to have 3 classes for just the padding. Because also, when I for instance for mobile want to change the padding, I then have to add even more classes. for instance what if I want to have no-padding left on desktop, but I do want a padding on mobile. One of the points of Clientfirst is too not have too many classes so I’m not sure how to do this right.
3: When I use spacers on desktop, and I want the spacer size to be different on mobile. Would it be okay to directly adjust the spacer size? I’m now working with .display-none classes that I add to spacers but this doesnt seem like the right way.
4: When I use padding in general and there is a padding that needs to change per breakpoint. Would it be okay to just adjust the padding?
5: Is it okay in some cases for padding to just do it without all the extra classes. Or to just have a padding class and then do everything padding related in there.
6: When I have a title of a section and I give it .heading-style-h3 and then I want it to be white. I give it .heading-style-h3 .is-white. But then when I go to mobile. And I want to adjust the size of the font. I need to remove the is-white class before adding it back again. Or create a new text-block, adjust the font, and then add the .is-white. How to do this more efficiëntly?
- URL: [Your staging URL here]
- Webflow Read-only link: [Your Webflow Read-only link here]