CSS: 247 kB (1.2 MB) JS: 818 kB (3.4 MB)
CSS: 14.2 kB (90 kB)
Matt Stow stowball
stowball
/ heading-outline-bookmarklet.js
Last active
November 26, 2025 04:26
Heading outline https://twitter.com/stowball/status/1255867982510559234
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:(function()%7Bconsole.log(%0A%20%20Array.from(document.querySelectorAll('h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6')).reduce((str%2C%20heading%2C%20index%2C%20arr)%20%3D%3E%20%7B%0A%20%20%20%20const%20level%20%3D%20Number(heading.tagName.slice(1))%3B%0A%0A%20%20%20%20if%20(level%20%3D%3D%3D%201%20%26%26%20heading.textContent%20%3D%3D%3D%20'No%20Preview')%20%7B%0A%20%20%20%20%20%20return%20str%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20const%20style%20%3D%20getComputedStyle(heading)%3B%0A%20%20%20%20const%20previousLevel%20%3D%20index%20%3D%3D%3D%200%20%3F%20level%20%3A%20Number(arr%5Bindex%20-%201%5D.tagName.slice(1))%3B%0A%20%20%20%20const%20indentation%20%3D%20(level%20-%20previousLevel%20%3E%201%20%3F%20'*'%20%3A%20'-').repeat(level)%3B%0A%20%20%20%20const%20isAriaHidden%20%3D%20heading.getAttribute('aria-hidden')%20%3D%3D%3D%20'true'%3B%0A%20%20%20%20const%20isDisplayNone%20%3D%20style.display%20%3D%3D%3D%20'none'%3B%0A%20%20%20%20const%20isVisibilityHidden%20%3D%20style.visibility%20%3D%3D%3D%20'h |
stowball
/ storybook-viewport-dark-theme.user.css
Last active
November 10, 2019 11:25
Simple user stylesheet CSS to add the viewport size to the Storybook header. Install with a browser add-on such as Stylus or Stylebot
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::before, | |
| #root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::after { | |
| background: #333; | |
| color: #999; | |
| content: attr(style); | |
| direction: rtl; | |
| font-family: monospace; | |
| font-size: 14px; | |
| overflow: hidden; | |
| padding: 0 5px; |
In this article, I hope to define what I feel are the biggest issues with CSS and, ultimately, how those issues can be overcome.
stowball
/ example-input.html
Last active
February 16, 2025 19:57
Fetch a remote SVG as an <img> and convert it to an inline SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img | |
| alt="accessible text" | |
| class="fill-color-red" | |
| height="16" | |
| src="some.svg" | |
| width="16" | |
| onload="fetchSvgInline(this)" | |
| /> |
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| a, | |
| abbr, | |
| acronym, | |
| address, |
See the Pen Hucssley color palette by Matt Stow (@stowball) on CodePen.
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>See the Pen Huc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ------------------------- */ | |
| /* WIP Utility Class Library */ | |
| /* */ | |
| /* Works well with Purgecss */ | |
| /* ------------------------- */ | |
| // Functions and Mixins | |
| @function hu-em($target, $context: 16) { | |
| @return hu-strip-unit($target / $context) * 1em; |