Hatch UI kit - Kick start your project with Hatch

Using Hatch

Hatch is a cloneable at the moment but I do believe the creator, Mackenzie Child,  is going to start charging for use in the future, so clone it now. After you have cloned the project, you can start using it straight away and play around with the colors and the typography like you use any other UI kit with Webflow. However, where Hatch is different is that there is a directory of classes saved in the documentation that allows the user to simply implement these classes to get the desired effect they are after. For instance, there is a class for the top margin by 10 px. There are in fact over 2,000 classes that have been created to help you and all you have to do is input them into the class section on the top of the style section.

Benefits of using Hatch

Speed - Now getting used to the class names, which are pretty intuitive so not difficult, took me a little time but after that, I created a simple hero section and card layout with about 10 - 15 minutes which probably saved me around 5 minutes. Now, this may not seem a lot but saying that I only just started using this UI kit and was getting used to the class names, I was pretty dam happy with the results.

Performance - If you are like me and have never coded besides chucking a bit on an embed here and there, then you’ll probably have a laisse fair approach to creating classes, by this I mean, you make classes to serve that individual purpose. This can result in a hell of a lot of classes at the end which can affect the performance of your site especially if it's a complex site. With Hatch, all the classes are already created for you and though you can alter them when needed, the fact that you have these ready-made classes with names that are easy to remember means you won’t bloat your code again which will benefit your sites load time, SEO and user experience.

Design - As with performance - with the uniformity that is created by using the same classes over and over - your design will become more uniform and look better. The one issue I have whilst building without a UI kit is that I often have minor design flaws in my build that I have to remedy on the fly which is fine when building your own nocode project but if your building for someone else then this could make you look really bad.

Overall

I’ll definitely be using Hatch on a more regular basis and may even make little tweaks on my clone that better fit my needs and my naming style so that I can utilize this system faster and more efficiently. So defiantly check Hatch out (link below) it’s an awesome tool and an awesome piece of work by Mackenzie which must have taken him days to build.

https://webflow.com/website/Hatch-A-Utility-Framework-for-Webflow

Other Blogs