Hello Awesome Indie👋

This project initially started out because we review a lot of apps on our blog readcaffeine.com but don't have the capacity to review every app that shows up on our radar, or the app simply doesn't have enough substance to be reviewed.

So I started by adding any tool that caught my eye while browsing the web, or from other resource directories to an Airtable Database, and now we have curated 100+ Tools for Founders and Business Owners 🎉

We add our Tools in batches, so remember to bookmark the link and check back regularly.

If you have a tool that you want to add, please don't hesitate to navigate to the Add Tool section on our website, and tell us about it.

And that's about it!👋

Resources by Readcaffeine

BCMS is a Headless CMS that makes managing content as easy as building Legos so that your clients can have control over the content, and you can focus on coding - without being restricted by tools.

BCMS

Click on an animation card to copy the CSS code.

Emil Kowalski

CSS Effects

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

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

Patternico

Bannernote is a no-code tool, that enables anyone to create, manage & analyze banner campaigns from one dashboard. Get full insights about the performance of your banner campaigns, and decide when to stop or customize - without touching code or asking your developer!

Bannernote.com

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

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

Nils Binder

BEM Cheat Sheet

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

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

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

Ratio Buddy helps you calculate CSS aspect ratio's.

Tristam Goch

Ratio Buddy

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

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.

Vitaly Rtishchev

Omatsuri

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

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.

CSS Tools