F11y NPM | npm.io

⚠️ f11y is still in an alpha state - improvements, optimisations and features are still being actively worked on. Expect bugs & breaking changes if you do decide to use it.

Installation

via CDN / Script Tag

    ...
        </footer>
        <script src="https://www.unpkg.com/f11y@latest/umd/f11y.min.js"></script>
    </body>
    ...

via npm

npm install f11y --save

import f11y from 'f11y';

f11y is not a UI framework.

Zero styling choices are made for you. This library is 100% styling agnostic, our examples folder has some example CSS if you want a starting point.
We leave the UX up to you. UI frameworks often differentiate components based on their intended UX. For example a 'Modal' and a 'Alert Dialog' may be different components (albeit extensions of a common component). f11y does not do this, it provides you with all the base functionality, creating the proper UX is left to you.
Zero passive components. This means any component you may find in a UI framework that only requires HTML & CSS, think 'Cards', 'Avatars', 'Seperators' etc... and have no inherent/required user interactivity are not part of f11y.

So what does f11y do and why would I use it...?

f11y provides you with all the base functionality for creating fantastic and accessible UX, suitable for 90% of web use cases, without the overhead or complexities many UI frameworks bring.

Usage

Available Components

✔️ Accordions

✔️ Layers (Modals, Dialogs, Alert Dialogs etc)

✔️ Tooltips

✔️ Dropdowns (Dropdowns, Comboboxes, popovers)

✔️ Tabs/Tablist

✔️ Responsive Tables

✔️ Toasts (Available as a plugin for ~2kb min.gz'd)

❌ Context Menus (On the roadmap for V1.0 release - as a plugin)

❌ Calendar/Date Range Picker (On the Roadmap for V1.0 Release - as a plugin)

❌ Input Range Slider (On the Roadmap for V1.0 Release - as a plugin)

❌ Resizable Windows (On the Roadmap for V1.0 Release - as a plugin)

General Initialisation

All f11y components are initialised in a similar way and usually follow this pattern:

const componentElement = document.querySelector(".my-component");
new f11y.ComponentName(componentElement, configObject); // Config is optional in all components

Please refer to our examples folder for full details on HTML Markup and config options for each component

! Documentation Website Coming Soon