I Tried Building a Website Using Only HTML + AtomAttr

Описание и применение

Автор использовал AtomAttr, фреймворк, где стили задаются атрибутами, чтобы построить сайт без классов CSS, и доказал, что такой подход работает для адаптивных макетов, отступов, цветов, состояний и компонентов.

Задача

Can a website be built without writing CSS classes, using only an attribute‑first CSS framework?

Результат

Using AtomAttr, the author successfully built a website without CSS classes, demonstrating that attribute‑first styling can handle responsive layouts, spacing, colors, states, and components in a practical manner.

Рабочий процесс

• 1. Replace class attributes with attribute‑first syntax. 2. Apply grid, grid-cols, gap, and padding attributes to elements. 3. Test responsive layouts, spacing, colors, states, and components for consistency.
• 4. Document the process in YouTube videos.
• 5. Evaluate practicality as the site grows.
• 6. Share findings and documentation on the AtomAttr website.

Доказательства

Instead of writing: <div class="grid grid-cols-3 gap-4 p-6"> I used: <div grid grid-cols="3" gap="4" p="6">

Источник

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.

Источник