Project / 06
Independent work · Open source / internal tooling
GridWave
A lightweight open-source JavaScript library for responsive, filterable and animated grids with a strong focus on developer experience.
- Role
- Creator / Maintainer
- Context
- Open source / internal tooling
- Status
- Active
- Scale
- Agency foundation / production websites
Case study
Context
Across agency websites, interactive content grids were a recurring requirement for portfolios, blog archives, references and category-based collections.
The standard need was simple: a responsive grid, filter controls, and smooth transitions when the visible set changes.
Isotope handled this well visually, but it felt too heavy and complex for such a common pattern.
Problem
Repeated implementations often depended on copied setup code because the previous solution was not intuitive enough to recreate quickly from memory.
For a pattern centered on filtering, sorting and animated layout updates, the amount of setup and dependency weight was disproportionate.
Approach
I built GridWave as a small drop-in library focused on responsive and filterable grids.
Usage is intentionally direct: initialize a GridWave instance and call focused methods such as filter() and sort().
It layers behavior on existing markup and keeps configuration optional for cases where defaults are sufficient.
Key Decisions
-
Optimise for the common case
Default behavior is designed to cover most grid use-cases without additional configuration.
-
Avoid markup-specific APIs
GridWave integrates with existing HTML instead of enforcing proprietary component structures.
-
Keep the public API small
The API stays centered on understandable operations such as filtering and sorting.
-
Responsive by default
Responsive layout behavior and animated repositioning are built into the core system.
-
Make advanced layouts optional
Layouts like masonry are supported when needed without increasing default complexity.
Developer experience
The core goal is that developers should not need to revisit documentation for routine grid setups.
A basic implementation remains close to creating an instance and initializing columns and gap, with direct interaction methods for filter and sort behavior.
Additional configuration exists, but it is optional rather than required to get useful behavior.
Production use
GridWave is open source and free to use.
It is also integrated into the agency shared frontend foundation and deployed across multiple production websites.
Outcome
GridWave replaced recurring copy-and-paste integration work with a focused reusable abstraction aligned to real team needs.
It reduced setup effort for a common UI feature while retaining filtering, sorting, responsive layouts and animated transitions through a compact API.
Highlighted Outcome
A pattern that previously required adapting a larger third-party library became a lightweight, drop-in component used in production agency projects.