Jolty home Jolty Documentation

Introduction

Jolty

Jolty is an open-source UI library with no dependencies, providing you with full control over styling.

Components adhere to the WAI-ARIA design patterns and are fully controllable from the keyboard.

Modern API

We use the modern browser API by default, allowing the use of the <dialog> element for focus trapping and the Popover API to display the component in the top layer.

Breakpoints

Every component has a breakpoints option, which allows changing its settings depending on the screen width.

You can also set the destroy option at a specific breakpoint.

new Dropdown({
  destroy: true,
  breakpoints: {
    768: {
      destroy: false,
      placement: "bottom",
    },
    1024: {
      placement: "right",
    },
  },
});

Data

“You can use the Component.data() static method to create settings that can be reused in the data option or through the data-ui-component="name" attribute.”

html
<button data-ui-toggle="my-popover">Do something</button>
<div data-ui-popover data-ui-popover-mode="confirm" id="my-popover" hidden>
  Confirm
  <button data-ui-confirm>Yes</button>
  <button data-ui-dismiss data-ui-autofocus>No</button>
</div>
js
Popover.data("confirm", (dropdownElem) => {
  return {
    method: "modal",
    on: {
      confirm: () => {
        console.log("confirm");
      },
    },
  };
});
Popover.initAll();

Floating

The Popover, Dropdown, and Tooltip components allow displaying content over the main content without disrupting its structure.

For setting margins and positioning, non-inherited CSS variables can be used. They can be applied both to the component and its anchor / toggler.

css
.popover {
  --ui-popover-offset: 0.25rem;
  --ui-popover-placement: bottom-start;
}
@screen (min-width:1024px) {
  .popover {
    --ui-popover-placement: left;
  }
}

Animation

For creating animations, we use CSS-Based Transitions, as in Vue.js.

<div data-ui-collapse class="collapsible-panel" hidden>...</div>
 
<style>
  .collapsible-panel.ui-enter-active,
  .collapsible-panel.ui-leave-active {
    transition-duration: 200ms;
    transition-property: height, opacity;
    transition-timing-function: ease-in-out;
    overflow: hidden;
  }
  .collapsible-panel.ui-enter-to,
  .collapsible-panel.ui-leave-from {
    height: var(--ui-transition-height);
  }
  .collapsible-panel.ui-enter-from,
  .collapsible-panel.ui-leave-to {
    opacity: 0;
    height: 0;
  }
</style>

Supported browsers

Jolty supports the latest, stable releases of all major browsers and platforms.

Chrome >= 90
Firefox >= 98
iOS >= 15.7
Safari >= 15.7
2023 © A Project by Jolty Labs 🇪🇸 🇺🇦