Avalynx: Small helpers, big impact
Avalynx stands for lightweight, easy‑to‑understand JavaScript building blocks that solve real everyday frontend problems — without heavy frameworks or build pipelines. The focus is on a clean API, seamless integration into existing markup (e.g., Bootstrap 5.3+), and robust usability on mobile devices.
The libraries are intentionally modular. You take exactly what you need — and leave the rest. One example is AvalynxTable, which automatically turns plain HTML tables into mobile‑friendly, stacked layouts.
Sources and project home
- Website: https://getavalynx.com/
- GitHub organization: https://github.com/avalynx
- jsDelivr (author "avalynx"): https://www.jsdelivr.com/?query=author%3A%20avalynx
- Packagist (PHP packages around Avalynx): https://packagist.org/users/jschwind/packages/?query=avalynx/avalynx
Project principles
1) Simplicity over complexity
Avalynx scripts are written in vanilla JS. They work out of the box in the browser — no transpilers, no extra dependencies.
2) Lean and focused
Instead of a one‑size‑fits‑all approach, each package delivers a clearly defined function: one job, done well. That keeps file sizes small and the learning curve flat.
3) Progressive enhancement
The markup remains semantic. On smaller screens, content isn’t hidden but reorganized meaningfully — ideal for accessibility and readability.
Example: Get started with AvalynxTable in 2 minutes
With AvalynxTable, standard tables automatically “stack” below a defined breakpoint. Each cell receives its corresponding column label so relationships stay clear on mobile.
Install via CDN (jsDelivr)
<!-- CSS only if you want example styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/avalynx-table/dist/avalynx-table.min.css">
<!-- Script: pure vanilla JS, zero dependencies -->
<script defer src="https://cdn.jsdelivr.net/npm/avalynx-table/dist/avalynx-table.min.js"></script>
Initialization
<script>
document.addEventListener('DOMContentLoaded', () => {
// Choose which tables should be processed (CSS selector)
AvalynxTable.init({
selector: 'table.table-responsive',
breakpoint: 768 // px — stacked layout starts here
});
});
</script>
Markup note
The library uses existing <thead>/<th> information to set data-* attributes on cells. This makes the column titles appear automatically next to the values in the compact layout.
Works with Bootstrap 5.3+
Many Avalynx components fit seamlessly into the Bootstrap ecosystem by reusing its utility classes instead of reinventing them. The result: a familiar look and minimal CSS overhead.
Quality, distribution, and versioning
- Delivery via jsDelivr ensures fast, worldwide CDN distribution.
- Source code and issues are open on GitHub — community feedback is welcome.
- Versions follow semantic versioning (semver) so upgrades remain predictable.
Outlook
Avalynx will gradually grow with more useful helpers — always with a focus on accessibility, performance, and straightforward usage. If you have ideas or feature requests, feel free to open an issue in the respective GitHub repository.
Useful links
- AvalynxTable — Live example: https://avalynx-table.jbs-newmedia.de/examples/table.html
- AvalynxTable — GitHub: https://github.com/avalynx/avalynx-table
- AvalynxTable — jsDelivr: https://www.jsdelivr.com/package/npm/avalynx-table
Conclusion
Avalynx stands for pragmatic JavaScript building blocks: small, self‑explanatory, and quick to integrate. Whether you want to make just one table mobile‑friendly or fine‑tune specific UI aspects — with Avalynx libraries you’ll get great results quickly without bloating your project.