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

Hatch is a utility framework for Webflow that is made up of over 2,200 low-level utility classes, helping you work super fast.

Font sizing + spacing scales down automatically on each breakpoint so it's fully responsive out of the box.

If you want to use a style (or override a style) at a specific breakpoint, add a breakpoint class starting with Tablet, Landscape or Portrait. 

- - - - 

Watch a demo of me building with Hatch here: https://youtu.be/SgmapsRTgVo

Be sure to checkout the documentation to see which classes are available: https://www.notion.so/Hatch-0d4a03cf6c9f474787e59484822d09c7

(Official + searchable documentation site coming soon). 

I'd love to hear what you think! If you have any thoughts and/or ideas on how I can make Hatch better please let me know! Hit me up on Twitter (https://twitter.com/mackenziechild) or email me mackenzie@flowmingo.co.

Hatch

Hatch - A Utility Framework for Webflow

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

A clean and minimal style guide for Webflow projects. Use this to quickly and contextually adjust typography and colour right inside the designer. 

The naming conventions are based off the principles outlined in the Homerun styling system documentation. I hope this helps you hit your next project out of the park!

Documentation:
https://homerun-style-system.webflow.io

Homerun Style Guide

We’ve distilled our approach into a number of principles that drive our development department. We then created our course Webflow for Teams and the corresponding Standard No-code Class Library. We are launching this into the world to talk about more than just what we are building and start to get into how and why we build things.

You can learn more on our free course Webflow for Teams
https://www.edgarallan.com/courses/webflow-for-teams/home

standard-nocode

I was playing around with building tailwind css in webflow and never finished it. It's been sitting in my dashboard for months untouched. Saw it today in and thought I might as well share it. Maybe someone will finish it. Remix it. Share it with the community. (last updated March 2020)

Davida Design System v1

Davida Design System (Tailwind CSS Inspired)

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

Boldo is an example clone site made with the Knockout Framework.

The idea here is to show how we are using the system in a build.

You can learn more about Knockout here:
https://www.madewithknockout.com/

Boldo - Knockout Example Clone

boldo

This is a very small part of Fast Flow Kit that you can clone.
In this way, you can see first hand how the classes are structured.

For more information about the full kit, go here:
https://www.slashmint.com/fast-flow-kit

Fast Flow Kit allows you to combine the best of Component CSS with the flexibility of Utility First.

No more wasting time and effort to organize your website in an inefficient way.
Take your projects to the next level with Fast Flow Kit.

Fast Flow Kit | Free Sample

I created this project to help with the development of my Webflow projects. It is created to fit my personal workflow, but am interested to see if anyone else finds value in it. Please leave any comments or suggestions that you think might help.

If it does help speed up your workflow, consider supporting the project:
https://www.buymeacoffee.com/jasonkelley

Utility Flow / beta

Utility Flow

Skyrocket your Webflow workflow.
Avoid hundreds of clone classes and working hours with Fast Flow Kit, the perfect hybrid between Utility First and Component CSS Framework.

No more wasting time and effort to organize your website in an inefficient way.

What you will find in the kit:
- more than 600 classes ready to use
- 2 navigable templates to manage your classes and components visually
- more than 10 class pages
- 3 Google Sheets to keep track of everything and speed up your processes
- a page of examples to test the CSU2 method
- a guide with tips and tricks to better organize your project
- Free updates

Take your projects to the next level with Fast Flow Kit.

Discover utilityclasses websites built by the Webflow community

Discover utilityclasses websites built by the Webflow community