Overview

Though mostly a CSS library, stylific has a tiny JavaScript file required for its interactive functionality. It can be controlled with trigger attributes [data-sf-*]. The library also exports a programmatic API that corresponds to clicking certain triggers.

Triggers

These triggers respond to click events. Adding the [disabled] attribute to the element stops the handler.

[data-sf-toggle]

Toggles class="active" on self. Example:

<button data-sf-toggle>Toggles self when clicked</button>

It's used in the toggled version of sf-dropdown.

[data-sf-toggle-siblings]

Adds class="active" to self and removes it from all sibling elements. Useful for custom radio-style toggles. Example:

<div>
  <button data-sf-toggle-siblings>first</button>
  <button data-sf-toggle-siblings>second</button>
  <button data-sf-toggle-siblings>third</button>
</div>

[data-sf-toggle-id]

Toggles class="active" on the element targeted by id. This can be used for any element, but particularly useful for toggling sf-modal:

<button data-sf-toggle-id="demoModal">click to toggle modal</button>

<div id="demoModal" class="sf-modal sf-modal-narrow">
  <div class="sf-modal-body">
    <!-- ... -->
    <button data-sf-close-modal>click to close</button>
  </div>
</div>

[data-sf-close-modal]

Closes the nearest ancestor .sf-modal. See the example above.

[data-sf-no-scroll-spill]

Don't you get annoyed when scrolling inside a small box and hitting top or bottom moves the viewport? You're in luck: this attribute prevents vertical scroll from spilling out.

<div data-sf-no-scroll-spill style="height: 10em">
  <!-- Long content to scroll through -->
</div>

[data-sf-noclick]

This is an anti-trigger. It causes stylific to ignore click events on the given element or its descendants. Useful if you want to put something with its own event handler (say, a button created with React) inside an element with a stylific trigger. Example:

<!-- Large click target -->
<div data-sf-toggle-id="myModal">
  <!-- Something smaller inside -->
  <div data-sf-noclick>
    <!-- Something with its own listener -->
    <button>...</button>
  </div>
</div>

In this example, button clicks won't trigger the [data-sf-toggle-id]. Note that you don't need [data-sf-noclick] for nested stylific handlers; the "inner" handler automatically cancels the event. This is for combinations with non-stylific handlers.

Programmatic API

The library exports a few methods that directly correspond to clicks on certain trigger attributes.

If you're using modules with a CommonJS-compliant loader, import it like so:

import stylific from 'stylific'
stylific.closeAllModals()

If you're dumping script tags into your HTML, the library will assign the export to window.stylific:

window.stylific.closeAllModals()

Each method takes an optional callback argument. If you pass a function, it will be called when the CSS transitions caused by the method are finished. If you don't pass a callback, and the global Promise constructor is available, the method will return a promise that resolves when the CSS transitions are finished.

Unlike trigger attributes, methods don't check for the [disabled] attribute.

toggleId()

TypeScript signature:

toggleId(id: string, done?: Function): Promise|void

Equivalent to clicking a [data-sf-toggle-id] pointing to the given id.

toggleElem()

TypeScript signature:

toggleElem(elem: HTMLElement, done?: Function): Promise|void

Equivalent to clicking this element if it had the [data-sf-toggle] attribute.

openModal()

TypeScript signature:

openModal(elem: HTMLElement, done?: Function): Promise|void

Equivalent to toggling the given modal by clicking a [data-sf-toggle-id] pointing to it. Note that this doesn't check if the target is a <template> (see why you'd use that). Use toggleId or toggleElem to target a <template> containing a modal.

closeModal()

TypeScript signature:

closeModal(elem: HTMLElement, done?: Function): Promise|void

Equivalent to closing the given modal by clicking its overlay or the [data-sf-close-modal] button. If the modal is a clone, it's destroyed after the CSS transitions.

closeAllModals()

TypeScript signature:

closeAllModals(done?: Function): Promise|void

Equivalent to hitting Esc to close all modals. The callback, if any, will be executed right away, but the promise, if any, will resolve only after all modals have been closed.