Discover the best finsweetclientfirst websites created by professional designers. Get inspired and start planning your perfect finsweetclientfirst web design today!

Relume Library Style Guide is the official starter project for the Relume Library, the largest Webflow component library in the world. 

This project contains a style guide page with pre-built classes. There are no pages, no layouts, and nothing to delete. It's the perfect starting point for any project using the Relume Library, so clone away.

Relume Library uses the Client-first Webflow Style System, a style system built by the talented team at Finsweet, a game changer when it comes to keeping your Webflow projects more organised.

Like this project?

Upvote on Product Hunt
-> https://www.producthunt.com/posts/relume-library

Get access to Relume Library BETA
-> https://library.relume.io/

Watch the demo video
-> https://www.youtube.com/watch?v=lyiUdFZugok

To learn more about Finsweet's Client-first Webflow Style System
->https://www.finsweet.com/client-first

Made with sore fingers by Relume

Relume Library Style Guide

The 💪 finweet's client-first style system was used to rebuild the Lattice's new revamped site 🤌.

Some observations while building it:

✅ Neatly structured page elements that is accessible to screen readers
✅ A common ground for all the stack-holders, including designers, developers, copywriters and marketers 
✅ Pre-built style guide: Super organized combo+global classes catalyzes the building process and reduce the complexity
✅ Well thought nomenclature: It'll never eat up your brain while building/debugging it

Learn More about Client first here: https://www.finsweet.com/client-first/

CF Lattice

Lattice: Client-first Implementation

Checkout my new cloneable project. This design was taken from www.FrontendMentor.io and I built it to practice using Finsweet's new Client-First naming system.

Features 4 pages, some small interactions sprinkled throughout, a custom built price toggle, and a CMS collection.

The provided design didn't include the actual individual "Stories" template design, so the collection doesn't link to anywhere. I challenge you to take a stab at designing the CMS template page and share it with me. I want to see what you come up with!

Photo Snap

photo-snap

Mintn

mintn

Hi Webflow Community !

(EN) Today, Digidop (French Webflow Agency) releases a free cloneable TikTok X Webflow template

This template allows you to insert TikTok videos in a slider (Client-First) with links to your channel and for sharing. Adding videos can be automated (Make/Integromat or Zapier) with the creation of new items in this slider collection. You can already clone this Webflow project for free and use it on your website.

✅ Free
✅ Client-first CSS classes (CMS Slider Attributes)
✅ 100% automated Make & CMS

Need help with Webflow, No-code or SEO?

👉 https://www.youtube.com/c/digidop

For more free Webflow templates:

👉 https://www.digidop.fr/ressources/templates

TikTok Slider - Embed Webflow - Free

tiktok-slider-embed-webflow-free

Hey guys, welcome to the first showcase AND clonable by Media Studio Hong Kong! This is a simple landing page website with a bit of interaction stuff.
This was built using client-first, so thank you to the guys at Finsweet for making such a nice framework.
Hope you guys enjoy it~

-Angus

BFit Dance

BFit Dance Studio

Hi everyone !

(EN) Our French Webflow agency, Digidop, has released a new Webflow template: Twitter Card - Embed - Free

Thanks to this template, you can add tweets in your website. You can clone this Webflow project for free and automate the generation of new items, new Twitter cards, with Make (ex Integromat).

✅ Free
✅ Client-first CSS classes
✅ 100% automated with Make & Webflow CMS

Need help about Webflow, No-code or SEO?

👉  https://www.digidop.fr/blog

(FR) Notre agence Webflow française, Digidop, a publié un nouveau template Webflow : Twitter Card - Embed - Free

Grâce à ce modèle, vous pouvez insérer vos tweets dans vos pages web. Vous pouvez cloner ce projet Webflow gratuitement et automatiser la création de nouveaux items, de nouvelles cartes Twitter, grâce à Make (anciennement Integromat).

✅  Gratuit
✅  Client-first classes CSS
✅ 100% automatisé Make & CMS

Besoin d'aide sur Webflow, le No-code ou le SEO ?

👉 https://www.digidop.fr/blog

Twitter Card - Embed - Webflow - Free

twitter-card-embed-webflow-free

A quick project from www.frontendmentor.io/ (an awesome site to find website designs to practice building). 

I wanted to practice using Finsweet's new Client-first naming convention. Might go back through it and add some cool interactions.

I'd love to see what interactions you'd add! Feel free to share them with me. 

Find me on Twitter @CoryRunn.

meet-landing-page

Meet Landing Page - Frontendmentor.io

