Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.

For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I’m sure we agree that this is exciting, isn’t it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI. Such a thing can make the UI you’re working on feels unbalanced, or missing something. Here is what I mean: The highlighted word is a single word that lives on its line

In the design world, masking is a popular technique to achieve unique design effects. As a designer, I’ve used it many times, but my usage of it on the web is rare. I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox. The great news is that CSS masking will

Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I found this interesting and I thought about documenting the use-cases that I usually came through while working on front-end projects. In this article, I will explore a few use-cases that using absolute positioning

Two weeks ago, Sara Soueidan tweeted about the love of CSS Vertical Media Queries, I’ve remembered that I used them in some projects and so I decided to write an article about them. We all love media queries, don’t we? Without them our layouts won’t be responsive. Media queries that check for min-width and max-width are well-known and used a lot. In this article we will explore different use cases