I'm over the moon excited to release my "Debugging CSS" book! 🚀
A book about how to debug CSS, which includes everything you need to know to sharpen your debugging CSS skills.
📘 Get your copy: http://debuggingcss.com
The current state of responsive web design is very exciting! 🤩🤩
We can build fluid layouts by using the available space in grid, flex wrapping, fluid spacing /sizing, the clamp() function, and container queries.
Article: https://ishadeed.com/article/responsive-design/…
Even though I tried different web clients, I'm still not happy with Mastodon's UX. It just feels.. weird and hard to use.
I still have hope in Twitter.
CSS Tip!
Add a nice hover effect to your profile picture using a minimalist code
No extra element (only the <img> tag)
No pseudo-element
Less than 20 declarations
Optimized with CSS variables
Demo: http://codepen.io/t_afif/full/MWBjraa… via @CodePen#CSS
The current state of responsive web design is very exciting! 🤩🤩
We can build fluid layouts by using the available space in grid, flex wrapping, fluid spacing /sizing, the clamp() function, and container queries.
Article: https://ishadeed.com/article/responsive-design/…
The Guide To Responsive Design In 2023 and Beyond
In this deep-dive article, I shed the light on the CSS techniques we’ve today to build truly responsive components and layouts. It’s not only about media queries.
https://ishadeed.com/article/responsive-design/…
✍️ The Guide To Responsive Design In 2023 and Beyond
In this deep-dive article, I shed the light on the CSS techniques we’ve today to build truly responsive components and layouts. It’s not only about media queries.
🔗https://ishadeed.com/article/responsive-design/…
3771 words so far. I'm definitely adding the word "Guide" in the article title.
It's not possible to split into parts as it's a topic with connected ideas/thoughts.
So. Excited. 🤩
I was drafting an article and believed I was simply outlining the key ideas and thoughts. However, I ended up with 2200 words...
Since it isn't possible to split it, I will include a table of contents and label it as a guide rather than an article.
We'll see how it turns out.
Alma (2 yrs) jumped to my lap while on my desk and started typing on the keyboard.
Me: what are you doing?
Alma: I'm working.
If it could be that easy 😆
I was drafting an article and believed I was simply outlining the key ideas and thoughts. However, I ended up with 2200 words...
Since it isn't possible to split it, I will include a table of contents and label it as a guide rather than an article.
We'll see how it turns out.
✍️ The CSS behind Figma
Discover how CSS flexbox and grid power its design. I wrote about all the interesting details that I found 🕵️♂️🔗https://ishadeed.com/article/figma-css/…
The best part about writing an article to me is when I start enjoying the design process for the illustrations. I feel like a kid who is enjoying a new toy or something.
When I reach that moment, it’s a sign that the flow state of writing is there 🙏🚀
A big fan of using flexbox for components and grid for layouts.
Article: https://ishadeed.com/article/grid-layout-flexbox-components/…
Now that we have size container queries, this makes more sense. CSS grid items as containers, and flexbox component change their style based on the width of those items 🤩
"To me, CSS is like a superpower because it allows me to make so many design decisions through its conditional features. Working with design tools can sometimes feel limiting because I feel like I’m constrained within certain walls."
I feel you,
There was a popular illustration has two different website designs and asks: "Which website are you designing right now?" It made fun of using a hero section followed by a 3-featured section kind of thing.
Anyone can remember the illustration?
CSS :has is the closest thing to a conditional statement in CSS.
In this example, if the card has an image, use flexbox. If not, add a border-top.
Conditional CSS: https://ishadeed.com/article/conditional-css/…
This article is 2.5 years old, and I can see that the obvious solution for some of the examples is size container queries. CSS is becoming better everyday 🤩
✍️ Thinking About The In-between Design Cases
The in-between design cases are often forgotten when writing CSS. The items in this layout become too wide when viewed with a breakpoint between the mobile and tablet sizes.
Read more: https://ishadeed.com/article/in-between/…
A good reminder that mentioning "container queries" isn't enough now, we need to specify either "size" or "style", and maybe something else soon, who knows?
When discussing CSS container queries nowadays, we need to specify whether it's a size query or a style query. I like that!
CSS is growing very quickly
Gecko: Intent to prototype and ship: Size container queries https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/456adb0e-2c23-8fa8-ea58-dee64d81aa75%40mozilla.com…
Container Queries are exceptionally helpful when building dashboards. Especially when they are user configurable.
Here we use the same component in two different places with different column-span. They show us information in different formats.
https://moji.blog/article/flexible-components-with-container-queries…
🌟 New: Conditional CSS
I wrote about my thoughts on why I think CSS is conditional in many ways, and how I enjoy writing CSS with that mindset. Happy reading!
🔗https://ishadeed.com/article/conditional-css/…
An example on why I consider CSS a conditional design language.
A list of tags with flexbox:
✅ if RTL? flip the direction.
✅ if no space? wrap into lines.
✅ If wrapped? gap works for cols and rows.
Read more about Conditional CSS: https://ishadeed.com/article/conditional-css/…
🌟 New: Conditional CSS
I wrote about my thoughts on why I think CSS is conditional in many ways, and how I enjoy writing CSS with that mindset. Happy reading!
🔗https://ishadeed.com/article/conditional-css/…