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

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

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

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

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

Loopple is a drag & drop dashboard builder that helps you create beautiful and dynamic admin panels for your startup and business in minutes.

Loopple

VS Code to Prism Themes is a small web tool that helps you convert your VS Code theme to Prism CSS or React components.

Sara Vieira

VS Code to Prism Themes

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

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

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

Keyframes help you write better CSS. Create basic or complex CSS keyframe animations with a visual timeline editor similar to video-editing software, single or multi-layer box shadows just by moving some sliders, convert between hex and RGB, and save palettes.

Mitch Samuels

Keyframes

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

Amio Jin

Embedded Google Fonts

Cubic-bezier is a small web app that lets preview and compare different cubic-bezier CSS animations.

Lea Verou

Cubic-bezier

Reseter.css is an awesome CSS boilerplate for a website. It is a great tool for any web designer. Reseter.css resets all the premade styles by the browser. It normalizes the browser's stylesheet for a better cross-browser experience.

Reseter.css

Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.

Paul Macgregor

Easings

A CSS selector to plain English translator.

 Kitty Giraudel

Selectors Explained

Box Shadows allows you to interactively create box shadows and get the CSS to generate them.

Mike McBride

David Leininger

Box Shadows

CSS 2 JS helps you transform between CSS, JavaScript objects, and JSX props.

CSS 2 JS

Animista is a tool that lets you play with a collection of pre-made CSS animations. Tweak them and get only those you will actually use.

Ana Travas

Animista

Tiny Tools is a huge list of CSS animation tools.

John Meguerian

Tiny Tools

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

Dylan Smith

How to Target Email Clients

Dynamically view the output of Sass HSL color functions in the browser.

Jim Nielsen

SassMe

CSS Layout is a collection of popular layouts and patterns made with CSS.

Phuoc Nguyen

CSS Layout

Create and configure an animated 3D book in CSS.

Sébastien Castiel

3D Book

No matter if you are using TailwindCSS or just plain CSS, Gradient Designer helps you make beautiful gradients.

Jens Törnell

Gradient Designer

Attention all developers, entrepreneurs, and tech enthusiasts: Are you ready to revolutionize the world of software development? With MarsX, you can create high-quality apps quickly and easily, without the need to reinvent the wheel or spend hours writing complex code. Our low-code platform allows you to focus on the unique aspects of your projects, while our subscription-based model provides access to all the micro apps built by thousands of developers.
But that's not all! By building micro-apps and publishing them on our marketplace, you can generate a sustainable revenue stream and take your career to the next level. With MarsX, you can create MicroApps instead of building yet another SAAS with less hustle and no need to market, and be paid by thousands of users. 
Join us and unlock the potential of low-code technology, micro-apps, and insane productivity!

CSS Tools