Documentation

The template is plain HTML, CSS and JavaScript, with no framework. Open index.html in a browser to use it, or put the folder on any web server to publish it: every link is relative, so it works from any folder.

Every page is a complete HTML file with the same frame: the sidebar, the top bar and the footer. Copy the page closest to what you need to start a new one.

Pages

449

Groups in the menu

32

Modules you can turn off

16

Browsers

The current Chrome, Edge, Firefox and Safari: the CSS uses :has(), container queries, color-mix() and logical properties, which all four support

Tested at

13 screen sizes from 320 to 1920 px wide, light and dark

Every page is a complete HTML file, so a new page starts as a copy of one that is close to it.

Add a page

1. Copy a page, for example blank-page.html, and give the copy its own name.
2. Change its <title>, and replace what is inside <main class="page">.
3. Link it from the sidebar. The sidebar is the same in every page, so change it in all of them at once with your editor’s find and replace.

Set a module to false and its pages, its menu groups and its widgets leave the menu and the screens; nothing else needs editing. A link elsewhere to one of its pages goes too, or keeps its words without the link, and a heading or a group it leaves empty goes with it. core is the product itself and is always on.

window.POS_CONFIG = {
  store: 'Corner Store',
  currency: 'USD',
  locale: 'en-US',
  today: '2026-10-04',
  modules: {
    core: true,
    restaurant: false,   // tables, kitchen display, bar tabs… leave the menu and every screen
    …
  }
};

today is the demo’s “today”: date filters count back from the day the figures were made. Remove it and they count from the real date.

The menu is the <aside class="sidebar"> block at the top of every page: 10 sections, 32 groups and 449 pages. Each link carries data-module, the module that owns its page, so a module turned off in config.js takes its links with it. The horizontal and two-column layouts carry their own copy of the menu.

system/tokens.css holds the colour ramps and what each colour is for, in light and in dark (184 tokens); system/system.css holds the type, the spacing, the corners and the components, all drawn from tokens.

The accent is the blue ramp, --blue-50 to --blue-950, at the top of tokens.css: give it your brand’s ramp and the buttons, links, focus rings and selected states follow in both themes. Keep --accent-text at 4.5:1 or more against --bg-surface.

The theme button in the top bar sets Light, Dark or the device’s own setting, and the device remembers it (pos.theme in local storage). data-theme on <html> fixes one theme; data-theme-default="dark" opens a page dark, as the Dark layout does. Charts redraw in the new colours.

<html lang="en" data-theme="dark">

Set dir="rtl", with your language, on <html>. The layout mirrors: the sidebar moves to the right, arrows turn, and every margin and padding is logical, so it follows. Text takes its direction from its own words, so an English line keeps its full stop at its end and figures read left to right; code blocks stay left to right.

ApexCharts draws left to right in either direction (its canvas is fixed to it); Chart.js legends and tooltips read right to left.

<html lang="ar" dir="rtl">

See the right-to-left layout

system.js wires every behaviour by attribute: add the attribute and the behaviour comes with it, with its keyboard support. The UI kit pages show each one working, with its markup to copy.

A chart is described in JSON in data-chart and drawn by ApexCharts in the theme’s colours, so it follows a change of theme. Each chart also has its figures in a table for screen readers.

The Charts pages show 20 kinds on the store’s figures; the Chart libraries pages draw the same figures with 6 libraries, for a team that already uses one.

The template draws Tabler Icons as inline SVG: write <i class="ti ti-NAME"></i> and system/icons.js puts the icon in its place. icons.js holds the icons the pages use; to add one, copy its SVG paths from tabler.io/icons into icons.js under its name.

The Icons pages show 13 sets; each one loads from a CDN on its own page only.

• Text, controls and their edges meet the AA contrast ratios in both themes.
• Everything works from the keyboard: menus, dialogs, tabs and radio groups follow the WAI-ARIA patterns, and focus can always be seen.
• Targets are at least 24 px; at the counter they are larger, for a touchscreen.
• A page reflows to 320 px wide, and keeps working with text spacing increased (WCAG 1.4.10 and 1.4.12).
• Movement stops when the device asks for reduced motion.
• Every chart has its figures in a table for screen readers.

Product photos in the demo: 23 from Unsplash and 4 from Pexels, under the Unsplash and Pexels licences, which allow commercial use without credit. The download carries placeholders in their place.