@havardbrynjulfsen.design.bsky.social
Designer who codes (or vice-versa)🦄
Yes!! Amazing
01.11.2025 10:16 — 👍 0 🔁 0 💬 0 📌 0Somebody added overflow: hidden 🥲
30.10.2025 08:26 — 👍 2 🔁 0 💬 0 📌 0[class~="foo" i] then 😈
26.07.2025 19:45 — 👍 1 🔁 0 💬 0 📌 0just write your class selectors with attribute selectors instead, like this [class="foo" i]
Works for foo, FOO and fOo
Easy-peasy 🤷♂️
A dialog whose title reads, "Go touch glass." Below that is instructional copy that reads, "Add glass to any frame and play with frost, light, depth, and more. Use the effect creatively in your work, or grab the iOS and iPadOS 26 kit from Apple's Community page." There are then two calls to action, one to "Explore playground" and the other "Go to UI kit". Next to the text copy is a video of how to add the effect, where a barely-visible toolbar with three buttons is getting added on top of a smartphone wallpaper showing a field of flowers. Cropped screenshot from Figma.
Here's a great example of how inaccessibility manifests even earlier than the design stage. Figma has rolled out a tool to create iOS-style glassomorphic effects, embedding it directly into the tooling layer. This will be awful for legibility and readability for a wide range of people.
18.07.2025 19:01 — 👍 23 🔁 6 💬 2 📌 0liquid glass more like liquid ass ammirite
17.06.2025 05:59 — 👍 1 🔁 0 💬 0 📌 0
Did a quick write-up of my experience at this year's #CSSDay
"...I have a feeling that we're soon coming to close on the old responsive way of thinking about websites that have existed for 15 years..."
www.havardbrynjulfsen.design/writing/my-k...
Aah, I see! Sweet, I’ll check it out 🫡
09.06.2025 14:48 — 👍 1 🔁 0 💬 0 📌 0Neat!
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
A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom.
A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links in large letters saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom. Below the vertical list there's a row of icons, each representing a social medium or website in this order: "Codepen", "Bluesky", "Mastodon", "Medium", "Sanity", "Github" and "RSS".
Did a quick little touch-up of the header navigation on my website (before/after) 💅
08.06.2025 14:06 — 👍 1 🔁 0 💬 0 📌 0Your was truly inspirational!
One of my favorites this year, thank you 👏
Conference badge with the name «Håvard Brynjulfsen» written on it beneath the logo for «CSSDay» — the name of the conference.
.beer:empty { order: 1; }
Important memo for the Drinks & Discussions session later at #CSSDay today
@cssday.nl tomorrow!
The line-up is incredible😍
Haha, thanks!
25.05.2025 07:50 — 👍 2 🔁 0 💬 0 📌 0
Reflecting on writing for the web and how @kevinpowell.co stopped me from writing (well, not really)
www.havardbrynjulfsen.design/writing/thou...
Screenshot of a Figma sketch displaying step-by-step tracking of an order, as a vertical timeline. The timeline is visualized by a line, much like train tracks, with stops along marked with a circle. In the middle of the timeline track the track curves inward before curving outwards again to rejoin the original track.
I love that even in a world of LLMs and IDE AI helpers I can still search for something on Google and find an old CSS-Tricks article that solves my problem😍
I was trying to create a timeline with curved lines, and this screencast by @chriscoyier.net saved me🤌
css-tricks.com/videos/172-h...
YES
30.01.2025 18:14 — 👍 1 🔁 0 💬 0 📌 0
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
I’m seeing some big names here👀
29.01.2025 11:46 — 👍 0 🔁 0 💬 0 📌 0Neither 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.
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?
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…
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»
«From» is absolutely bonkers
19.01.2025 23:40 — 👍 1 🔁 0 💬 0 📌 0
Screeenshot of a notification that says «CodePen picker your pen HaGrid», next to an image of the fictional Harry Potter-character «Hagrid» trapped inside a 4-by-4 grid.
I’ve never been prouder 🥹
19.01.2025 09:01 — 👍 2 🔁 0 💬 0 📌 0So nice to see City and Colour here 🙌🏻
17.01.2025 05:14 — 👍 0 🔁 0 💬 0 📌 0This is basically Astro Bot
15.01.2025 10:03 — 👍 0 🔁 0 💬 0 📌 0
I also immediately thought of that article🙌🏻
Just gonna piggy-back on this to share another that tackles the same theme, by @bradfrost.com:
bradfrost.com/blog/post/fr...
First post of the year 🎉
A quick tip about the <dl> element
www.havardbrynjulfsen.design/writing/tips...
