@calebporzio.bsky.social
December 23, 2024 at 4:36 PM
December 17, 2024 at 3:20 PM
Of course you can choose your own gray. Zinc's not for everyone lol. We even baked our gray preferences into the theme builder on the site
December 17, 2024 at 3:20 PM
Of course you can choose your own gray. Zinc's not for everyone lol. We even baked our gray preferences into the theme builder on the site
Of course, it's fully dark moded - and we went the extra mile to make light and dark "feel" the same. This means dropping colors in dark sometimes and changing borders in ways that are unintuitive, but feel "right".
December 17, 2024 at 3:20 PM
Of course, it's fully dark moded - and we went the extra mile to make light and dark "feel" the same. This means dropping colors in dark sometimes and changing borders in ways that are unintuitive, but feel "right".
Speaking of bright and vibrant colors, we're using the entire Tailwind 4 color palette in Flux so that we get those juicy wide gamut colors.
Look at the difference!
Look at the difference!
December 17, 2024 at 3:20 PM
Speaking of bright and vibrant colors, we're using the entire Tailwind 4 color palette in Flux so that we get those juicy wide gamut colors.
Look at the difference!
Look at the difference!
We hand-picked every hue for every color theme.
We made sure that borders and foreground colors are accessible and contrasty enough so we can get away with super bright and vibrant colors
We made sure that borders and foreground colors are accessible and contrasty enough so we can get away with super bright and vibrant colors
December 17, 2024 at 3:20 PM
We hand-picked every hue for every color theme.
We made sure that borders and foreground colors are accessible and contrasty enough so we can get away with super bright and vibrant colors
We made sure that borders and foreground colors are accessible and contrasty enough so we can get away with super bright and vibrant colors
It's been a wild learning journey for me.
Most of it boils down to this lol:
You need a gray color, and a single accent color, and three different hues of that accent color:
- base
- foreground
- content
Most of it boils down to this lol:
You need a gray color, and a single accent color, and three different hues of that accent color:
- base
- foreground
- content
December 17, 2024 at 3:20 PM
It's been a wild learning journey for me.
Most of it boils down to this lol:
You need a gray color, and a single accent color, and three different hues of that accent color:
- base
- foreground
- content
Most of it boils down to this lol:
You need a gray color, and a single accent color, and three different hues of that accent color:
- base
- foreground
- content
December 17, 2024 at 3:20 PM
Oh totally, that's be sweet.
in case you needed permission - you can use any amount of this as inspiration for your own stuff.
Here's what switching colors does: changes a few CSS variables.
If you aren't using them already (which you probably are) this makes it pretty easy to hot-swap colors
in case you needed permission - you can use any amount of this as inspiration for your own stuff.
Here's what switching colors does: changes a few CSS variables.
If you aren't using them already (which you probably are) this makes it pretty easy to hot-swap colors
December 16, 2024 at 7:46 PM
Oh totally, that's be sweet.
in case you needed permission - you can use any amount of this as inspiration for your own stuff.
Here's what switching colors does: changes a few CSS variables.
If you aren't using them already (which you probably are) this makes it pretty easy to hot-swap colors
in case you needed permission - you can use any amount of this as inspiration for your own stuff.
Here's what switching colors does: changes a few CSS variables.
If you aren't using them already (which you probably are) this makes it pretty easy to hot-swap colors
👀 Dropping tomorrow
December 16, 2024 at 1:51 PM
👀 Dropping tomorrow
Here's the code for ya!
December 12, 2024 at 5:43 PM
Here's the code for ya!
The sickest part is that you control dark mode now from these nifty little reactive bits:
c'mon, how sick is that. You don't even have to think about all that local storage/media/non-media preference/.dark class toggling crap
c'mon, how sick is that. You don't even have to think about all that local storage/media/non-media preference/.dark class toggling crap
December 12, 2024 at 5:25 PM
The sickest part is that you control dark mode now from these nifty little reactive bits:
c'mon, how sick is that. You don't even have to think about all that local storage/media/non-media preference/.dark class toggling crap
c'mon, how sick is that. You don't even have to think about all that local storage/media/non-media preference/.dark class toggling crap
Had to take a detour down dark mode lane in order to make more progress on theming in Flux.
Decided to bake a bunch of dark mode javascript controlly stuff right into Flux
Dig this post: fluxui.dev/blog/2024-12...
Decided to bake a bunch of dark mode javascript controlly stuff right into Flux
Dig this post: fluxui.dev/blog/2024-12...
December 12, 2024 at 5:20 PM
Had to take a detour down dark mode lane in order to make more progress on theming in Flux.
Decided to bake a bunch of dark mode javascript controlly stuff right into Flux
Dig this post: fluxui.dev/blog/2024-12...
Decided to bake a bunch of dark mode javascript controlly stuff right into Flux
Dig this post: fluxui.dev/blog/2024-12...
Chiggidy check it:
New Livewire directive I cooked up this morning: wire:current
Super clean way to slap some Tailwind on a link that matches the current URL
(works with wire:navigate and @ persist and what not obv)
Dig it: livewire.laravel.com/docs/wire-cu...
New Livewire directive I cooked up this morning: wire:current
Super clean way to slap some Tailwind on a link that matches the current URL
(works with wire:navigate and @ persist and what not obv)
Dig it: livewire.laravel.com/docs/wire-cu...
November 27, 2024 at 5:38 PM
Chiggidy check it:
New Livewire directive I cooked up this morning: wire:current
Super clean way to slap some Tailwind on a link that matches the current URL
(works with wire:navigate and @ persist and what not obv)
Dig it: livewire.laravel.com/docs/wire-cu...
New Livewire directive I cooked up this morning: wire:current
Super clean way to slap some Tailwind on a link that matches the current URL
(works with wire:navigate and @ persist and what not obv)
Dig it: livewire.laravel.com/docs/wire-cu...
Just shipped my first rich text editor.
I'm super proud of it.
Even if you don't use Flux, taking a peak at the blog post I just wrote up is worth your time: fluxui.dev/blog/2024-11...
I'm super proud of it.
Even if you don't use Flux, taking a peak at the blog post I just wrote up is worth your time: fluxui.dev/blog/2024-11...
November 25, 2024 at 4:18 PM
Just shipped my first rich text editor.
I'm super proud of it.
Even if you don't use Flux, taking a peak at the blog post I just wrote up is worth your time: fluxui.dev/blog/2024-11...
I'm super proud of it.
Even if you don't use Flux, taking a peak at the blog post I just wrote up is worth your time: fluxui.dev/blog/2024-11...
Multi-selects just dropped in Flux!
Been a long time coming on this one. Building a good searchable multi-select is...well...not easy lol
Dig it in a fancy lil blog post I slapped up: fluxui.dev/blog/2024-11...
Been a long time coming on this one. Building a good searchable multi-select is...well...not easy lol
Dig it in a fancy lil blog post I slapped up: fluxui.dev/blog/2024-11...
November 13, 2024 at 1:27 PM
Multi-selects just dropped in Flux!
Been a long time coming on this one. Building a good searchable multi-select is...well...not easy lol
Dig it in a fancy lil blog post I slapped up: fluxui.dev/blog/2024-11...
Been a long time coming on this one. Building a good searchable multi-select is...well...not easy lol
Dig it in a fancy lil blog post I slapped up: fluxui.dev/blog/2024-11...
Also, when I was writing up the new "custom icons" docs, I wanted to demo a non-Lucide custom icon and spent way too much time making the perfect Livewire icon lol
November 5, 2024 at 12:30 PM
Also, when I was writing up the new "custom icons" docs, I wanted to demo a non-Lucide custom icon and spent way too much time making the perfect Livewire icon lol
Brother @ianlandsman.com wanted a few icons in Flux that weren't in Heroicons so I added a new command: flux:icon
It grabs the SVGs from Lucide and wraps up in a nice lil' Blade component in your project. Flux will now recognize it anywhere you use icons.
Dig: fluxui.dev/components/i...
It grabs the SVGs from Lucide and wraps up in a nice lil' Blade component in your project. Flux will now recognize it anywhere you use icons.
Dig: fluxui.dev/components/i...
November 5, 2024 at 12:29 PM
Brother @ianlandsman.com wanted a few icons in Flux that weren't in Heroicons so I added a new command: flux:icon
It grabs the SVGs from Lucide and wraps up in a nice lil' Blade component in your project. Flux will now recognize it anywhere you use icons.
Dig: fluxui.dev/components/i...
It grabs the SVGs from Lucide and wraps up in a nice lil' Blade component in your project. Flux will now recognize it anywhere you use icons.
Dig: fluxui.dev/components/i...
Here's the "input/button groups" test page. Stuff like this is super helpful when customizing flux to just see everything and make sure you didn't ef up something else random
November 1, 2024 at 4:32 PM
Here's the "input/button groups" test page. Stuff like this is super helpful when customizing flux to just see everything and make sure you didn't ef up something else random
I'm always amazed how even the smallest things are rabbit holes.
Also, TIL, there's a :placeholder-shown pseudo selector in CSS that's super useful for things like hiding an "x" button when an input is empty 💅🧑💻
Also, TIL, there's a :placeholder-shown pseudo selector in CSS that's super useful for things like hiding an "x" button when an input is empty 💅🧑💻
November 1, 2024 at 3:41 PM
I'm always amazed how even the smallest things are rabbit holes.
Also, TIL, there's a :placeholder-shown pseudo selector in CSS that's super useful for things like hiding an "x" button when an input is empty 💅🧑💻
Also, TIL, there's a :placeholder-shown pseudo selector in CSS that's super useful for things like hiding an "x" button when an input is empty 💅🧑💻
Tackled clearable inputs in Flux today
Tried to mimic native ones as best as possible
- focusable but not tabbable
- re-focus input after click
- only show when field is non-empty
- big enough pointer target for mobile
- consistent styling across input fields, listboxes, and command palettes
Tried to mimic native ones as best as possible
- focusable but not tabbable
- re-focus input after click
- only show when field is non-empty
- big enough pointer target for mobile
- consistent styling across input fields, listboxes, and command palettes
November 1, 2024 at 3:38 PM
Tackled clearable inputs in Flux today
Tried to mimic native ones as best as possible
- focusable but not tabbable
- re-focus input after click
- only show when field is non-empty
- big enough pointer target for mobile
- consistent styling across input fields, listboxes, and command palettes
Tried to mimic native ones as best as possible
- focusable but not tabbable
- re-focus input after click
- only show when field is non-empty
- big enough pointer target for mobile
- consistent styling across input fields, listboxes, and command palettes
Maybe "Tall AF" lol
Tailwind
Alpine
Laravel
Livewire
and Flux
Tailwind
Alpine
Laravel
Livewire
and Flux
October 31, 2024 at 6:49 PM
Maybe "Tall AF" lol
Tailwind
Alpine
Laravel
Livewire
and Flux
Tailwind
Alpine
Laravel
Livewire
and Flux
I finally cracked a good API for fully customizable radio/checkbox cards in Flux
fluxui.dev/blog/2024-10...
fluxui.dev/blog/2024-10...
October 31, 2024 at 3:03 PM
I finally cracked a good API for fully customizable radio/checkbox cards in Flux
fluxui.dev/blog/2024-10...
fluxui.dev/blog/2024-10...