ROFL. My latest web component, a locked-down, Patternfly-5 styled, elementInternals-aware wrapper for `input type="number"`, is only 39 lines long.
The JSDoc for it is 105 lines! Because `@cssprop` and Patternfly, natch.
The JSDoc for it is 105 lines! Because `@cssprop` and Patternfly, natch.
August 8, 2025 at 11:48 PM
ROFL. My latest web component, a locked-down, Patternfly-5 styled, elementInternals-aware wrapper for `input type="number"`, is only 39 lines long.
The JSDoc for it is 105 lines! Because `@cssprop` and Patternfly, natch.
The JSDoc for it is 105 lines! Because `@cssprop` and Patternfly, natch.
some interesting takeaways here
Chained CSS custom properties are faster than you think (here’s why)
https://medium.com/patternfly/chained-css-custom-properties-are-faster-than-you-think-heres-why-a007ee53292c
#CSS #WebDev #WebDesign #WebPerf
Chained CSS custom properties are faster than you think (here’s why)
https://medium.com/patternfly/chained-css-custom-properties-are-faster-than-you-think-heres-why-a007ee53292c
#CSS #WebDev #WebDesign #WebPerf
June 12, 2026 at 6:10 AM
some interesting takeaways here
Chained CSS custom properties are faster than you think (here’s why)
https://medium.com/patternfly/chained-css-custom-properties-are-faster-than-you-think-heres-why-a007ee53292c
#CSS #WebDev #WebDesign #WebPerf
Chained CSS custom properties are faster than you think (here’s why)
https://medium.com/patternfly/chained-css-custom-properties-are-faster-than-you-think-heres-why-a007ee53292c
#CSS #WebDev #WebDesign #WebPerf
At authentik, we've started the process of stepping away from Patternfly, the Red Hat-developed design system, because version 6 was so different it broke our branding, and 5 has been moribund for awhile. Looks like we may have gotten out just in time:
techrights.org/n/2026/10/01...
techrights.org/n/2026/10/01...
Techrights — Red Hat Being Phased Out of Existence (Like Many Other Companies That IBM Bought)
techrights.org
October 1, 2026 at 6:49 PM
At authentik, we've started the process of stepping away from Patternfly, the Red Hat-developed design system, because version 6 was so different it broke our branding, and 5 has been moribund for awhile. Looks like we may have gotten out just in time:
techrights.org/n/2026/10/01...
techrights.org/n/2026/10/01...
It started as a Django app, then Lit-Elements with a restful back-end, but using Patternfly as the CSS library. Talk to the Patternfly-Elements people; they've had "upgrade to Patternfly 5" as a to-do item for three years now (and Patternfly 6 has been out for awhile).
October 8, 2025 at 11:02 PM
It started as a Django app, then Lit-Elements with a restful back-end, but using Patternfly as the CSS library. Talk to the Patternfly-Elements people; they've had "upgrade to Patternfly 5" as a to-do item for three years now (and Patternfly 6 has been out for awhile).
Andy Coe - Patterns Fly - May 15, 2026
YouTube video by ThanksLoveArt
youtube.com
May 16, 2026 at 7:28 PM
Strict adherence to standards is a good thing in software. Adherence so strict it baffles the user is not. In Patternfly, the "power level status" indicator has levels of "low," "medium," and "high." They are backward from expectations: A full battery is "low", as in "low risk of failure." 🤷♀️
August 17, 2025 at 5:58 AM
Strict adherence to standards is a good thing in software. Adherence so strict it baffles the user is not. In Patternfly, the "power level status" indicator has levels of "low," "medium," and "high." They are backward from expectations: A full battery is "low", as in "low risk of failure." 🤷♀️
First time using #keycloakify to modify a #keycloak theme with React instead of the annoying Java/FreeMarker/PatternFly stack, which I really dislike a lot.
January 10, 2025 at 3:54 PM
First time using #keycloakify to modify a #keycloak theme with React instead of the annoying Java/FreeMarker/PatternFly stack, which I really dislike a lot.
The new #GitLab design is suspiciously similar to #Patternfly 's default page layout 👀
November 18, 2025 at 12:48 AM
The new #GitLab design is suspiciously similar to #Patternfly 's default page layout 👀
The (completely merited) analysis of Claude Code as a junkpile doesn't undo its usefulness, unfortunately; I had some pretty good success with it this morning, uncovering a nasty circular dependency in IBM's Patternfly CSS library—
April 3, 2026 at 3:41 PM
The (completely merited) analysis of Claude Code as a junkpile doesn't undo its usefulness, unfortunately; I had some pretty good success with it this morning, uncovering a nasty circular dependency in IBM's Patternfly CSS library—
(Also, frankly, our Combo box is far more... over-engineered than patternfly-elements's is. Part of that was that it started out data-heavy to support our application, not be a general-purpose element, and disentangling it is... that's on the tasklist. *sigh*.)
October 8, 2025 at 11:04 PM
(Also, frankly, our Combo box is far more... over-engineered than patternfly-elements's is. Part of that was that it started out data-heavy to support our application, not be a general-purpose element, and disentangling it is... that's on the tasklist. *sigh*.)
It's fun how "uses a proper frontend framework with components" (e.g. Patternfly, Bootstrap etc.) has turned from "low-effort frontend" to "at least it's probably not vibe-coded because LLMs don't choose anything but Tailwind/no components at all" in my brain
April 16, 2026 at 6:17 PM
It's fun how "uses a proper frontend framework with components" (e.g. Patternfly, Bootstrap etc.) has turned from "low-effort frontend" to "at least it's probably not vibe-coded because LLMs don't choose anything but Tailwind/no components at all" in my brain
We have a small bit of secret sauce, a DSL called WCCSS (Web Component CSS). For a component-oriented design system like Patternfly, Spectrum, or Ant, you can record HOW you would transform a component's CSS into one appropriate for `:host`-based stylesheets, and then run it.
October 8, 2025 at 11:02 PM
We have a small bit of secret sauce, a DSL called WCCSS (Web Component CSS). For a component-oriented design system like Patternfly, Spectrum, or Ant, you can record HOW you would transform a component's CSS into one appropriate for `:host`-based stylesheets, and then run it.
We jokingly refer to BEMP when looking at some of the larger design systems for components, like Adobe Spectrum or IBM Patternfly: Block, Element, Modifier, Property.
Had to modify the Stylelint default rule for CSS Custom Property names to support underscores and CamelCase to make the distinction.
Had to modify the Stylelint default rule for CSS Custom Property names to support underscores and CamelCase to make the distinction.
December 4, 2025 at 5:19 PM
We jokingly refer to BEMP when looking at some of the larger design systems for components, like Adobe Spectrum or IBM Patternfly: Block, Element, Modifier, Property.
Had to modify the Stylelint default rule for CSS Custom Property names to support underscores and CamelCase to make the distinction.
Had to modify the Stylelint default rule for CSS Custom Property names to support underscores and CamelCase to make the distinction.
We're hoping that customizing these DSL language files will be quicker and more reliable for our upgrade, and so far it's working well. (We have more Patternfly 5 components than Patternfly-Elements has for P4!) But our ultimate goal is to take our CSS in house, forking P5.
October 8, 2025 at 11:02 PM
We're hoping that customizing these DSL language files will be quicker and more reliable for our upgrade, and so far it's working well. (We have more Patternfly 5 components than Patternfly-Elements has for P4!) But our ultimate goal is to take our CSS in house, forking P5.
I am really disappointed in Patternfly web components right now. Their slotController component's documentation is a bag of LIES. "hasSlotted() returns true if any of the names provided exist in the lightDOM" is a LIE. It returns that it exists in the lightDOM AND has a corresponding shadow slot.
August 23, 2025 at 3:33 PM
I am really disappointed in Patternfly web components right now. Their slotController component's documentation is a bag of LIES. "hasSlotted() returns true if any of the names provided exist in the lightDOM" is a LIE. It returns that it exists in the lightDOM AND has a corresponding shadow slot.
It doesn't help that at one point, I caught it cribbing out of a well-known (well, well-known to me) codebase. I didn't ask it to add handling vertical writing systems to the component I was hacking, and it did anyway. The code was 100% copied from patternfly-elements.
March 28, 2025 at 11:58 PM
It doesn't help that at one point, I caught it cribbing out of a well-known (well, well-known to me) codebase. I didn't ask it to add handling vertical writing systems to the component I was hacking, and it did anyway. The code was 100% copied from patternfly-elements.
The Sass source code makes it look more reasonable, but it still comes out to 385 lines of CSS when produced:
github.com/patternfly/p...
github.com/patternfly/p...
github.com
March 28, 2025 at 7:36 PM
The Sass source code makes it look more reasonable, but it still comes out to 385 lines of CSS when produced:
github.com/patternfly/p...
github.com/patternfly/p...
Good grief, IBM has THREE separate web component design systems: Carbon, Red Hat, and Patternfly.
June 22, 2024 at 3:24 AM
Good grief, IBM has THREE separate web component design systems: Carbon, Red Hat, and Patternfly.
Even more bafflingly, when the issue is brought up they decided to rename the entire component recently to severity instead. XD github.com/patternfly/r...
August 17, 2025 at 6:11 AM
Even more bafflingly, when the issue is brought up they decided to rename the entire component recently to severity instead. XD github.com/patternfly/r...
I do! Current front-end engineer at authentik Security, Inc, an open-source/open-core Single Sign On and Identity provider. Our front end is written entirely in Lit with Patternfly as our design system. github.com/goauthentik/...
authentik/web at main · goauthentik/authentik
The authentication glue you need. Contribute to goauthentik/authentik development by creating an account on GitHub.
github.com
November 11, 2024 at 6:00 PM
I do! Current front-end engineer at authentik Security, Inc, an open-source/open-core Single Sign On and Identity provider. Our front end is written entirely in Lit with Patternfly as our design system. github.com/goauthentik/...
I've been struggling with CSS again, and since we're neck-deep into Patternfly at work, I've been thinking about how to make it all work. I can literally FEEL this idea slithering around in the ocean of my brain, but it won't quite come to the surface.
April 2, 2025 at 10:10 PM
I've been struggling with CSS again, and since we're neck-deep into Patternfly at work, I've been thinking about how to make it all work. I can literally FEEL this idea slithering around in the ocean of my brain, but it won't quite come to the surface.
Authentik Elements UI is now public! github.com/goauthentik/...
We have 16 public elements and are groping through the dark to have many more. Authentik Elements is a Patternfly-5 based web component library that supports the authentik SSO server and related projects, and we plan on lots more.
We have 16 public elements and are groping through the dark to have many more. Authentik Elements is a Patternfly-5 based web component library that supports the authentik SSO server and related projects, and we plan on lots more.
github.com
December 4, 2025 at 2:57 AM
Authentik Elements UI is now public! github.com/goauthentik/...
We have 16 public elements and are groping through the dark to have many more. Authentik Elements is a Patternfly-5 based web component library that supports the authentik SSO server and related projects, and we plan on lots more.
We have 16 public elements and are groping through the dark to have many more. Authentik Elements is a Patternfly-5 based web component library that supports the authentik SSO server and related projects, and we plan on lots more.
I’m on the lookout for a CSS library or framework that can stand on its own, not relying on React/Web Components.
I’ve tried #Bootstrap, #Tailwind, #PatternFly, and #Shoelace, but I’m on the hunt for something more modern and cutting-edge.
Any suggestions from out in the Bluesky world?
I’ve tried #Bootstrap, #Tailwind, #PatternFly, and #Shoelace, but I’m on the hunt for something more modern and cutting-edge.
Any suggestions from out in the Bluesky world?
November 21, 2024 at 2:48 PM
I’m on the lookout for a CSS library or framework that can stand on its own, not relying on React/Web Components.
I’ve tried #Bootstrap, #Tailwind, #PatternFly, and #Shoelace, but I’m on the hunt for something more modern and cutting-edge.
Any suggestions from out in the Bluesky world?
I’ve tried #Bootstrap, #Tailwind, #PatternFly, and #Shoelace, but I’m on the hunt for something more modern and cutting-edge.
Any suggestions from out in the Bluesky world?
You know you're too heavily invested in PLT (Programming Language Theory) when your *first* thought is, "If I could find a source-to-AST parser for Handlebars, I could write a little program that would automatically convert the Patternfly HTML templates into Web Components."
October 6, 2023 at 4:17 AM
You know you're too heavily invested in PLT (Programming Language Theory) when your *first* thought is, "If I could find a source-to-AST parser for Handlebars, I could write a little program that would automatically convert the Patternfly HTML templates into Web Components."
So Red Hat uses Web Components for our design system, and I think the most brilliant use-case for WC is our Timestamp element which is essentially the built-in internationalization of time
ux.redhat.com/elements/tim...
ux.redhat.com/elements/tim...
Red Hat design system
This is Red Hat's design system. Using Red Hat brand standards and PatternFly as our foundational design language, we enable designers and developers to concurrently build branded experiences across r...
ux.redhat.com
January 7, 2025 at 10:17 PM
So Red Hat uses Web Components for our design system, and I think the most brilliant use-case for WC is our Timestamp element which is essentially the built-in internationalization of time
ux.redhat.com/elements/tim...
ux.redhat.com/elements/tim...