Components, Custom Elements, & more

js

View Transitions

Working example of animated transitions from left to main panel.

css js transition work stuff1
1

js

Simple Light-Dark Mode

Very basic light-dark mode example

css js dark mode stuff1 demo
2

js

Mergely Code Diff App

Two panel code diff tool.

code js diff pr stuff1 work
3

css

Smooth Card to Modal Transition

Grid of 12 box buttons that open a centered modal with transition effect.

css modal transition grid card stuff1 demo
4

css

Controlling CSS with HTML attr(data-)

Add data types to HTML markup to control sizes, colors, etc.

css attributes stuff2 poc
5

css

HSL() color and Magic Contrast

POC using the CSS hsl() color function plus demonstrating automatic color contrast.

color hsl contrast a11y stuff5 poc demo
6

js

Child height determining parent height v2

Allows a resizable child to influence the size of its parent

css js child parent height resize nested stuff5 poc
7

js

Web component template

Skeleton template code for creating a custom element web component

web component js stuff5 work template
8

js

CE | Resize panels with touch

Resizable vertical and horizontal panels with smooth touch support.

css js splitters stuff3 touch poc component custom layout
9

css

CSS | CSS Only Resize plus Touch Support

CSS only resizable panels using vertical splitters

css stuff2 splitter split panels poc touch
10

js

Splitter | Resizable.js with Containers v1

Compare and contrast responsive elements using container queries

css stufmfaf4 cq container queries work poc
11

css

CSS | Overlay with background-image

Series of profile images demonstrating background image gradient overlays

css stuff3 profile image round overlay work
12

css

Oval Profile Responsive Background Image

Responsive profile image with caption that maintains relationship to image size

css stuff4 background profile image responsive work
13

css

Profile chips, pills, and cards

Custom radio pills, checkmarks, and cards with profile photos

css stuff5 chips cards profile radio checkbox poc
14

css

Magic Contrast

Using the CSS color function lch to automatically select the foreground color

color contrast css auto a11y accessible lch color stuff 4 poc
15

js

Two Panel Splitter main and right v1.2

Two panel splitter for use with custom element prototype

splitter stuff5 cs js split layout custom element work
16

js

JS Drag & Drop with ViewTransitions

Drag & Drop demo using startViewTransitions API

js css adam argyle transitions drag stuff1 public
17

css

CSS Centering Template

Basic starting point for centering an element in the middle of a page

css center center div stuff5 demo
18

css

CSS Only Mindmap

CSS Only Horizontal Mindmap suitable for basic organization

mindmap css stuff5 public organization tree
19

js

HTML | Drag and Drop

Demo of the native HTML Drag and Drop API. Drag individual list items or an entire list to another position.

js drag and drop native html vanilla js public stuff1
20

css

CSS | Changing State with :has()

Color changes while tabbing through the buttons. Uses the include-content component.

css has public include content stuff2
21
Page
Side Menu