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: debuggingcss.com
Pinned Tweet
37
188
836
Follow
Click to Follow shadeed9
Ahmad Shadeed
@shadeed9
Design Engineer. Author of debuggingcss.com • Writing on ishadeed.com. Made defensivecss.dev, rtlstyling.com, and a11ymatters.com.
Ahmad Shadeed’s Tweets
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: ishadeed.com/article/respon
5
30
184
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.
6
28
read image description
ALT
3
9
Look at this wrap icon. Auto layout wrapping is coming to Figma? Maybe.
Quote Tweet
#Figma is working on ADVANCED SIZING which allows you to set min/max width and height for the auto layout!
1
2
A nice "Pop out" hover effect featuring some CSS masters 😎 ( )
Demo: codepen.io/t_afif/full/zY via
Want to know the secret behind?
Read my new article 👉 css-tricks.com/a-fancy-hover-
Share a demo with your own avatar 👇
#CSS
0:05
8.2K views
Quote Tweet
0:05
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: codepen.io/t_afif/full/MW via @CodePen
#CSS5
27
268
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: ishadeed.com/article/respon
5
30
184
In case you missed it, I wrote a deep-dive about responsive web design 👇
🔗 ishadeed.com/article/respon
Quote Tweet
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.
ishadeed.com/article/respon
1
4
33
✍️ 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.
🔗 ishadeed.com/article/respon
5
132
490
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. 🤩
Quote Tweet
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.
Show this thread
1
5
I'm compiling a list of all the useful CSS generators for the clamp() function. First one is "Utopia".
Anything else I'm not aware of?
5
7
58
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 😆
2
30
It's one of those articles that overlook the current state of X in CSS. Who is up to give it a review when ready? 😄
2
3
Show this thread
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.
4
1
17
Show this thread
CSS nesting is intent to ship in Chrome, and is enabled in Safari Technology Preview.
Added a note to my articles backlog 👀
1
4
30
✍️ The CSS behind Figma
Discover how CSS flexbox and grid power its design. I wrote about all the interesting details that I found 🕵️♂️
🔗 ishadeed.com/article/figma-
1
11
80
Each time Figma is down I remember the good old days of Sketch.
1
1
14
Replaced auto-fill with auto-fit in the minmax() function for a grid layout that was causing one card to fill the whole space.
12
Show this thread
Let's play a game.
What's the recent design issue that you fixed with CSS?
I will start first. 👇
10
2
23
Show this thread
Got VisBug?
1️⃣ launch it
2️⃣ type “/skeleton” in the search bar
3️⃣ type “/placeholdifier” in the search bar
voila
read image description
ALT
read image description
ALT
read image description
ALT
8
13
87
Show this thread
I asked ChatGPT to write a poem about CSS container queries
read image description
ALT
5
8
78
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 🙏🚀
1
24
A big fan of using flexbox for components and grid for layouts.
Article: ishadeed.com/article/grid-l
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 🤩
7
81
422
"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, 💯
1
7
Show this thread
Thrilled to see my article "Conditional CSS" on the front page of Hacker News 🤩
The good news is that my website is still holding up!
5
3
83
I tried hard searching for it but without any luck..
1
Show this thread
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?
3
3
Show this thread
🔥 Container queries can be used to apply CSS conditionally, based on a CSS variable.
This is *incredibly* cool. 😮
Read more in 's wonderful article:
ishadeed.com/article/condit
read image description
ALT
4
61
415
Show this thread
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: ishadeed.com/article/condit
11
119
725
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 🤩
5
Show this thread
✍️ 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: ishadeed.com/article/in-bet
4
13
49
Show this thread
Conditional CSS by
ishadeed.com/article/condit
A great round-up of features including:
Media Queries
Container Queries
Flexbox wrapping
Grid auto-fill and auto-fit
fit-content
Adjacent siblings
:empty
:has
:focus-within
:not
min(), max(), and clamp()
1
5
20
GIF
read image description
ALT
Quote Tweet
I have a Tailwind CSS joke but the classes are too long to fit in a tweet
1
1
15
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?
Quote Tweet
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 
3
Show this thread
Container queries will be turned on by default in the stable Firefox soon 😍
Also, I like the title "Let size container queries ride the trains." 🌟🌟
Quote Tweet
Gecko: Intent to prototype and ship: Size container queries groups.google.com/a/mozilla.org/
3
7
32
Show this thread
I have a Tailwind CSS joke but the classes are too long to fit in a tweet
39
111
1,186
I love seeing container queries in action. Keep them coming!
Quote Tweet
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.
moji.blog/article/flexib
Show this thread
1
1
13
🌟 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!
🔗 ishadeed.com/article/condit
3
57
245
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: ishadeed.com/article/condit
1
5
47
🌟 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!
🔗 ishadeed.com/article/condit
3
57
245