Getting started

1. Add the files

Copy the dist folder into your project. Put the stylesheet in the <head> and the script before </body>.

<link rel="stylesheet" href="dist/partwise.min.css">

<script src="dist/partwise.min.js"></script>

That is all. There is nothing to install and no build step. The files with .min are the small versions for your live site. The ones without are the same code with comments, for reading.

2. Copy a component

Open a component page, for example Modal, and copy the HTML under the demo. Components switch themselves on through data-pw-… attributes. You do not write JavaScript for the common cases.

<button class="pw-btn" data-pw-open="#hello">Open</button>

<div class="pw-modal" id="hello" data-pw-modal hidden>
  <div class="pw-modal-box">
    <div class="pw-modal-head"><h2>Hello</h2><button class="pw-close" data-pw-close aria-label="Close"></button></div>
    <div class="pw-modal-body">It works.</div>
  </div>
</div>

What is in the download

Partwise/
  dist/
    partwise.css        all styles, with comments
    partwise.min.css    the same, small
    partwise.js         all scripts, with comments
    partwise.min.js     the same, small
  src/
    css/                one file per component
    js/                 one file per component
  docs/                 a page for every component (this guide)
  index.html            the list of components
  documentation.html    this page
  README.md, CHANGELOG.md, LICENSE.txt

You only need dist in your project. The docs folder, index.html and this page are the guide.

Colours and shape

Every component reads a small set of CSS variables. Set them once, after the Partwise stylesheet, and everything follows.

:root {
  --pw-accent: #0f766e;        /* buttons, selected states, focus ring */
  --pw-accent-ink: #ffffff;    /* text on top of the accent colour */
  --pw-accent-text: #0c625b;   /* the accent colour as readable text */
  --pw-radius: 6px;            /* corners; also --pw-radius-sm and --pw-radius-lg */
}

Keep a contrast of at least 4.5 to 1 between text and its background when you choose colours.

Dark theme

Put data-pw-theme on the <html> tag, or on any element to theme only that part.

The button with the moon in the top bar of this guide switches the attribute, nothing more:

document.documentElement.setAttribute('data-pw-theme', 'dark');

To change the dark colours, set the variables again under [data-pw-theme="dark"].

HTML you add later

Components in the page are switched on when the page loads. When your own code adds HTML afterwards, tell Partwise once:

container.innerHTML = htmlFromServer;
Partwise.init(container);

Script and events

Each component page lists its functions and events. The pattern is always the same.

// the component that belongs to an element
var tabs = Partwise.get('#settings', 'tabs');
tabs.select(2);

// events start with "pw:" and carry their details in event.detail
document.querySelector('#settings').addEventListener('pw:change', function (e) {
  console.log(e.detail.index);
});

// some events can be stopped
modalElement.addEventListener('pw:close', function (e) {
  if (formHasChanges) e.preventDefault();
});

Only some components

dist/partwise.min.js holds everything and is small enough for most sites. If you want less, load single files from src. The base file and the core are always needed; each component page names its own files.

<link rel="stylesheet" href="src/css/00-base.css">
<link rel="stylesheet" href="src/css/11-tabs.css">

<script src="src/js/00-core.js"></script>
<script src="src/js/11-tabs.js"></script>

Buttons, badges and the other CSS basics are in 01-basics.css, form styles in 02-forms.css.

With a framework or a CMS

• Partwise is plain HTML, CSS and JavaScript, so it runs in any page: static sites, WordPress, Laravel, Rails, Django and others.
• In React, Vue, Svelte and similar tools, call Partwise.init(element) after the component has rendered its HTML. The components here do not know about your framework state, so keep them for parts the framework does not re-render, or use the framework's own component for that part.
• All class names start with pw- and all attributes with data-pw-, so they do not clash with your styles.

Keyboard and screen readers

• Every component can be used with the keyboard. Each page has a table of its keys.
• The scripts add the roles and states that screen readers need, such as aria-expanded and aria-selected.
• Dialogs keep the focus inside and give it back when they close.
• Animations are switched off for people who ask their device for less motion.
• Text keeps a contrast of 4.5 to 1 or more in both themes with the default colours.
• Right-to-left pages are supported: add dir="rtl" to the <html> tag.

The components were built with care for accessibility and tested with a keyboard and with automated checks. They have not been through a formal audit, and they were not tested with every screen reader.

Browsers

Current versions of Chrome, Edge, Firefox and Safari. The styles use color-mix() and the :is() selector, so the minimum is about Chrome 111, Edge 111, Firefox 113 and Safari 16.2. Internet Explorer is not supported. The automated tests of this version ran in Chrome.

Menus, selects, date pickers, tooltips and toasts use the browser's top layer (the Popover API) where it exists, so nothing on your page can cover them. In browsers without it they fall back to a high z-index.

Good to know

• Partwise is a front-end kit. Sending forms, uploading files and saving data are done by your own code or server.
• Texts inside components, like “No matches” or “Copied”, are in English. Most can be changed with an attribute; the component pages list them.
• A floating panel is placed with position: fixed. In browsers without the top layer, an ancestor with a CSS transform or filter can shift it. Move the panel out of that ancestor if you see this.
• Names, quotes and numbers in the demos are invented sample content.

Help and license

Questions or a bug? Use the support section on the item page where you bought it. Please name the browser and the steps that show the problem.

You may use Partwise in unlimited projects for yourself and for clients, including paid products. You may not resell or share the kit itself. The full terms are in LICENSE.txt.