⚠️ 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

Roadmap

V0.1 Release

• [ ] Toast -- Key to focus to toast container area -- f6?
• [ ] Tooltip -- Initial delay
• [ ] Feature -- Implement destroy methods
• [ ] Complete docs website

V0.2 Release

• [ ] Bug: Fix 'Disable active tab' on TabList (it's bugged to hell)
• [ ] Bug: Toast awaitCloseTransition doesn't work
• [ ] Feature: Support Search on Dropdown
• [ ] Feature: Implement animation for Accordion
• [ ] Feature: Implement convert to accordion functionality on TabList
• [ ] Feature: Implement button group support on TabList
• [ ] Feature: Implement submenu support on Dropdown
• [ ] Feature: Implement swiping on TabList panels

V1.0 Release

• [ ] Plugin: Resizable Windows
• [ ] Plugin: Date Picker
• [ ] Plugin: Input Range Sliders
• [ ] Plugin: Context Menus (using templates)