Introduction
An open-source library of fully customizable and accessible components for creating UI elements using attributes
Socks UI allows you to customize components to your heart's desire without sacrificing time or accessibility. It turns your beautiful group of divs into accessible, interactive elements powered by GSAP.
Features
Attribute-based
You don't need to write any code. Make it look the way you want, then add the appropriate attributes to bring your elements to life! This way, you can create components way faster than before.
Accessible by default
Developers often don't bother with accessibility as it takes a lot of time and effort to properly follow the standards. With Socks UI, accessibility is not an after-thought, but rather a core feature. All our components follow WAI-ARIA design patterns so that you can focus on creating.
Useful Error Messages
Socks UI checks that your components have the right attributes at every step. If you mistype or forget to add one, you will get an error in the console that points you to the element you should check.
Open Source
The code for all the components is available for free on Github, where anyone can contribute to growing and improving this library. It uses plain Typescript and compiles to minified Common JS files.
Usage
Most components work the same way and you can use them in the following way:
1. Add scripts to your project
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/socks.js"></script>2. Add the attributes to your elements
Socks UI attributes are prefixed with s- to avoid conflicts with other attributes. Each component has its own attributes that you need to use. Make sure to read the instructions carefully!
3. Enjoy the time you saved
You didn't have to write any code or animate anything! Your component is now accessible and works reliably.
Bonus: Advanced features
You will also find methods and events that you can use to programmatically toggle the states of a component or listen for custom events! Wized users will like this feature :)