Getting Started with Acme Widget

Welcome to the Acme Widget documentation. This guide walks you through installing, configuring, and extending the widget. Every page in this documentation is designed to be readable on any device: the layout reflows from a single column on phones to a comfortable two-column view on desktops, without any horizontal scrolling.

Introduction

Acme Widget is a small, dependency-free component that renders interactive widgets. It follows web standards, works offline, and respects accessibility conventions such as semantic landmarks and keyboard navigation.

Installation

Copy the single file into your project and open it in a browser. There is no build step, no package manager, and no network request involved:

cp acme-widget.html your-project/
open your-project/acme-widget.html

Usage

Add the markup to your page and initialize the widget with a single call. The widget sizes itself to its container, so it never forces a page wider than the viewport.

const widget = AcmeWidget.mount('#target', { theme: 'light' });
widget.render();

API Reference

The public API consists of three methods: mount() to attach the widget, render() to draw it, and destroy() to clean up listeners and DOM nodes when you are done.

FAQ

Does it work offline? Yes. Everything is inlined into one file, so opening it directly in a browser works without a network connection.

Does it overflow on tablets? No. The panes use flexible grow, shrink, and basis values with min-width: 0, so they adapt fluidly at any viewport width, including 768px-wide tablets.