CSS Utils

A simple PHP-based landing page that collects useful CSS tools in one place. View it live. The reason for php and no database is to keep the site lightweight. Also, I already have a hoster that supports PHP for other projects. Editing the tools.php file is simple enough.

How it works

Tools are defined in tools.php as a plain PHP array. The homepage (index.php) renders them as a card grid. Clicking a card navigates to /slug, which Apache rewrites to redirect.php, which performs a 302 redirect to the tool's external URL.

Adding a tool

Add an entry to the array in tools.php:

[
    'slug'        => 'my-tool',
    'name'        => 'My Tool',
    'url'         => 'https://example.com/my-tool',
    'description' => 'Short description of what it does.',
    'icon'        => 'images/my-tool.png',
    'screenshot'  => 'screenshots/my-tool.png',
    'author_name' => 'Author',
    'author_url'  => 'https://example.com/author',
],

Place the icon (32×32 px) in images/ and a screenshot in screenshots/.

If the tool is hosted locally (e.g. in a subfolder like my-tool/index.html), no redirect is needed — Apache serves the folder directly and the url field in tools.php is ignored for routing. The slug just needs to match the folder name.

Features

• Light/dark/system mode (persisted via localStorage)
• Responsive card grid
• Clean slug-based URLs via .htaccess