Components

one.css provides a set of lightweight, classless components that handle most common UI needs.

Buttons

Buttons adapt automatically to your accent color. Use standard <button> tags.

<button>Primary</button>
<button class="outline">Outline</button>
<button class="ghost">Ghost</button>
<button disabled>Disabled</button>

Sizes & Variations

Add .large or .small for different sizes.

<button class="large">Large</button>
<button class="small">Small</button>

Cards

Use the .card class to group related content. It provides padding, elevation, and rounded corners.

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
  <button class="outline">Action</button>
</div>

Details / Accordion

Standard <details> and <summary> elements are styled automatically.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content...</p>
</details>

Dropdown

Use .dropdown class on a details element to create a dropdown menu.

<details class="dropdown">
  <summary>Options</summary>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</details>

Modal

Simple modal overlays using semantic HTML and minimal JS.

<!-- Modal Overlay -->
<div class="modal-overlay" id="my-modal">
  <div class="modal">
    <button class="modal-close" onclick="closeModal()">×</button>
    <h3>Title</h3>
    <p>Content...</p>
    <button onclick="closeModal()">Okay</button>
  </div>
</div>

<style>
  .modal-overlay { display: none; /* Toggle via JS */ }
</style>