aarontgrogg/NoLoJS: Reduce the JS Workload with NoLoJS

Reduce the JS Workload with NoLoJS

Summary

NoLoJS is a collection of common UI patterns—accordions, carousels, lazy-loading, and more—reimplemented using primarily HTML and CSS, with JavaScript only when unavoidable. Each pattern is split into minimal component.html, styles.css, and (when needed) script.js files, and most include live CodePen demos so engineers can copy small, focused examples.

What it is useful for

NoLoJS is useful when you want to ship less JavaScript for performance, accessibility, or simplicity reasons. It demonstrates concrete HTML and CSS techniques for interactions many developers default to JavaScript for, including expanding panels, navigation menus, image lazy-loading, and carousels. Patterns are organized by feature name (e.g., accordion, css-carousels) and grouped into multiple variations per folder, which makes it easier to find an approach that fits a given design.

How engineers can use it

Browse the repository on GitHub or the companion site at https://aarontgrogg.github.io/NoLoJS/ to find a pattern. The accordion folder holds five variations, and css-carousels holds eight; each variation includes a short description, a No-JS or Lo-JS label, a link to Baseline or CanIUse, and a CodePen example. To use one, copy the component.html and styles.css (and script.js for a Lo-JS variation) into your project, or open the CodePen to experiment first.

The README does not describe an install or build step, so treat each variation's files as the source of truth. One documented limitation: the static site's conversion to GitHub Pages is still a work in progress, so some demos may be uneven. If you want to add a pattern, the contribution guide asks for a top-level folder named after the feature (e.g., lazy-load rather than loading), a README listing variations with No-JS/Lo-JS labels, and code kept as minimal as possible—no fonts, colors, or padding unless required for the pattern to work. The repository is licensed under GPL-3.0, which is worth checking against your project's licensing requirements before copying code wholesale.