@georgedoescode/nugget NPM

Nugget — Responsive Graphics Reimagined!

What it is

Nugget is a small (~9kb) JavaScript library that creates generative grids which automatically arrange themselves “around” existing content on a web page. These grids enable developers and designers to create bespoke graphics that will adapt to any layout, any device, at every resolution — all in a few lines of code!

What it isn't

Nugget isn’t a graphics library. It helps position things on the page, not render them! SVG, Canvas, and HTML elements can all be used alongside Nugget.

Performance

Nugget uses Resize Observer to track changes in the DOM without polling and leverages workers to offload it’s grid calculation to a separate thread. As a result, calculating grids using Nugget is extremely fast and non-blocking.

Creating content to fill Nugget’s grids, however, can introduce some performance cost. Please be mindful of the execution time of your chosen render method, and take a look at some of the example below for optimal solutions!