CSS: 247 kB (1.2 MB) JS: 818 kB (3.4 MB)
CSS: 14.2 kB (90 kB)
Matt Stow stowball
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 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
January 16, 2023 23:17
Fetch a remote SVG as an <img> and convert it to an inline SVG
This file contains 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 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 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; |
Ape Out: https://www.youtube.com/watch?v=WnDfbPZerQs Bloodroots: https://www.youtube.com/watch?v=28YnmtPDQBs Cadence of Hyrule - Crypt of the Necrodancer: https://www.youtube.com/watch?v=oYd_pph6RnI Creature in the Well: https://www.youtube.com/watch?v=iqQCIZv_3fY Darkwood: https://www.youtube.com/watch?v=iRbTO4no4Pw Duck Game: https://www.youtube.com/watch?v=jiSMnQUhLA0 Gato Roboto: https://www.youtube.com/watch?v=NlhU5urjgwk Hell is Other Demons: https://www.youtube.com/watch?v=1e2a9-OKXmI Hob: The Definitive Edition: https://www.youtube.com/watch?v=bK0dAoopB0c Katana ZERO: https://www.youtube.com/watch?v=-GcJC0N07Nk