CMS Component you can Clone!

> Load More functionality (load more under the previous collection items)
> 1 Static Page
> 1 Category & 1 Articles CMS setup 
> Built with the Client-first Webflow Style System 
> Load More implemented with Attributes 

Client First Docs -> https://www.finsweet.com/client-first/
Attributes Load More Tutorial Video -> https://www.finsweet.com/attributes/cms-load#tutorial

Tip: View the Published project to view the Load More function. It doesn't work in the Designer Preview.

Load More

Load More CMS Component

🇬🇧 Hey Webflow community, how is it going? 

This is a new free cloneable made by Digidop. 

We know that Tabs can be tough to create from scratch in Webflow, but starting with this template will help you build faster. Of course the tabs here is created with the client-first system by Finsweet!

🇫🇷 Heyy la communauté Webflow, comment ça va ? 

Voici un nouveau cloneable offert par Digidop. 

Nous savons que les tableaux peuvent être difficiles à créer à partir de zéro dans Webflow... mais commencer avec ce modèle vous aidera à développer plus rapidement 😍

Bien sûr, le tableau est développé avec le système client-first de Finsweet et les meilleures pratiques SEO !

Tabs - Client-first - Template

Webflow Tabs Template - Made with Client-first

Landing page for an Austrian Medical company. This client-first website is built 99% in native Webflow and 1% using custom code. I experimented with the Finsweet Cookie Consent clonable. This is a great solution for cookie preferences! In the end, the client wanted to host his site on WordPress, so I tried out Udesly for the first time. Works just great, but with some small exceptions! Learned a lot during this project. Tell me what ya think!

Iuventrin ®

IUVENTRIN®

Hi Webflow developers !

(EN) Digidop has released a new free template: LinkedIn X Webflow

With this template, you can easily add your LinkedIn posts in your Webflow project. Thanks to CMS collections, you can quickly and easily integrate your posts. You can also automate collections with Make.

This template uses the "load more" and "CMS Filter" attributes of Finsweet. You can clone this Webflow project for free and use it on your website.

✅ Free
✅ Client-first CSS classes ( CMS Filter Attributes + Load More Attributes  )
✅ 100% automated Make & CMS

For more free Webflow templates:

👉 https://www.digidop.fr/ressources/templates

(FR) Digidop vous propose un nouveau template entièrement gratuit  : LinkedIn X Webflow !

Grâce à ce modèle, vous pouvez insérer vos posts LinkedIn dans votre projet Webflow en toute simplicité. Grâce aux collections dans le CMS, ajoutez vos posts rapidement et simplement. Vous pouvez aussi automatiser vos collections avec Make.

LinkedIn-embed-Webflow

Linkedin Feed - Free to clone - Webflow template

EN : Rebuild of the Procreate homepage using Client-First.

This project was made by Maxime Mroue (RiseVerse.com) for educational purposes and is not affiliated with Procreate in any way. All rights of images, logos, and texts belong to Procreate.art.

FR : Reconstitution de la page d'accueil de Procreate.

Ce projet a été réalisé par Maxime Mroue (RiseVerse.com) à des fins éducatives et n'est en aucun cas affilié à Procreate. Tous les droits des images, logos et textes appartiennent à Procreate.art.

Procreate Rebuild by RiseVerse.com

Procreate Rebuild

Awesomic.io used Webflow to create their website with custom controls. In this new clone you can use JavaScript to control the flow across Tabs with nav controls.

CSS @support to control the navbar blur and auto switch between browsers.
— Chrome & Safari supports blur effect
— Firefox doesn't support blur effect.

CSS Media Query navbar switch at 992px desktop

Script created by Nikolai Bain.

awesomic-tt-ijbd

Basic two-page (home, contact) static website using the client-first system.  This website is designed to be quick and easy to set up while still providing you with a few different components and complete style guide to fully customize to your needs.

superbasic

superbasic template

A simple yet colorful landing page for a creative agency.
Design taken from frontendmentor.io
This challenge was made to practice the client-first naming system from Finsweet.

Sunnyside  Agency

Sunnyside Agency

A client project for an investment company. You can find the official website here: https://www.mozaikinvestments.com/

Mozaik Investments website

mozaik-investments-showcase

This is a design and development of a nft landing page for Mutant Turtles Club. If you like my design and need an NFT website feel free to reach out.

Discover .css-10iahqc{text-transform:capitalize;}finsweetclientfirst websites built by the Webflow community

Discover finsweetclientfirst websites built by the Webflow community