Collections on Give 'n' Go

Dashboards

Fri, 15 Aug 2025 00:00:00 +0000

Dashboards as Visual Composition

Dashboard interfaces are among the most visually dense things you can build in a browser. They combine layout, typography, color coding, data visualization, and interactive controls into a single view that needs to communicate clearly at a glance. Getting the composition right is as much a design challenge as a technical one.

This collection features dashboard components and full-layout recreations that demonstrate how to structure information-rich interfaces using CSS Grid, Flexbox, SVG charts, and vanilla JavaScript. The focus is on the front-end craft: how do you make a dashboard that looks good, loads fast, and remains readable across screen sizes?

Micro-Interactions

Sun, 10 Mar 2024 00:00:00 +0000

The Details That Matter

Micro-interactions are the smallest unit of interactive design. A button that subtly shifts color on hover. A toggle that animates between states rather than snapping. A notification that slides into view with a slight spring. These details are invisible when done well and painfully obvious when missing.

This collection gathers browser-native micro-interactions that demonstrate restraint, timing, and purpose. The best examples here add information or feedback through motion rather than just adding motion for its own sake.

Illustrations

Mon, 15 Jan 2024 00:00:00 +0000

Drawing in the Browser

Browser-native illustration occupies a fascinating space between design and engineering. Every shape is a DOM element or SVG path. Every color is a computed value. Every shadow and gradient follows the browser’s rendering pipeline. The constraints are real, but they produce work with qualities that raster illustrations cannot match: resolution independence, interactivity, animatability, and the ability to be styled with CSS.

This collection features illustrations built entirely with HTML/CSS, SVG, or a combination of both. No embedded raster images, no canvas bitmaps. The pieces range from simple geometric compositions to detailed scenes with dozens of layered elements.

Navigation

Sun, 10 Sep 2023 00:00:00 +0000

Navigation is the most structurally consequential UI element on any page. It determines how people discover content, how search engines understand hierarchy, and how the entire page layout responds to interaction. Getting navigation wrong cascades into every other design decision.

The pieces in this collection explore navigation not as a solved problem but as a design space with real trade-offs. Hamburger menus save space but hide structure. Mega-menus expose depth but overwhelm on touch devices. Tab systems work beautifully for flat hierarchies but collapse under deep nesting.

Loaders

Sun, 20 Aug 2023 00:00:00 +0000

The Craft of Waiting Well

Loading indicators are one of the few UI elements that users stare at directly. That makes them disproportionately important to perceived performance. A smooth, well-timed loader communicates progress and competence. A janky or generic one communicates neglect.

The best loaders in this collection share a few qualities: they start instantly, they animate smoothly without layout recalculation, and they feel like they belong to the interface around them rather than being dropped in from a component library.

Clocks

Sat, 15 Jul 2023 00:00:00 +0000

Why Clocks Make Great Practice

Clock interfaces sit at a productive intersection of visual design and technical constraint. Every clock needs to solve the same core problems: circular layout, rotating elements, time-based state, and readable typography at multiple scales. But the number of ways you can approach those problems in the browser is enormous.

A pure CSS analog clock forces you to think about transform-origin, rotation math, and how transition-timing-function affects perceived smoothness. An SVG version opens up path-based tick marks, gradient fills, and more precise control over stroke rendering. Adding JavaScript for real-time updates introduces requestAnimationFrame patterns, timezone handling, and DOM update efficiency.