Creating a PWA with Neat CSS

I have an old progressive web app (PWA) that I wanted to re-create using the Neat CSS framework.

Download Neat

I created a directory called /neat and downloaded the example index and css files.

curl -O https://neat.joeldare.com/neat.css
curl -O https://neat.joeldare.com/neat.html

Creating index.html

Next I created the index.html file with just some basics in it.

<!DOCTYPE html>

<head>

    <title>Quick Calories</title>

    <link rel="stylesheet" type="text/css" href="neat.css">
    <link rel="stylesheet" type="text/css" href="custom.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

</head>

<body>

    <a class="home" href="neat.html">&nwarr;</a>

    <h1>Quick Calories</h1>

    <p></p>

</body>

</html>

Create custom.css

Next I added a custom.css file.

The UI if my Quick Calories app is pretty simple.

Most apps don’t have headers anymore, they just start with the functionality.

I need to add a button/input on top.

Get battle-tested dev tips, terminal wizardry, and practical Mac hacks from a veteran engineer who speaks your language. Subscribe now and power up your toolkit—no fluff, just real code magic.

Show Me Your Hacks

Terms - Privacy