Classless HTML

Write semantic HTML and it is styled. Classes are only for variants.

Everything on this page is plain HTML with no class. Each element has its own page with the details and variants.

Page structure

body has no margin. A header, main or footer directly in body gets vertical padding, and each section gets space below it. Wrap the content in a container to center it.

<body>
  <header class="container">...</header>
  <main class="container">
    <section>...</section>
    <section>...</section>
  </main>
  <footer class="container">...</footer>
</body>

Text

An article title

With a subtitle under it

A paragraph with strong, emphasis, a link, highlighted text and inline code. Press Ctrl to continue.

A quote set apart from the text.

Someone wise

A list item
Another item

See typography, list and code.

Forms

See controls, checkbox, radio and switch and validation.

Tables, progress and media

Task	Done
Design	100%
Build	60%

A figure with a caption.

See table, progress and meter and media.

Interactive elements

details is an accordion, dialog a modal, an element with popover a popover, and nav a row of links. None of them need JavaScript.

What is in the box?

Plain HTML, styled.

See accordion, modal, popover and nav.

When to add a class

Add a class when you want a variant, such as .primary or .large, or a pattern HTML has no element for, such as .card or .badge. Start with colors and sizes.