Toolkit

Standalone, framework-free versions of CodeFronts' CSS tools and generators. Each tool is a single HTML file — no build step, no npm install, no dependencies. Open it in a browser, or drop it into your own project.

The live, polished versions of these tools live at codefronts.com/tools and codefronts.com/generators. This repo extracts the same underlying logic into portable HTML files that work anywhere, including offline.

Tools in v1

Tool	Status
px → rem converter	✅ ready
CSS Minifier	✅ ready
CSS Formatter	✅ ready
CSS Specificity Calculator	✅ ready
CSS → Tailwind Converter	✅ ready
Tailwind → CSS Converter	✅ ready
HTML → JSX Converter	✅ ready
Box Shadow Generator	✅ ready
Gradient Generator	✅ ready

More tools and generators ship as standalone versions over time. The full set lives on codefronts.com.

Structure

toolkit/
├── index.html              # landing page — renders the grid from tools.json
├── tools.json              # manifest: source of truth for the tool list
├── assets/style.css        # shared theme (auto light/dark via prefers-color-scheme)
├── tools/<slug>/index.html # one folder per tool
├── .nojekyll               # disables Jekyll on GitHub Pages so _files aren't ignored
├── LICENSE                 # MIT
└── README.md

Run locally

The landing page fetches tools.json, so it needs to be served over HTTP rather than opened as file://:

python3 -m http.server 8000
# visit http://localhost:8000

Individual tool pages work fine via file:// — they're self-contained and don't fetch anything.

Live on GitHub Pages

When the repo is public and Pages is enabled, the site is live at:

https://codefronts.github.io/toolkit/

Each tool gets its own clean URL — e.g. https://codefronts.github.io/toolkit/tools/px-to-rem-converter/.

Adding a new tool

1. Create tools/<slug>/index.html (copy any existing tool as a starting point).
2. Add an entry to tools.json:

   { "slug": "my-tool", "name": "My Tool", "description": "What it does.", "category": "tool", "status": "ready" }

No other file needs to change — the landing page renders directly from the manifest.

Contributing

Pull requests welcome — especially for:

• New standalone tool implementations of anything from codefronts.com/tools or codefronts.com/generators that isn't here yet.
• Bug fixes or polish on existing tools.
• Accessibility improvements (keyboard navigation, screen-reader support, focus management).

Each tool should be:

• Self-contained — one HTML file per tool, vanilla JS / CSS only, no build step.
• Production-ready — works at any viewport, keyboard accessible, respects prefers-reduced-motion.
• Honest — the output the tool produces is the exact code a visitor would paste into a project.

License

MIT — see LICENSE. Use anything here in personal or commercial projects with no restriction beyond keeping the copyright notice.

Acknowledgements

The underlying algorithms are extracted from the production CodeFronts implementations. CodeFronts is the polished, designed home for these tools; this repo is the portable, no-dependencies version for cloning, learning from, and contributing to.