Håvard Bob
@havardbrynjulfsen.design
Designer who codes (or vice-versa)🦄
Nice!
Just for the record, as stated in the pen details, this is a recreation of a design I found on Dribbble by Sulton Handaya. The original Dribbble link is broken, so the shot is probably removed since then, but you can browse other designs made by them here: dribbble.com/search/Sulto...
Just for the record, as stated in the pen details, this is a recreation of a design I found on Dribbble by Sulton Handaya. The original Dribbble link is broken, so the shot is probably removed since then, but you can browse other designs made by them here: dribbble.com/search/Sulto...
dribbble.com
November 11, 2025 at 11:39 AM
Nice!
Just for the record, as stated in the pen details, this is a recreation of a design I found on Dribbble by Sulton Handaya. The original Dribbble link is broken, so the shot is probably removed since then, but you can browse other designs made by them here: dribbble.com/search/Sulto...
Just for the record, as stated in the pen details, this is a recreation of a design I found on Dribbble by Sulton Handaya. The original Dribbble link is broken, so the shot is probably removed since then, but you can browse other designs made by them here: dribbble.com/search/Sulto...
liquid glass more like liquid ass ammirite
November 4, 2025 at 6:03 PM
[class~="foo" i] then 😈
July 26, 2025 at 7:45 PM
[class~="foo" i] then 😈
just write your class selectors with attribute selectors instead, like this [class="foo" i]
Works for foo, FOO and fOo
Easy-peasy 🤷♂️
Works for foo, FOO and fOo
Easy-peasy 🤷♂️
July 26, 2025 at 3:27 PM
just write your class selectors with attribute selectors instead, like this [class="foo" i]
Works for foo, FOO and fOo
Easy-peasy 🤷♂️
Works for foo, FOO and fOo
Easy-peasy 🤷♂️
Aah, I see! Sweet, I’ll check it out 🫡
June 9, 2025 at 2:48 PM
Aah, I see! Sweet, I’ll check it out 🫡
Neat!
By the way: I see that you write all the styles in .css-files, and that it all ends up in a single <style> tag in the <head>, correct? How do you do that?
I want to move away from SASS, but I'm so used to splitting my code intro several files and importing them
By the way: I see that you write all the styles in .css-files, and that it all ends up in a single <style> tag in the <head>, correct? How do you do that?
I want to move away from SASS, but I'm so used to splitting my code intro several files and importing them
June 9, 2025 at 1:43 PM
Neat!
By the way: I see that you write all the styles in .css-files, and that it all ends up in a single <style> tag in the <head>, correct? How do you do that?
I want to move away from SASS, but I'm so used to splitting my code intro several files and importing them
By the way: I see that you write all the styles in .css-files, and that it all ends up in a single <style> tag in the <head>, correct? How do you do that?
I want to move away from SASS, but I'm so used to splitting my code intro several files and importing them
Your was truly inspirational!
One of my favorites this year, thank you 👏
One of my favorites this year, thank you 👏
June 8, 2025 at 9:38 AM
Your was truly inspirational!
One of my favorites this year, thank you 👏
One of my favorites this year, thank you 👏
I’m seeing some big names here👀
January 29, 2025 at 11:46 AM
I’m seeing some big names here👀
Neither have I. I’ve used this technique only a bit, but it seems to work well for things in grids, making each component’s container fill the column width and therefore being able to query it.
I guess it could be nice for widgets in a user-customizable dashboard that has drag-n-drop functionality.
I guess it could be nice for widgets in a user-customizable dashboard that has drag-n-drop functionality.
January 28, 2025 at 10:33 PM
Neither have I. I’ve used this technique only a bit, but it seems to work well for things in grids, making each component’s container fill the column width and therefore being able to query it.
I guess it could be nice for widgets in a user-customizable dashboard that has drag-n-drop functionality.
I guess it could be nice for widgets in a user-customizable dashboard that has drag-n-drop functionality.
adapt to any surrounding. In your example the metadata could be a component with its own container, letting you query only that, and not having to rely on its (possibly) unknown parents (.metadata-col, main or section) to be declared as a containers
Is there any drawbacks to an approach like this?
Is there any drawbacks to an approach like this?
January 28, 2025 at 6:48 PM
adapt to any surrounding. In your example the metadata could be a component with its own container, letting you query only that, and not having to rely on its (possibly) unknown parents (.metadata-col, main or section) to be declared as a containers
Is there any drawbacks to an approach like this?
Is there any drawbacks to an approach like this?
I’ve dabbled with the idea of creating self-aware components (didn’t know what else to name them), that can react to its own container queries.
A container can’t query itself, but if you wrap a component in an outer layer and declare this as a container, you’ll have self-aware components that can…
A container can’t query itself, but if you wrap a component in an outer layer and declare this as a container, you’ll have self-aware components that can…
January 28, 2025 at 6:48 PM
I’ve dabbled with the idea of creating self-aware components (didn’t know what else to name them), that can react to its own container queries.
A container can’t query itself, but if you wrap a component in an outer layer and declare this as a container, you’ll have self-aware components that can…
A container can’t query itself, but if you wrap a component in an outer layer and declare this as a container, you’ll have self-aware components that can…
Fantastic!
Such a great way to look at CSS: «let it fail gracefully»
Reminds me of a tweet (dont remember whose) about responsive web design. Was something along the lines of: «HTML documents are responsive by default, it’s up to you how much you want your CSS to mess with that starting point»
Such a great way to look at CSS: «let it fail gracefully»
Reminds me of a tweet (dont remember whose) about responsive web design. Was something along the lines of: «HTML documents are responsive by default, it’s up to you how much you want your CSS to mess with that starting point»
January 23, 2025 at 10:47 PM
Fantastic!
Such a great way to look at CSS: «let it fail gracefully»
Reminds me of a tweet (dont remember whose) about responsive web design. Was something along the lines of: «HTML documents are responsive by default, it’s up to you how much you want your CSS to mess with that starting point»
Such a great way to look at CSS: «let it fail gracefully»
Reminds me of a tweet (dont remember whose) about responsive web design. Was something along the lines of: «HTML documents are responsive by default, it’s up to you how much you want your CSS to mess with that starting point»