Stacket - Webflow to GitHub Export Automated!

It takes your Webflow Site, optimizes it and uploads the changes to GitHub every time automated when you change something in your Webflow Site.

The main benefit is that you finally can build your own Stack upon Webflow. Whether its a functional web app, or you want to move the exported images to a own image server, it unlocks you all possibilities!

It also solves the GDPR privacy issue, it optimizes automatically the images into WebP or even AVIF (newest image codec on earth), can lazy images, videos, iframes and even javascript files and heavily optimizes your static or CMS Site without any effort by you.

It not only optimizes the website, you can also avoid the massive Webflow Hosting costs by exporting your site to a location you want.

Features:

-    Automated Export from Webflow to Github
-    Availability to create any stack upon GitHub you wish (Vercel, Netlify, S3)
-    Support for Exporting CMS pages
-    Track Design Changes from Webflow (line per line)
-    Support for multi-folder structures
-    Automatic Image Optimization (WebP & AVIF) 
-    Lazy Loading Images
-    Lazy Loading Videos
-    Lazy Loading Iframes
-    Async JavaScript Loading
-    Intelligent Prefetching
-    Inline CSS


Benefits:

-    Availability to create any stack upon GitHub you wish (Vercel, Netlify, S3)
-    Maintain granular control of the code Webflow is producing your own github repository
-    Version Control of your Website
-    Way better website performance
-    Get rid out of non GDPR regulations and host it in your environment
-    View the exact design changes at code level and see what Webflow has been changed or broke
-    Run your Webflow CMS as static pages
-    Avoid Expensive Webflow Costs

Stacket

Flowgator takes your Webflow design and makes a commit to previously created repository. This way, you can track what changes have been done to the code and quickly copy/paste it into your project.

Export Webflow project to Github repository on autopilot. Just hit publish in Webflow Dashboard and HTML, CSS, JS, and images will be exported to Github.

Erbert

Flowgator

Click on an animation card to copy the CSS code.

Emil Kowalski

CSS Effects

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

Nils Binder

BEM Cheat Sheet

Hundreds of beautiful and responsive UI components, premade and ready to use for your next ReactJS project.

Made with Chakra UI and Framer Motion.

Saša Šijak

React UI Boutique

Web Code Tools is a collection of useful tools for web developers, including CSS, HTML, microdata, JSON-LD, meta-tags, open graph, and more.

Jason Macfarlane

Web Code Tools

Carefully crafted, easy to customize, fully responsive UI components for your Tailwind CSS based projects that can help you design great looking marketing pages and web applications. Crafted with love for web developers, web agencies and digital nomads.

John Champ

Tailkit

Shape Divider is a free tool to make it easier for designers and developers to export beautiful SVG shape dividers for their projects.

Gaurav Padia

Karam Sihra

Shape Divider

Ratio Buddy helps you calculate CSS aspect ratio's.

Tristam Goch

Ratio Buddy

Create and export CSS code for a custom box with an arrow extending out from the side.

Simon Højberg

CSS Arrow Please

A tool that helps you determine the correct react-spring config for your animations.

Joost Kiens

React Spring visualizer

Patternico is a web application that allows you to generate beautiful background patterns.

Patternico

Vuestic UI is a components library for Vue 3. It features more than 50 highly customisable components, forever free and Open Source. 

Vuestic Admin (https://github.com/epicmaxco/vuestic-admin) is a great example of a real-world web application based on Vuestic UI and is used by Epicmax (the company that stands behind Vuestic ecosystem) to bootstrap numerous products developed for the company’s clients.

Vuestic UI

Your website holds your design tokens

Design tokens are the smallest parts of your design: colors, typography, spacing etc. With them you can make consistent experiences across different parts of your website and app and even across projects.
Use them anywhere

Superposition extracts the design tokens your site already has and exports them to CSS, Scss, JavaScript, Figma and Adobe XD with Sketch, Swift and Android exports on the way.

From the overview of each group, simply click on a token to add the CSS value to your clipboard for easy usage.

Kilian Valkhof

Superposition

Embedded Google Fonts allows you to embed base64 encoded google fonts into CSS.

Amio Jin

Embedded Google Fonts

Single out email clients and platforms using crowdsourced email development techniques.

Dylan Smith

How to Target Email Clients

A CSS selector to plain English translator.

 Kitty Giraudel

Selectors Explained

Omatsuri is a progressive web application with 12 open source frontend-focused tools. Omatsuri translates to «festival» from Japanese (お祭り) and here we have a small festival of applications.

CSS Tools