DOCSEARCHbyAlgolia
Submit Docs

Oat UI Documentation

repository·master·Indexed 26 days ago

https://github.com/knadh/oat

An ultra-lightweight, zero-dependency UI component library providing approximately 10KB of CSS and JS. Oat UI focuses on semantic HTML, WebComponents, and minimal JavaScript to build web applications without modern framework bloat. It includes components such as Accordions, Alerts, Avatars, Badges, Breadcrumbs, Buttons, Cards, Dialogs, and Dropdowns.

Tokens
17K
Snippets
51
Records
92
Agent score
89%

What's inside Oat UI

  1. Overview of Oat UI

    master

    Oat UI is an ultra-lightweight, semantic, and zero-dependency UI component library. It consists of approximately 10KB of CSS and JS and is designed to work without a framework, build step, or development complexity.

    Key features:

    • Semantic Styling: Uses semantic HTML tags and attributes styled contextually without requiring excessive classes, which reduces markup pollution.
    • Zero Dependencies: No external libraries or frameworks required.
    • WebComponents: Dynamic components are implemented using WebComponents with minimal JavaScript.

    Note: The library is currently pre-v1 and may undergo breaking changes.

  2. Enable deep-linking for tabs using data-anchor

    master

    To allow users to deep-link to specific tabs (updating the page's URL hash fragment on tab change), follow these two steps:

    1. Add the data-anchor="<key>" attribute to the <ot-tabs> element.
    2. Assign a unique id to each element with role="tab" that you want to be linkable.

    When a user loads the page with a matching hash fragment, the corresponding tab will be activated automatically.

  3. Set up local development environment

    master

    To preview the documentation/demo site or test changes locally, follow these steps:

    Requirements

    • zola (static site generator)
    • esbuild (for bundling and minifying JS/CSS)

    Running the demo

    1. Clone the repository.
    2. Navigate to the docs directory: cd docs.
    3. Start the Zola server: zola serve. The site will be available at http://localhost:1111.
    4. To apply changes made to CSS or JS files, run make dist from the root. The demo site will automatically update.

  4. Use the spinner as an overlay

    master

    To dim the contents of a container and overlay the spinner on top of it, add data-spinner="overlay" to the element that has aria-busy="true". You can combine this with size modifiers, such as data-spinner="large overlay".

    <article class="card" aria-busy="true" data-spinner="large overlay">
  <header>
    <h3 class="card-title">Card Title</h3>
    <p>Card description goes here.</p>
  </header>
  <p>This is the card content. It can contain any HTML.</p>
  <footer class="flex gap-2 mt-4">
    <button class="outline">Cancel</button>
    <button>Save</button>
  </footer>
</article>

  5. Create a toggle switch using the Switch pattern

    master

    To create a toggle switch, use a standard HTML <input type="checkbox"> and add the role="switch" attribute. This allows for toggle switch styling while maintaining native HTML functionality without requiring JavaScript.

    <label>
  <input type="checkbox" role="switch"> Notifications
</label>
<label>
  <input type="checkbox" role="switch" checked> Confabulation
</label>

  7. Configure Dark Mode

    master

    Oat supports dark mode automatically via light-dark() and color-scheme: light dark, which follows the user's OS system preference.

    To customize the dark theme, redefine the theme variables scoped inside a [data-theme="dark"] selector. To manually activate dark mode, set data-theme="dark" on the <body> element.

  8. Use the TagInput component

    master

    The <ot-taginput> component allows users to type words and press <kbd>Enter</kbd> or <kbd>,</kbd> (comma) to convert them into a collection of tags. It requires a child <input> element to function.

    <ot-taginput value="apple, mango">
  <input placeholder="Add tags ..." maxlength="15" />
</ot-taginput>

  9. Theme Oat using CSS variables

    master

    Oat's visual properties are controlled via CSS variables. To create a custom theme, redefine these variables in your own CSS file and ensure your CSS file is loaded after the Oat library's CSS files. Use the :root selector to apply changes globally.

    :root {
  /* Page background */
  --background: rgb(255 255 255);

  /* Primary text color */
  --foreground: rgb(9 9 11);

  /* Card background */
  --card: rgb(255 255 255);

  /* Card text color */
  --card-foreground: rgb(9 9 11);

  /* Primary buttons and links */
  --primary: rgb(87 71 71);

  /* Text color on primary buttons */
  --primary-foreground: rgb(250 250 250);

  /* Secondary button background */
  --secondary: rgb(244 244 245);

  /* Text colour on secondary buttons */
  --secondary-foreground: rgb(87 71 71);

  /* Muted (lighter) background */
  --muted: rgb(244 244 245);

  /* Muted (lighter) text colour */
  --muted-foreground: rgb(113 113 122);

  /* Subtler than muted background */
  --faint: rgb(250 250 250);

  /* Subtler than muted text color */
  --faint-foreground: rgb(161 161 170);

  /* Accent background */
  --accent: rgb(244 244 245);

  /* Error/danger color */
  --danger: rgb(211 47 47);

  /* Text color on danger background */
  --danger-foreground: rgb(250 250 250);

  /* Success color */
  --success: rgb(0 128 50);

  /* Text colour on success background */
  --success-foreground: rgb(250 250 250);

  /* Warning color */
  --warning: rgb(166 91 0);

  /* Text colour on warning background */
  --warning-foreground: rgb(9 9 11);

  /* Border color (boxes) */
  --border: rgb(212 212 216);

  /* Input borders */
  --input: rgb(212 212 216);

  /* Focus ring color */
  --ring: rgb(87 71 71);
}

  11. Disable a toggle switch

    master

    You can disable a toggle switch by adding the disabled attribute to the checkbox input. This works for both checked and unchecked states.

    <label>
  <input type="checkbox" role="switch" disabled> Disabled off
</label>
<label>
  <input type="checkbox" role="switch" checked disabled> Disabled on
</label>

  12. Apply button variants and styles

    master

    The <button> element is styled by default. You can apply semantic variants using the data-variant attribute and visual styles using CSS classes.

    Variants:

    • data-variant="secondary" for secondary actions.
    • data-variant="danger" for destructive actions.

    Visual Styles:

    • Use the outline class for an outlined look.
    • Use the ghost class for a ghost/transparent look.
    • Use the disabled attribute to disable the button.
    <button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="danger">Danger</button>
<button class="outline">Outline</button>
<button data-variant="danger" class="outline">Danger</button>
<button class="ghost">Ghost</button>
<button class="outline" disabled>Disabled</button>
<button data-variant="danger" disabled>Disabled</button>
<button disabled>Disabled</button>