zachleat/details-utils

Stars
258
Rank 158,189 (Top 4 %)
Language
JavaScript
License
MIT License
Created almost 3 years ago
Updated about 1 year ago

zachleat/details-utils

zachleat

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

A suite of utilities to add more features to the <details> element.

`<details-utils>`

Related work elsewhere:

spicy-sections

Installation

Available on npm

npm install @zachleat/details-utils

Add details-utils.js to your bundle.

Usage

Wrap <details-utils> around one or more <details> elements to add enhancements to their behavior:

Click outside to close (also bind an optional close button)
Animate open and close (obeys prefers-reduced-motion)
Force open/closed based on:
- JavaScript
- Media query
  - (e.g. viewport size, prefers-reduced-motion, even prefers-reduced-data if browsers ever support it 😅)
  - Optionally restores user state when media query does not match (use force-restore attribute)
Close via esc Key
- With optional Media query.
Toggle Document Class (toggles a class on <html> when active, useful for modals to disable document overflow)

Changelog

v2.0.0

Renamed attribute force-closed to force-close
Added force-open to complement force-close
Added force-restore to be used with force-open and force-close (restores state when media query does not match).

web-font-loading-recipes

A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/

speedlify

Benchmark the web performance and accessibility of sites over time.

BigText

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

fontfaceonload

A simple utility to execute a callback when a webfont loads.

table-saw

A small web component for responsive <table> elements.

browser-window

Used in demos as a way to fake a Safari-esque web browser window.

zachleat.com

zachleat.com is powered by Eleventy and WebC.

Humane-Dates

Show the difference between a date and now (4 days ago)

carouscroll

Add next/previous buttons to a horizontal scrollable container.

performance-leaderboard

A plugin to run Lighthouse against a set of urls to see which site is the fastest.

postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies.

seven-minute-tabs

A minimal no-theme Tabs web component.

filter-container

Filtering visible child elements based on form field values.

video-radio-star

A lightweight web component helper for HTML5 videos.

font-family-reunion

Compatibility tables for default local fonts.

spider-pig

Get a list of local URL links from a root URL.

snow-fall

A web component to add snow to your web site (or to an element on your web site).

announcement-banner

An announcement banner web component.

speedlify-score

A web component that shows Lighthouse scores via Speedlify.

hypercard

Web component to add a three-dimensional hover effect to a card.

jQuery-Gravatar

Retrieve a gravatar image dynamically from any e-mail address.

squirminal

The squirminal is a fake antique terminal web component

bench-framework-markdown

A set of scripts to test markdown processing speeds in various site generators/frameworks

infinity-burger

A new kind of hamburger menu

queue-code

Allows you to “type” syntax highlighted source code for presentations and screencasts.

pagefind-search

A web component to search with Pagefind.

performance-leaderboard-pagespeed-insights

A plugin to run Lighthouse on Pagespeed Insights against a set of urls to see which site is the fastest.

esm-import-transformer

Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`

idea-book

A public dump of ideas for side projects, for public upvoting/downvoting/commenting.

selecthor

A better way to test, learn, and demo CSS selectors

github-issue-to-json-file

Convert a well formed GitHub Issue Form populated Markdown body into a JSON data file in the repository.

JavaScript-Code-Katas

Let's practice our JavaScript testing.

webcare-webshare

f2em.com

A Front End Engineer's Manifesto

avatar-local-cache

Saves a image URL for an avatar to the local file system (and optimizes the image).

performance-sometime

Improving the web font rendering of the default Wordpress theme.

this-website-is-a-tech-talk

educational-sensational-inspirational-foundational

A website dedicated to a history of foundational web development blog posts.

heading-anchors

Adds and positions sibling anchor links for heading elements (h1–h6) when they have an `id` attribute.

throbber

A loading indicator overlay for images (and maybe other things later).

artificial-chart

An SVG charting library based on D3.js

gruntlerplate

A default grunt configuration for new projects.

ToolOrDie

A presentation on Web Developer Workflow.

ALARMd

Web based alarm clock

node-retrieve-globals

Execute a string of JavaScript using Node.js and return the global variable values and functions.

parity-purchasing-power-price

Web Component to show Parity Purchasing Power prices.

font-stats

Generates useful information about a font from a font file.

w3c-banners

A non-image based non-normative proposal for conformance of W3C status banners.

rainglow

A demo for 11tymeetup.dev

css-tricks-font-loading

A case study of the font loading for css-tricks.com

iliveinomaha-banner

Retina friendly progressively enhanced banner for iliveinomaha.com

foitfout

A web font loading demo to showcase FOIT and FOUT behavior side by side.

async-css-loading

Test cases for asynchronous css loading

JsTestDriver-Boilerplate

Easy boilerplate for test driven JavaScript projects using the JsTestDriver tool.

Compatibility-Tests

HTML5 tests used for research for blog posts

BUSYNESS

This project is retired.

uniclode

Another Eleventy Serverless demo, select characters to form a Unicode Range

Raging-Netflix-Queue

RETIRED—A Google Chrome extension, provides a single click add to your Netflix queue while browsing the web.

fundraising-status

Web component to show the current status of a fundraiser.

a-single-html-file

I am a single HTML file.

noop

A minimal module to test importing in other tools.

a11y-tests

A series of small atomic tests used to compare accessibility linting tools.

eleventy-components

unicode-range-interchange

Do math on Unicode Ranges for web fonts.

twitter-avatar-url

Find a twitter avatar image url from a twitter username.

demo-cloudcannon-image-optimization

netlify-kasa-build-status

A little script to update my lights with the status of a Netlify build

browser-logo-icon-set

A multi-color vector icon set (grunticon generated) of browser logos

DOM-Sailbloat

Find the bloat in your document using this Firebug Lite plugin.

rawhyde

A boilerplate for the Jekyll/Grunt/Buttsweater combination used on zachleat.com and nebraskajs.com.

Firebug-Code-Coverage

Retired source code for an old JavaScript Code Coverage plugin for Firebug.

tweetback-zachleat

Snapper

demo-eleventy-base-blog

Just testing GitHub templates

myspacebook

It’s out of this world.

Parlour

A full screen photo gallery with flickr integration.

package-zachleat

Meta package for Zach Leatherman

eleventy-sample-css-manager

Sample created for https://twitter.com/jaffathecake/status/1153759414765203463

gif-party

edge-redirects-test

zachleat

I AM A ✨ SPECIAL ✨ REPOSITORY

space-jam

reverse-proxy-test