Classless: A Revolution in HTML

"Make HTML beautiful and friendly again"

Classless is a semantic HTML framework that eliminates class soup through rigid structure and CSS Grid, paired with a beautiful OOP control layer for static site generation.

The Problem with Bootstrap

<!-- Bootstrap: Class Poison -->
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <p class="card-text">Content</p>
        </div>
      </div>
    </div>
  </div>
</div>

This is unreadable. Even to Bootstrap masters. It's class poison.

The Classless Solution

<!-- Classless: Semantic Poetry -->
<main>
  <article>
    <header>
      <h2>Title</h2>
    </header>
    <p>Content</p>
  </article>
</main>

Beautiful. Readable. Semantic. The HTML tells you what it means, not how it looks.

Philosophy

1. Rigid Structure

The framework enforces a specific HTML structure through CSS Grid. No wrappers. No stray divs. Just semantic elements in their proper places.

2. Semantic First

Use <header>, <nav>, <main>, <article>, <aside>, <footer>. Not <div class="header">.

3. CSS Does the Work

CSS Grid places elements. CSS selectors style them. No classes needed.

4. OOP Control Layer

Never write HTML. Use the semantic JavaScript API:

const page = new BlogPage({ 
  title: 'My Blog',
  subtitle: 'Thoughts on design' 
});

page.addPost({
  title: 'Hello World',
  date: 'Nov 8, 2025',
  content: '<p>This is my first post.</p>'
});

const html = page.render();

5. AI-First Future

In the future, you won't write code. You'll prompt:

"Create a pricing page with three tiers and a FAQ section"

And receive classless.pricing.css + PricingPage.js - perfectly tailored, human-readable.

File Structure

classless.reset.css    - Browser normalization
classless.base.css     - Reusable typography, colors, spacing
classless.blog.css     - Blog-specific Grid layout
BlogPage.js            - Semantic control layer

The Grid System

The blog uses a semantic grid:

body {
  display: grid;
  grid-template-areas:
    "header  header   header"
    "logo    logo     logo"
    "nav     nav      nav"
    "aside   main     main"
    "footer  footer   footer";
}

Each semantic element gets its area:

body > header { grid-area: header; }
body > nav    { grid-area: nav; }
body > aside  { grid-area: aside; }
body > main   { grid-area: main; }

No classes. Pure structure.

Usage: Static Site Generation

const BlogPage = require('./BlogPage');
const fs = require('fs');

// Create page
const page = new BlogPage({
  title: 'Tech Blog',
  subtitle: 'Daily insights'
});

// Set up structure
page.setLogo({ src: 'logo.svg', alt: 'Logo' });
page.setNavLinks([
  { text: 'Home', href: '/' },
  { text: 'Archive', href: '/archive' }
]);

// Add content
page.addPost({
  title: 'My First Post',
  date: 'Nov 8, 2025',
  datetime: '2025-11-08',
  content: '<p>Hello, world!</p>',
  readMoreHref: '/posts/first-post'
});

// Generate HTML
const html = page.render();
fs.writeFileSync('index.html', html);

The API is Your Friend

The BlogPage class provides semantic methods that match the rigid structure:

Page Setup

page.setLogo({ src, alt, caption })
page.setNavLinks([...])
page.setCategories([...])
page.setFooter(text)

Content Addition

page.addPost({ title, date, content, ... })
page.addCategory({ text, href })
page.addNavLink({ text, href })

Rendering

page.render()      // Full HTML document
page.renderBody()  // Just the body content

Future Features

The system will grow through AI-generated patterns:

• classless.pricing.css + PricingPage.js
• classless.dashboard.css + DashboardPage.js
• classless.checkout.css + CheckoutPage.js

Each pattern is:

1. Classless - No class soup
2. Rigid - Enforced structure
3. Semantic - Beautiful HTML
4. Promptable - Generated by AI

Components

Large components get their own CSS files:

<link rel="stylesheet" href="classless.user.css">
<section id="user-info">
  <img src="avatar.jpg" alt="Avatar">
  <p>Jane Doe</p>
</section>

The ID + semantic structure replaces classes.

Design Tokens

The base CSS provides a design system:

:root {
  /* Typography */
  --text-base: 1rem;
  --text-xl: 1.25rem;
  
  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  
  /* Colors */
  --color-primary: #2563eb;
  --color-text: #1a1a1a;
}

Consistent, reusable, classless.

Why This Matters

1. Readable HTML - You can understand the structure at a glance
2. Maintainable - No class confusion, clear patterns
3. Accessible - Semantic HTML is screen-reader friendly
4. Future-proof - AI can generate new patterns from descriptions
5. Beautiful - Code should spark joy

Comparison

Bootstrap Way

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12">
      <div class="card shadow-sm">
        <div class="card-body">
          <h5 class="card-title text-primary">Title</h5>

15 classes. 5 divs. Unreadable.

Classless Way

<main>
  <article>
    <header>
      <h2>Title</h2>

0 classes. 0 divs. Semantic.

Getting Started

1. Include the CSS:

<link rel="stylesheet" href="classless.reset.css">
<link rel="stylesheet" href="classless.base.css">
<link rel="stylesheet" href="classless.blog.css">

2. Use the control layer:

const page = new BlogPage({ title: 'My Blog' });
page.addPost({ title: 'Hello', content: '<p>World</p>' });
console.log(page.render());

3. Open demo.html in your browser to see it live!

The Vision

This is more than a framework. It's a movement toward:

• Semantic HTML over class soup
• Rigid structure over infinite flexibility
• AI generation over manual coding
• Beauty over convenience

We're making HTML friendly again. 🎨

Contributing

The future is AI-prompted. Want to help?

1. Create new classless patterns (pricing, dashboard, etc.)
2. Build the AI prompting system
3. Improve the control layer APIs
4. Spread the word

License

MIT - Use it, love it, make HTML beautiful.

"In a world of class soup, be classless."