#02 - Understanding the Client-first Webflow Style System

Pothos Digital — Tue, 28 Jun 2022 17:44:45 +0000

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!

#01 - The beginning

Pothos Digital — Sun, 26 Jun 2022 22:07:10 +0000

Hey everyone 👋

I'm Jack, the founder and owner of Pothos Digital. Today marks the first day of Pothos Digital being a fully-fledged limited company. It also marks the first day of the 'Diary of Pothos Digital' blog post series, where I'll be writing a relatively-short blog post every day - updating on the company's progress.

So first things first...

What is Pothos Digital?

The simple answer is "a web design and development agency". We specialise in UI/UX design and Webflow development to create websites for local businesses and startups. We also offer a number of related services including site maintenance & support packages, search engine optimisation (SEO), digital marketing, branding and more.

Our over-arching goal is to provide value to our customers which means providing value to their customers. We want to design websites that will increase their customers engagement and develop experiences that will shape their opinions of the brand.

Who? and why?

My name's Jack Brown. By trade I am a Software Engineer/Developer but have a keen interest in UI and UX design. After completing my A-Levels, I joined Vodafone UK as a Technology Apprentice where I studied part-time for a degree whilst working a full-time job.

During my degree course, I completed a mobile application module where we were tasked with building an Android app from scratch using Xamarin Studio. That is where the seed was planted. From there, I knew I wanted to be a developer who built websites and apps and after some good advice from a friend of a friend who was a developer, I started learning HTML, CSS and JavaScript.

After a few courses and tutorials, I reached out to the head of our 'Web Engineering' domain at Vodafone and asked about joining the team. I joined in July 2020 as a Junior Software Engineer working on the Vodafone Business Portal - a special web application for business-to-business customers. From there I went on a path of learning everything from React and TypeScript to AWS and API design. It's now nearly July 2022 and I'm a Software Engineer continuing to work at Vodafone whilst building Pothos Digital in my free time.

Although my background is in web development using the more traditional "code" approach - building websites using HTML, CSS and JavaScript, this business specialises in Webflow - a tool infamous for its "no code" approach.

I came across Webflow on various social medias and had originally planned to use it to only create a simple personal blog. But... as I was using it I fell in love with how fast and easy it made the development process. I found I was able to use my understanding of HMTL and CSS to very quickly - relative to the the code approach - create professional-quality websites.

I have always wanted to start my own company but never know what it would be or do, until now. I want to grow Pothos Digital to be a recognised Webflow expert and a trusted design and development agency.

Current state

As I mentioned, today was the first day I could say "Pothos Digital Limited". The process of setting up a company was pretty straight forward and only cost £12. I also set up all the required social accounts - Facebook Page, Instagram, Twitter, Google Business - to share news and updates.

The majority of my time recently has been spent designing and developing www.pothosdigital.co.uk which I'm hoping to have finished soon. It's also been an opportunity to further learn Webflow and all its capabilities. I'm planning on starting a YouTube channel where I'll share content on how to use Webflow and other useful tips and tricks.

Once the main website is built I'll focus on building example sites for the portfolio and marketing Pothos's services. There is a potential client who I'm in talks with and, for a heavily-discounted price, have offered to redesign and build their website to build the portfolio.

Thanks for reading! Check back tomorrow for another entry in the Diary of Pothos Digital.