Getting Started

Semantic HTML

ply automatically styles 13 semantic HTML elements — no classes needed. Start with native elements before reaching for custom markup.

Text

Headings

All heading levels are styled with a consistent type scale, weight, and line-height.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Navigation

<nav>

Wrap a <ul> inside <nav class="navbar"> for a horizontal navigation bar. ply handles active states, hover effects, and responsive collapse.

<nav class="navbar">
  <ul>
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Data

<table>

Tables are styled automatically — borders, padding, header styling, and striped rows all come free.

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Charlie	PM	Away

Code

<code> & <pre>

Inline <code> gets a subtle background and monospace font. Block <pre> elements get padding, border-radius, and horizontal scroll.

Inline: const x = 42;

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

Keyboard

<kbd>

Keyboard input elements get a raised, bordered appearance.

Press Ctrl + K to open search.

Use Tab to navigate, Enter to select.

Quote

<blockquote>

Block quotes get a left border accent and italic styling.

Start with semantic HTML before reaching for classes. ply gives you a lot for free.

Highlight

<mark>

The <mark> element highlights text with a theme-aware background.

You can highlight important text with the mark element.

Disclosure

<details> & <summary>

Native disclosure widgets with styled toggle indicators.

Click to expand

This content is hidden by default and revealed when the user clicks the summary. No JavaScript needed.

Another expandable section

You can have multiple details elements. Each toggles independently.

Modal

<dialog>

Native HTML dialog element with automatic backdrop, centering, and styling.

Indicators

<progress> & <meter>

Progress bars and meter elements are styled with theme-aware colors.

Progress (70%) Meter (low) Meter (high)

Input

Form Elements

Inputs, selects, textareas, checkboxes, and radio buttons are all styled when wrapped in a .form container. Labels automatically stack with their inputs.

See Forms for the full forms reference including sizes, validation states, and input groups.

Customize the look with Colors & Theming, or explore the grid system for page layouts.