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

Edgar Allan

This is the base document for Knockout.

Knockout is an end-to-end Figma to Webflow framework that helps designers and Webflow developers accomplish more together.

We created Knockout to solve many issues we encountered over the years of working in Webflow as an agency. The resulting toolset defines our approach to all projects, from single-page sites to large-scale, long-term enterprise engagements.

Put another way, this should help you knock sh*t out, day in and day out.

An example Marketing site can be found here:
https://webflow.com/website/madewithknockout

Knockout Framework v1.0

Knockout Webflow Framework

SystemFlow is a framework for Webflow with 50+ readymade components and templates and 1000+ utility classes that makes creating and maintaining websites in Webflow a breeze 🍃 It's fully mapped to Figma so that you can quickly translate your designs into working websites.

🆓 The Lite, free version of SystemFlow comes with a pre-built template that you can easily customise and use as a reference point for creating more components and classes. Please, watch the showcase of the Lite Template here: https://vimeo.com/548906518/8cc6598adf

🏗 Watch me building a complete website in Figma and Webflow using SystemFlow here: https://vimeo.com/517835310/2598d21888

📄 You can explore full systemflow.co docs here: https://systemflow-v-1-1-51e1ee81-49590199e0f65.webflow.io/style-guide/about/introduction

-------

Oh! and one more thing...

💸 To celebrate the launch of Lite version, we've created a special discount for Lite users -> just clone the project and visit Licensing & Resources page!

SystemFlow Lite

SystemFlow Lite - Designer-first, utility framework for Webflow & Figma

The Knockout marketing and documentation site is an example of the framework in action.

Knockout is an end-to-end Figma to Webflow framework that helps designers and Webflow developers accomplish more together.

You can find the stripped-down clone here:
https://webflow.com/website/Knockout-Webflow-Framework

Made With Knockout

madewithknockout

A new way to handle utility styles in Webflow

Utility Classes 2.0

This virtual timer was modelled after a clever countdown timer design by timetimer.com. 

The website + visual interactions were made in Webflow, the audio is from Freesound.org, the red circle animation is from Lottiefiles.com, and the code which plays the audio was generated by me in ChatGPT.

Scroll down past the instructions to see a quick video tutorial which explains how it works. 

Timer Instructions

60 Minute Time Timer
Refresh the page. The timer resets itself to 60 minutes anytime the page reloads. 

55-5 Minute Time Timer
Simply hover and click on the time you want. This will wind the virtual timer automatically and begin the countdown. When time is up, a relaxing and slow-to-build audio file will begin to play.

How to Build a Virtual Timer
The following video is about 8 minutes long and explain how the project works. If you have questions, feel free to leave a comment in the Loom video. https://www.loom.com/share/fb8acac0da6245959fbe4e26574d550c

Time Timer

Free Virtual Time Timer

Solomid.Tech

If you ever wanted to trigger a hover state on one element when another is hovered without using an interaction to do that, this solution is what you need.

Mirror hover state between elements

Create a modal using the information that you have inside your collection item. With a little bit of custom code and using the new feature to create dynamic attributes, we can show the modal with the information of the clicked item only.

CMS Modal

I was sick of having to go through a new rich text element and add the "when nested inside of" to each item so I made an easy pre-formatted version to copy and paste into your project.

This rich text block also has at least one of every element so you can easily adjust the look of your content before connecting it to your CMS. Hopefully this helps speed up people's work flow.

Easy Copy & Paste Rich Text

Pre-Formatted Rich Text

A simple site for a high-end joinery workshop in the Cotswolds. Designed and then Developed in Webflow.

David Barbour Joinery

david-barbour-joinery

I made this website for a 811 Utility company. Hope this helps those who are trying to make a website for a utility company.

Discover utility websites built by the Webflow community

Discover utility websites built by the Webflow community