Veloce

A classless CSS library. Style HTML, not classes.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph & Inline Text

Regular paragraph with strong text, emphasized text, highlighted text, deleted text, inserted text, and links.

Small text for fine print.

ABBR with title attribute.

Keyboard input: Ctrl + C

Code: const x = 42;

Sample output: Error: file not found

Variable: x = y + 2

Subscript: H2O | Superscript: E=mc2

Blockquote

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

Code Block

function greet(name) {
  return `Hello, ${name}!`;
}

greet('World');

Lists

Unordered List

  • First item
  • Second item
    • Nested item
    • Another nested
  • Third item

Ordered List

  1. First step
  2. Second step
  3. Third step

Description List

Term
Definition of the term
Another Term
Another definition

Horizontal Rule

Address

Contact: hello@example.com
123 Main Street, City

Forms

Text Inputs
Number Inputs
Date & Time
Other Inputs
Selection
Checkboxes & Radios
Input States
Buttons

    • Standalone Buttons

  • Link as Button
    •

    Output

    + = 30

    Components & Patterns

    Table

    Sample Data Table
    Name Email Role Status
    Alice Johnson alice@example.com Admin Active
    Bob Smith bob@example.com User Active
    Carol White carol@example.com User Inactive
    3 users total

    Details & Summary (Accordion)

    Click to expand

    This content is hidden until the user clicks the summary.

    Another expandable section

    More hidden content here.

    Open by default

    This section starts expanded.

    Dialog (Native Modal)

    Dialog Title

    This is a native HTML dialog element. No JavaScript framework needed.

    •

    Progress & Meter

    Figure & Media

    Sample image
    Figure caption describing the image above.
    Responsive image
    Picture element with dark mode variant.

    Article Card Pattern

    Card Title

    This article element can be styled as a card component without any classes.

    Aside (Sidebar/Callout)

    Navigation Patterns

    Breadcrumb

    Tabs (with Alpine.js)

    Pagination

    Search Pattern

    Embedded Content

    Embedded map using iframe.

    Prose Example

    On the Merits of Semantic HTML

    The web was built on documents. Before the JavaScript frameworks, before CSS-in-JS, before the build tools—there was just HTML. And it was enough.

    Today we've forgotten this. We reach for div and span like they're the only elements that exist. We add classes like .card, .btn, .text-lg until our markup becomes unreadable. But there's another way.

    The Case for Native Elements

    Consider the humble <details> element. It gives you an accordion for free—no JavaScript required. Or <dialog>, which handles modals with proper focus trapping and backdrop. These aren't obscure features; they're part of the platform.

    The best code is no code at all. Every line of code you write is a liability.

    — Jeff Atwood

    When you use semantic elements, you get:

    • Built-in accessibility (screen readers understand <nav>)
    • Reduced JavaScript (native behaviors are already implemented)
    • Better SEO (search engines parse semantic structure)
    • Easier styling (target elements, not classes)

    A Practical Example

    Let's say you need a FAQ section. The typical approach involves custom JavaScript, ARIA attributes, and careful state management. Or you could write this:

    <details>
  <summary>How do I get started?</summary>
  <p>Just include the CSS file and write HTML.</p>
</details>

    That's it. The browser handles the rest. Click the summary, content appears. Click again, it hides. Keyboard accessible. Screen reader friendly. Zero JavaScript.

    The Philosophy

    This isn't about being a purist. It's about choosing the right tool for the job. Sometimes you need React. Sometimes you need a CSS framework. But often—more often than we admit—plain HTML is enough.

    The next time you reach for a component library, ask yourself: does the platform already solve this? You might be surprised how often the answer is yes.

    Page Structure Elements

    These elements define the semantic structure of a page:

    <header>
    Page or section header, typically contains nav and branding
    <nav>
    Navigation links
    <main>
    Primary content of the page (only one per page)
    <article>
    Self-contained content that could stand alone
    <section>
    Thematic grouping of content
    <aside>
    Tangentially related content (sidebars, callouts)
    <footer>
    Page or section footer