Avalynx: Kleine Helfer, große Wirkung
Avalynx steht für leichtgewichtige, gut verständliche JavaScript‑Bausteine, die echte Alltagsprobleme im Frontend lösen – ohne schwere Frameworks, ohne Build‑Ballast. Der Fokus liegt auf klarem API‑Design, sauberer Integration in bestehende Markup‑Strukturen (z. B. Bootstrap 5.3+) und robuster Bedienbarkeit auf Mobilgeräten.
Die Bibliotheken sind bewusst modular gehalten. Du nimmst dir genau das, was du brauchst – und lässt den Rest weg. Ein Beispiel ist AvalynxTable, das schlichte HTML‑Tabellen automatisch in mobile‑freundliche, gestapelte Layouts verwandelt.
Quellen und Projekt‑Heimat
- Website: https://getavalynx.com/
- GitHub‑Organisation: https://github.com/avalynx
- jsDelivr (Autor „avalynx“): https://www.jsdelivr.com/?query=author%3A%20avalynx
- Packagist (PHP‑Pakete rund um Avalynx): https://packagist.org/users/jschwind/packages/?query=avalynx/avalynx
Leitlinien des Projekts
1) Einfachheit vor Komplexität
Avalynx‑Skripte sind in Vanilla JS geschrieben. Sie funktionieren „out of the box“ im Browser – ohne Transpiler, ohne zusätzliche Abhängigkeiten.
2) Schlank und fokussiert
Statt „One‑Size‑fits‑all“ liefern die Pakete klar umrissene Funktionen: eine Aufgabe, sauber gelöst. Das hält die Dateigrößen klein und die Lernkurve flach.
3) Progressive Enhancement
Das Markup bleibt semantisch korrekt. Auf kleineren Bildschirmen werden Inhalte nicht versteckt, sondern sinnvoll umgebrochen – ideal für Zugänglichkeit und Lesbarkeit.
Beispiel: AvalynxTable in 2 Minuten einsetzen
Mit AvalynxTable werden Standard‑Tabellen unterhalb eines definierten Breakpoints automatisch „gestapelt“. Jede Zelle erhält ihr zugehöriges Spalten‑Label, sodass die Zusammenhänge auch mobil klar bleiben.
Installation per CDN (jsDelivr)
<!-- CSS nur falls benötigt (Beispiel-Styles) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/avalynx-table/dist/avalynx-table.min.css">
<!-- Script: rein Vanilla JS, keine Abhängigkeiten -->
<script defer src="https://cdn.jsdelivr.net/npm/avalynx-table/dist/avalynx-table.min.js"></script>
Initialisierung
<script>
document.addEventListener('DOMContentLoaded', () => {
// Wähle, welche Tabellen verarbeitet werden sollen (CSS‑Selector)
AvalynxTable.init({
selector: 'table.table-responsive',
breakpoint: 768 // px – ab hier wird gestapelt
});
});
</script>
Markup‑Hinweis
Die Bibliothek nutzt vorhandene <thead>/<th>‑Informationen, um data-*‑Attribute an den Zellen zu setzen. Dadurch erscheinen die Spaltentitel im kompakten Layout automatisch neben den Werten.
Bezug zu Bootstrap 5.3+
Viele Avalynx‑Komponenten fügen sich nahtlos in das Bootstrap‑Ökosystem ein, indem sie existierende Hilfsklassen verwenden, statt eigene Lösungen zu duplizieren. Das Ergebnis: ein vertrautes Erscheinungsbild und weniger CSS‑Overhead.
Qualität, Distribution und Versionierung
- Veröffentlichung über jsDelivr sorgt für schnelle, weltweite Auslieferung per CDN.
- Quellcode und Issues liegen offen auf GitHub – Community‑Feedback ist willkommen.
- Versionen folgen semantischer Versionierung (semver), damit Upgrades planbar bleiben.
Ausblick
Avalynx wird schrittweise um weitere nützliche Helfer erweitert – immer mit Blick auf Barrierefreiheit, Performance und unkomplizierte Nutzung. Wenn du Ideen oder Feature‑Wünsche hast, eröffne gerne ein Issue im entsprechenden GitHub‑Repository.
Weiterführende Links
- AvalynxTable – Live‑Beispiel: 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
Fazit
Avalynx steht für pragmatische JavaScript‑Bausteine: klein, selbsterklärend, schnell integriert. Ob du nur eine Tabelle mobil‑freundlich machen willst oder gezielt einzelne UI‑Aspekte veredelst – mit den Avalynx‑Libraries erreichst du schnell gute Ergebnisse, ohne dein Projekt aufzublähen.