DEV Community: Adetayo Adeniyi

I Tried Building a Website Using Only HTML + AtomAttr

Adetayo Adeniyi — Sat, 03 Oct 2026 14:36:55 +0000

What happens when you try to build a real website without writing a bunch of CSS classes?

I decided to find out.

For this experiment, I used AtomAttr, my attribute-first CSS framework.

Instead of writing:

<div class="grid grid-cols-3 gap-4 p-6">

I used:

<div grid grid-cols="3" gap="4" p="6">

The interesting part wasn't just the syntax.

I wanted to see whether this approach actually remained practical once the website became more complicated.

Responsive layouts.

Spacing.

Colors.

States.

Components.

Everything had to work together.

The experiment also became one of the videos I'm making while documenting my journey with AtomAttr on YouTube.

Sometimes building a framework is easy.

Getting people to care about it is the hard part.

That's the experiment I'm running now.
check out the documentation
https://devadetayo.github.io/atomattr

I Built a CSS Framework Without Using Classes

Adetayo Adeniyi — Sat, 03 Oct 2026 14:33:13 +0000

I've been working on a CSS framework called AtomAttr, but I didn't want to build another framework that simply followed the same patterns everyone already knows.

So I tried something different.

Instead of:

<div class="p-4 bg-blue-500 flex items-center">

AtomAttr lets you write:

<div p="4" bg="blue-500" flex items-center>

The idea is simple: use HTML attributes to describe your styles.

I've been building the framework, testing the syntax, adding responsive variants and states, and figuring out how to make the runtime actually work.

AtomAttr is now released as v1.0.1, and I'm taking the project beyond just "I built something."

I'm trying to find out whether other developers actually want to use it.

GitHub:
Docs:

This is the beginning of the experiment.

[Boost]

Adetayo Adeniyi — Sat, 29 Nov 2025 16:17:32 +0000

Adetayo Adeniyi

Nov 28 '25

Stop fighting your build tools. Meet AtomAttr.

#webdev #javascript #css #opensource

2 min read

Stop fighting your build tools. Meet AtomAttr.

Adetayo Adeniyi — Fri, 28 Nov 2025 20:51:16 +0000

For years, frontend development has been dominated by the build step. Webpack, Rollup, Vite, PostCSS... the list goes on.

While tools like Tailwind CSS revolutionized how we style apps, they introduced a heavy dependency on Node.js environments. If you are a backend developer (PHP, Python, Go) or just want to prototype a quick idea, setting up a full frontend toolchain feels like overkill.

I asked myself: What if you could just write HTML?

So I built AtomAttr.

⚛️ What is AtomAttr?

AtomAttr is a runtime CSS engine.

Instead of compiling your CSS at build time, it compiles it in the browser, instantly. It uses a MutationObserver to watch your DOM and injects atomic CSS rules only for the attributes you actually use.

It weighs less than 10kb, has zero dependencies, and requires no config.

⚡ How it works

You drop one script tag in your header. That's it.

<script src="[https://unpkg.com/quanta-atomattr/dist/atomattr.min.js](https://unpkg.com/quanta-atomattr/dist/atomattr.min.js)" defer></script>

Then, you style using attributes instead of classes:

HTML

<div flex center h="screen" bg="slate-900">
    <div bg="white" p="8" radius="xl" hover-scale="1.05" transition="all">
        <h1 text="indigo-600" size="2rem">Hello World</h1>
        <p text="slate-500">No build step required.</p>
    </div>
</div>

Features at a glance:

Atomic Syntax: p="4", m="auto", flex, grid.
Responsive: Mobile-first breakpoints (md-, lg-, xl-).
Stateful: Built-in interaction states (hover-, focus-, active-).
Dark Mode: Native support via dark- prefix.
Arbitrary Values: Need a specific width? Just write w="350px". The engine handles it.

🚀 Why Runtime?
"Isn't runtime CSS slow?"

Actually, no. AtomAttr uses CSSStyleSheet.insertRule(), which modifies the browser's internal CSSOM directly. It does not parse text or trigger heavy layout thrashing like older methods. The performance impact is negligible (sub-10ms) for even complex pages.

🛠️ Try it out
I built a playground where you can test the engine live without leaving your browser.

Live Playground

Documentation

GitHub Repo

I'm looking for feedback from the community. If you hate build steps as much as I do, give AtomAttr a spin and let me know what you think!