Idea to Launch
Idea to Launch

Idea to Launch

The Idea

Webflow makes building websites fast.

Hatch makes it even faster by providing you with ready to use classes for things like colors, sizing, spacing & layouts.

Update #1 - Lots of thinking

Update #2 - Progress & A Demo

Base Framework / Utility Classes

V2 (Maybe)
Cursors
32 Classes
πŸ“Ž
Background Clipping
16 Classes
Transforms
✍️In progress
βœ… Added to Webflow
🌈
Text Colors
πŸ³οΈβ€πŸŒˆ
Background Colors
πŸš₯
Sections
44 Classes
πŸ₯‘
Containers
10 Classes
πŸ”²
Display Block
4 Classes
πŸ’ͺ
Display Flex
80 Classes
🌐
Display Grid
22 Classes
πŸ™ˆ
Display None
4 Classes
πŸ”³
Display Inline Block
4 Classes
β—Ύ
Display Inline
4 Classes
⬆️
Margin
504 Classes
⬇️
Padding
504 Classes
↔️
Width
200 Classes
⏩
Max Width
44 Classes
▢️
Min Width
16 Classes
↕️
Height
96 Classes
πŸ”Ό
Min Height
16 Classes
⏫
Max Height
8 Classes
©️
Font Size
50 Classes
πŸ“Š
Text Align
16 Classes
↕️
Line Height
32 Classes
πŸ‹οΈ
Font Weight
8 Classes
↔️
Letter Spacing
24 Classes
πŸŽ‚
Text Decoration
16 Classes
πŸ’…
Text Transform
16 Classes
πŸ‘‰
Text Direction
8 Classes
πŸ’”
Text Breaking
16 Classes
πŸ•³οΈ
Text Shadow
12 Classes
πŸ“Œ
Position
92 Classes
🧞
Floats
12 Classes
πŸ‘Š
Clear
16 Classes
πŸ”²
Borders
80 Classes
🚿
Overflow
16 Classes
πŸ’ͺ
Fit
20 Classes
πŸŒ—
Box Shadow
12 Classes
β­•
Border Radius
36 Classes
πŸ‘»
Opacity
40 Classes

Hatch UI

Planned
Heros
Section
Navigations
ComponentSection
Overlays
Component
Cards
ElementSection
Rich Text
ElementSection
Features
Section
Galleries
Component
CTAs
Section
Contact Form
Section
Pricing
ComponentSection
FAQs
ComponentSection
Testimonials
ComponentSection
Logo Clouds
ComponentSection
Blogs
Section
Meet the team
Section
Pagination
Element
Tabs
Component
Sliders
Component
Modal Overlays
Component
Alerts / Notifications
ComponentElement
Footers
ComponentSection
Buttons
Element
Inputs
Element
In progress
✨
Style Guide
General
Completed

Project Tasks

Not started
hatchui.com
Webflow
Setup Documentation
Webflow
Hatch Demo / Tutorial
Video
In progress
Create Hatch Logo
Design
Design Hatch Landing Page
Webflow
Completed
Setup Hatch Preorder
General
Setup ideatolaun.ch with Notion & Super.
General

FAQs

What is Hatch?

Hatch is a framework & UI kit for Webflow. It's made up of predefined classes, components & layouts to help you work faster and earn more money.

Who is Hatch made for?

Hatch is perfect for freelancers, agencies & and anyone who wants to build their Webflow projects faster.

How much does it cost?

Hatch is 100% free to clone. Hatch UI (to be released) will be a paid product, but the price is to be determined.

Questions or suggestions?

I'd love to hear from you! Email me at mackenzie@flowmingo.co.

About

image

Hey! I'm Mackenzie Child. πŸ‘‹

I'm the creator of Flowmingo.co - training & templates for Webflow.

Idea to Launch is a behind the scenes look into the process of building a project from start to finish.

Right now I'm working on Hatch 🐣

Brought to you by Webflow

New to Webflow? Signup & start building without code.

Β©2020 Chico HQ, LLC | Made by Mackenzie Child for Flowmingo.co