Most people active in the no-code space would know or at least would have heard about Finsweet. They’re one of, if not the best Webflow development agencies out there. Not only do they make f*ckin sweet websites, they also produce a lot of content and free resources for the Webflow community.
The Client-first Webflow Style System is one of those free resources.
Client-first is a set of guidelines and strategies to help you build Webflow websites in a clear and scalable way that any human can understand.
As your Webflow sites become larger, they become increasingly difficult to maintain. As I quickly found out, it’s easy to end up in stacked-class hell or to have the same styles duplicated across multiple classes.
All of this slows down your development process and worsens your experience working on the build. Not only that, it also increases the learning curve for anyone who wants to make changes to your site - including clients.
The Client-first cloneable comes packed with loads of pre-styled classes to use throughout your site. These classes are split into three main categories:
- Structure
- Typography
- Spacing
I’ll explain the structure classes below to give you an idea what’s involved, but you can read all about Client-first on the official docs.
Structure
These classes are the foundations of the page. They define paddings, widths and landmarks in which all the page content will be placed.
.page-wrapper
This doesn’t provide any styles and just wraps the page. It’s useful from when you need to move or copy the whole page.
.main-wrapper
Again, this doesn’t provide any styled but should for accessibility purposes. It will wrap all child elements in a tag.
.section-[section-name]
And again, this doesn’t provide any styles but helps to organise your page from within the navigator.
.page-padding
This should be used globally within every non-full-width section to provide page padding. Extracting this into its own class promotes re-use across the site and means it only needs to be updated in one place.
container-[size]
This would go inside your .page-padding and sets a max-width for the container. Small, medium and large sizes are defined.
Why will we use Client-first at Pothos Digital?
Increase value delivered to our clients
Let’s imagine two scenarios - one where a website is built without client-first (or any other style system) but looks great and another where a website is built with client-first and still looks great. On the surface, both websites look the same and have the same functionalities.
Now, let’s image the website is handed over to the client and they’re now responsible for updating and maintaining the site. Which website will you want? Obviously the site built with client-first as it makes it infinitely easier to manage for non-technical people.
Although you may not have seen the benefits of this approach on the surface, it becomes clear later down the line. Our end goal is to always deliver value, even when our services are not being paid for.
Increase developer experience
Developer experience is massive in the outcome of a website. If you have a developer building a website who becomes frustrated because they change one style and messed up the whole page, that isn’t going to result in a good end product. Using client-first and it’s clear structure and approach reduces the amount of unnecessary headaches.
Thanks for reading and make sure to check out the Client-first docs and videos!
Top comments (0)