Getting started with Client First - Overview and naming

#clientfirst #finsweet #webflow #relume #nocode
Webflow has made building websites so much easier and you have so much freedom to create what you need for your business. However, the structure is still important when you're building a site! Finsweet has made this incredible system for any no-code designer to give themselves a great foundation.
Chapters
00:00 Intro to topic
01:29 Finsweet Client First Website
02:20 Style guides to help you get started
03:16 Walking through the mindset of client first and structure
07:52 Sizing system and rems
09:43 opening up Webflow
12:03 Structure and global classes
16:29 Making components in Webflow and naming
20:45 Conclusion and last words
Relume style guide:
webflow.com/website/relume-li...
Finsweet style guide:
webflow.com/website/client-fi...
My website:
www.gammadesign.co

[@jayellwood]

Thanks for this. Not enough client first stuff around.

[@gammadesignco4102]

Yeah I noticed there isn't! I will keep making more!

[@moneywise8827]

thanks! keep up the great work I just subbed :)

[@gammadesignco4102]

Thank you!!

[@Reapertips]

Aw I loved it! Thank you. This helped me understand a bit more. This whole client first thing is making me overthink so much anything I add into webflow, but I do see the benefits in the long-run. I love the accessibility thing with rems tho it might take some time to get used to using calculator for my pixels

[@gammadesignco4102]

It does take some getting used to but it’s pretty quick to use! Remember you can actually calculate in the unit field. So you type 80/16rem and hit enter and it inputs in the value.

[@Reapertips]

@@gammadesignco4102 Owww that's a nice tip!! Thank you. I was thrown off by how annoying it'd be to calculate everything.

[@rahim5165]

You can set the font size of the root element(HTML) to 10px. This will make it easy to calculate the rems units. So 10px=1rem, 16px = 1.6rem, 20px = 2rem, 22px=2.2rem and so on. You can paste this code html { font-size : 10px;} in the embed element in the designer.

[@user-yp9ys6mt8v]

Love your videos! Quick question, I followed along this video while working in Webflow. But at the 12:56 mark the padding of 5% automatically appears when you create the page-padding. I have to manually add the 5% padding after creating the class. Is this because I have not set up the Relume style guide correctly at the start?

[@gammadesignco4102]

That is a weird issue. If you duplicate the relume project it should be set. Also, if you use the Finsweet extension to add everything, the same should be true. 🤔

[@martynastreigys8303]

Just found out about client-first but this, looks like promising stuff, but not sure if I like so much divs before adding any content.

[@gammadesignco4102]

Client first v2 has tweaked a few things and I need to make an updated video!

[@grantsenior9226]

Hi, thanks for posting this. Am I correct in thinking Client First is really just a CSS Bootstrap approach for Webflow? It's nice to have the style library loaded but the whole naming of classes thing is pretty standard; anybody familiar with writing code would be doing this in Webflow anyway, wouldn't they? I am aware that designers with no code background don't name elements or use classes (from my experience with some), they just drop in new elements and use whatever names given by Webflow, so for them I can see how this would be valuable. What other reasons are there for using Client First?

[@gammadesignco4102]

Probably yes. If you’re already skilled at css and naming, it might not be new to you. If you’re newer, webflow might be teaching you how to understand code in which this would help. The benefits here are also using the tools they have built in with their folder structure and Finsweet chrome extension that help your workflow and organization. Really it’s a philosophy to work!

[@grantsenior9226]

@@gammadesignco4102 Thanks for that. I'll find out more about their folder structure! Cheers.

[@jcwhites]

What's the name of the book related to REM?

[@gammadesignco4102]

Better web typography for a better web

[@ziggerwebdesign1704]

I'm trying to love client first, but I find it a struggle. Not sure about the name either...

[@gammadesignco4102]

It took a bit of practice and what helped was watching some of their builds and inspecting some cloneables. I’m looking at making an updated video in between client work

[@ziggerwebdesign1704]

@@gammadesignco4102 Fair enough, I just think it's overcomplicated. I can understand developing a consistent 'language' so multiple people understand what's going on, but the multiple layers of holders for margins and padding makes my skin crawl.

[@gammadesignco4102]

Yeah sometimes that can be a bit annoying for sure so I feel you there 😩

[@Local-Seo-Nerd]

Outdated content.

[@gammadesignco4102]

Yes it is. It’s client first v1, I’ll make some newer content when they release the next update to client first with some of the variables.

[@Local-Seo-Nerd]

Sounds good and thank you for all of your other top notch content!@@gammadesignco4102