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 - A Utility Framework for Webflow

Watch the tutorial at https://www.youtube.com/watch?v=AG_REG9p61E

CMS Draggable Slider Tutorial

Came across someone inquiring this type of custom interaction menu. So, here it is, FREE cloneable for everyone.

As indicated this cloneable is inspired by digital agency named, Baunfire [https://www.baunfire.com/]. Check out their website for more inspiration. 😉

The types of interaction used here are all doable natively. By playing around with 'Mouse Move Over Element', 'Mouse Click' and 'Mouse Hover' interaction, you can achieve this.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab

Custom Interaction Menu

A clonable project created to help you save time when developing forms on Webflow!

With this project, you can copy-paste a custom code element with a <select>
tag with all the countries in the world!

You have three options: 
1. With Emoji Flags
2. Without Emoji Flags
3. Without the Nice Select

DISCLAIMER: the countries are loaded in with JS - so you wouldn't be able to see them on Webflow however when you publish - Voilà!

country-dropdown-by-good-web-host

A labor of love finally completed! I've created a free website template for churches. It's my hope that this will help churches modernize their online experience and come back stronger than ever from COVID-19. This template features dynamic content for Sermons, Events, Staff, and Connect Groups and is ideal for single location churches.

Watch the tutorial at https://www.youtube.com/watch?v=_lgxY3LMR_Y

• Create landing pages in less than 3 minutes for anything
• Old events automatically removed the day after
• Homepage events section disappears when no events are present
• Add a new sermon, event, or connect group site-wide in seconds
• Reuse any page section across multiple pages (update once for all pages)
• Looks exactly the same on 5k screens as it does on Macbook Airs
• Thoroughly planned user experience and interactions
• Dummy proof to manage (from the Webflow Front-End Editor)
• Optimal site speed
• Homepage ministries section disappears when no content is set

Free Template for Churches

Free digital church template — for Christian churches

Dash Church

〰️ A professional, personal startup template. 〰️

Designed for:
✅ B2B Services
✅ SaaS Products
✅ Commercial Websites

Built with performance, simplicity, and powerful messaging in mind. If you need to create your startup's website quickly without delays, look at our ready-made templates. 

👉 Home page
👉 Landing pages
👉 Product tour / Feature page
👉 Demo form page
👉 Pricing page
👉 Blog Archive page
👉 Article page
- Copywriting outline

 〰️〰️ License Notes 〰️〰️
- Images are available under CC0 (Pexels, Unsplash, or Similar)
- Typography license available under CC0 via Free Google Fonts (Font used: Inter)
- Iconography available under CC0 or with attribution (Streamline Icons, Flaticon) [Free Icons from the Streamline Icons Pack]

Wave — 8 Page Startup Template (Cloneable)

Attempt to copy the website of Cowboy with Webflow as training. 
Design by Ueno agency for Belgian company Cowboy. 

Focus on positioning, sticky, scroll interactions and structuring divs. 
Some issues with fluid text sizing. 
Only external code is the autoplay tab section.

Still lot of work to get it right.  
It ain’t responsive (yet). Desktop only

cowboy

💬  We are available for freelance work: info@studio99.design

Follow us on Twitter to get notified when we publish a new item:
https://twitter.com/_studio99

🔸 001 / Comp. / Navigation

Architecture Slider

Add dynamic filters to your CMS content without having to edit any code!

Using Jetboost.io you can set up filters for both Reference and Multi-Reference fields on your Collection Lists. Radio buttons, checkboxes, regular buttons, and link blocks are all supported. The design and styling are done in Webflow and then you use Jetboost.io's visual editor to set the filter behavior.

Hope this helps if you've ever been stuck trying to add filters to your site!

CMS Dynamic Filters (No Code)

Ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

- Easily modify the SVG colors in each page' custom code panel (header).
- Easily create a transition for your menu links (I've just defaulted to opacity).
- Demo 6 demonstrates how to prevent multiple clicks (getting menu out of sync), using a simple Webflow interaction.
- Demo 7 demonstrates how to use the effect as a page transition.

Code modified from its original form to integrate seamlessly with Webflow. 

Original Code By Yoichi Kobayashi (http://www.tplh.net/)

Shape Overlays Menu

An example of how you can integrate Mapbox into your Webflow project to create an immersive storytelling experience. Feel free to clone but be sure to replace the API key with your own (available for free by creating a Mapbox account).

*Not optimized for mobile (yet)

Mapbox Scrollytelling

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Trendy AF Circular Text

Reverse engineered version of Webflow's very own sticky section component found here: https://webflow.com/solutions/freelancers-agencies.  

Details:
- It's using a proxy div (4x) to call the 'Scroll In/Out of View' interactions
- There is custom code in the footer used for video playback controls (starting/stopping video at specific time based on scroll position)
- 100% credit to Webflow team for design and original implementation

Webflow Sticky Sections

Just a few sections of playing around with different interactions!

cmoen-sandbox

A prototype of a Travel Blog website homepage.

Travel Blog Website Homepage

There are so many fantastic projects in the Webflow showcase, and (if they're cloneable) you can copy & paste elements into your own projects. 

That's insanely awesome!! 

The only thing that's been missing from the showcase is the ability to discover projects with a quick search. This is the first step in that direction. More to come! 

Please like, follow, and subscribe for updates. P.S. I'm open to feedback and feature requests.

Mia Baker

About

About