Build fast and organize Webflow classes easily using Client-First with Joe Krug

[@Webflow]

Get the Client-First style guide, link to docs and more: wfl.io/livestream-client-first

[@poncardas]

Such an awesome stream! It was so packed with practical info that I didn't even notice the time passing while watching it. I always appreciate how Joe puts the client first. His way of explaining things is very methodical, not rushed, succinct, and devoid of confusing jargons. I also appreciate Aron for hosting this stream; his reiteration of the process and the questions really solidified my understanding, not only of how putting the client first works but also of how Webflow designer is laid out. Thanks to the Webflow team for producing this stream! 😃👏🥳 Mchael

[@jansleyreal]

I've been wanting to learn client-first with webflow for the past couple weeks. This video has been an awesome primer into that world! I'm going to check out a live build next :)

[@Webflow]

Thanks Jansley!

[@abirahmed1292]

Adding class name without thinking at all (almost) is a game changer! I have almost never made anything with Webflow thinking about class name much because from the beginning of my journey I am using client first and thanks to Finsweet for that. Thanks to Webflow for letting me build website as well. Before Webflow I was a designer and never thought of creating website by myself. So thanks thanks thanks thanks * ∞

[@Webflow]

Love that! Thanks for sharing :)

[@abirahmed1292]

The best system is very simple and that's why it is hard to learn but you ripe the benefit of it forever!

[@shaheerrahman87]

Amazing host!

[@Webflow]

Aron here! Thanks, appreciate that :)

[@sebobastiseppobas]

Once thing to keep in mind when choosing between a utility (spacer) class and a custom class: Utility classes will update globally when i change them somewhere. Custom classes need to be updated one by one.

[@Webflow]

Absolutely! Great point!

[@annefeldman1896]

In this example, what would you do if you need to create a div within “hero_date-row”? (In the original example there were two text columns side by side. So if I needed to duplicate hero_date-row and wrap both date-rows in a div to make them horizontally aligned, how would you name that?

[@inceptionsd]

This is very interesting. However, for someone as myself, who has zero dev experience it kinda looks as overwhelming as coding itself (actually this strict naming structure looks exactly like coding). To me, the whole point of webflow being user-friendly in a sense that you have the freedom to do things your own way, this FEELS like a step back from that organic way of designing web-pages far from strict naming schemes related to code. I'm sure that devs and designers with previous dev experience would find this very familiar and intuitive, but I feel like this platform is becoming more complex to the point where it would be simpler to just go and learn code rather than having to constantly readjust your skills to an ever-changing platform philosophy. I'm not saying this is bad, far from it. Just had the need to share my thoughts and see whether someone else feels this way.

[@Webflow]

Hey Inception! Using a framework is by no means a necessity, simply an option if you want to. Client-first and other frameworks can be valuable when projects become complex and there's a necessity to standardize how styles are named. That may not be necessary for your project! ^ AK

[@inceptionsd]

@@Webflow Yes, of course. I imagine this being useful for big projects where multiple people work on single project or edit/maintain builds for a single agency/company, however a friend of mine told me this would be very useful even for a small-time future freelancer like me, now I'm torn whether I should continue learning the conventional way or would there be benefit for me to start learning this straight away, since I'm really new to all this and it is quite overwhelming right now, not sure who should I trust... (Can't trust myself because I have no idea what is the right way).

[@ConnorByram]

@@inceptionsd you are right, in some sense, that beauty of Webflow is that you can build things in your own way. But, if you want to be a career designer, Webflow dev, dev, etc etc, it is important to learn conventions and frameworks. The beauty of guard rails is that they allow you think less about the mundane things and spend more time on the fun things. It would be EXTREMELY useful for you to learn Client-First and embody they "Why" of the whole thing. It will help you create cleaner, more cohesive, more maintainable websites. It's overwhelming at first, but the amazing thing is that you have documentation. Everyone works in a nuanced way and you will work under/with people that utilized different methods. Get comfortable being uncomfortable and get good at learning new frameworks. You will find your stride. It takes time. Go build A LOT of stuff.

[@Josh-Yu]

why did you use div blocks for every element? why not use the provided section and container elements?

[@Josh-Yu]

nvm just got the @53:03

[@Josh-Yu]

wait i just tried doing it in webflow. this information seems to be outdated. why did they update webflow to allow for nesting sections now?

[@mattszil]

Wondering what’s the benefit of a component with both a Navbar and Footer in it?

[@Webflow]

Hey Matt, Aron here. No advantage, in fact I'd say it's a bad idea to have nav and footer in the same component. I had simply omitted to create a footer for this test website so repurposed the nav!

[@mattszil]

@@Webflow haha, got it 👍

[@goldenant9450]

right off the bat, in the style guide, im confused. the title for the page "stayle guide" is white which it pulls from that block itself (1s-styleguide_heading-large) but for the paragraph text its pulling the white from a wrapper wrapping the wrapper. ((s-stylequide header). is this how you would always do this?

[@Webflow]

Hey Golden! The styles in the style guide are purely for cosmetic reasons to visually show the styles. For paragraph text you should use text-color-white to make your text white using Client First

[@enghhb]

hi thanks for the video - what is the rational behind using div blocks and then labelling them as "section" or "container" - instead of using the webflow default "section" or "container" elements. I understand the webflow default section and container elements come with a bit of formatting but that can be over-written by applying client-first class to these elements. seeing a section and a container logo identifier in the navbar helps me get context on the layout faster, are there any pitfalls to this strategy?

[@enghhb]

the same question applies for using a div block (instead of "grid element") with layout grid display - applied and then creating custom class "hero_wrapper"@ 27:05. Why not start with grid element and then name it custom class? is it so that later if you decide to change the layout from grid to another layout display later you don't have the grid symbol instead of the div symbol?

[@enghhb]

@53:08 Juan asks similar question and Joe answers

[@Adam326]

When you are adding space to a custom class, do you not need to add the utility classes padding-bottom and padding-medium? Is that only for spacer blocks?

[@Webflow]

Hey Adam! There are a few options for you in that case: you can add the spacing directly to the custom class or wrap the custom class in a separate div and apply spacing there. It really depends on you, the end result will be the same

[@Adam326]

@@Webflow Gotcha. Thanks for answering!

[@zinzaclickerzinzaclicker]

Thank you very much for the great content. Can you give me a unique map to start learning Webflow from through the university? You have the order of the courses to watch from first to the end .. Thank you again

[@Webflow]

Hey zinz, appreciate that! The best place to start learning Webflow is Webflow 101. Sign up and watch for free here: university.webflow.com/courses/webflow-101

[@invisiblehandofadamsmith]

phoenix

[@Conn458]

Joe Krug for Prime Minister in the UK please, only logical guy I know 🤣

[@ribenawrath]

Using spacers is so dirty!

[@Webflow]

One person's dirty is another person's gold ❤️

[@yzz983]

😂😂😂😂😂spirit animal topic is so awkward….