The article discusses how to improve the CSS layout of the top news section on Time.com. It critiques the current layout for switching to a one-column format too early on mobile devices, leading to inefficient use of space. The au...
About:
Ahmad Shadeed is a CSS expert, designer, and author passionate about design and technology.
Website:
Specializations:
Interests:
Incoming Links:
Outgoing Links:
Subscribe to RSS:
The author reflects on being invited to speak at CSS Day Amsterdam, discussing the concept of 'Smart Layouts' which advocates for fluid CSS layouts that can make autonomous decisions. The talk emphasizes the underutilization of ad...
The article discusses how to create a responsive section layout using modern CSS techniques, including grid layout, container queries, and the :has() selector. It provides a step-by-step guide on building a section with a header a...
This article explains the concept of Anchor Positioning in CSS, detailing how to position elements relative to one another using the new anchor positioning API. It discusses the limitations of traditional positioning methods and p...
The post highlights the pitfalls of premature layout changes in responsive web design and advocates for more thoughtful design strategies.
The article discusses the CSS field-sizing property, which allows input fields to adjust their width based on the content. It highlights the problem this property solves, particularly in layout-focused designs, and provides exampl...
0Item Flow
2025-04-12 • web development css css flexbox item flow grid
The article discusses the new layout module called Item Flow, which aims to unify flex-flow and grid-auto-flow into a single system, integrating CSS masonry into the new syntax. It explores the benefits of Item Flow, such as minim...
The text introduces the modern attr() function in CSS, which allows for more flexibility in using attribute values in CSS. It explains how to use the function, provides examples of use cases, and discusses the benefits of using mo...
0Self Gap
2025-03-18 • web development css flexbox
The text discusses the problem of controlling the gap between elements when using flexbox or grid gap. It explores various options to adjust the spacing, including adjusting margins, wrapping elements in a new container, and using...
0CSS Relative Colors
2025-03-09 • web development lccc hls oklch
The article discusses the use of CSS relative colors to apply opacity to a pre-defined color, and how it works with practical examples. It also explores the syntax and use cases of relative colors, such as changing opacity, dynami...
0Balancing Text In CSS
2025-01-05 •
The text discusses the challenges of text balancing in web design and the use of CSS properties like text-wrap: balance and text-wrap: pretty to achieve balanced text. It provides examples and demos to illustrate the concept and i...
0Solved By Modern CSS: Feature Image
2024-12-10 •
The blog post discusses the use of modern CSS to create a feature image that adjusts based on the container size. It explores the use of container queries, conditional CSS with :has, and different layout options using CSS grid and...
0Overflow Clip
2024-11-12 •
The blog post discusses the overflow CSS property and its clip value, explaining how it can be used to enable vertical scrolling, clip content, and restrict clipping to one axis. It provides practical examples of using overflow: c...
0Should masonry be part of CSS grid?
2024-10-30 •
The article discusses whether masonry should be part of CSS grid or a separate layout module. It explains the debate on the syntax, the practical applications of masonry, and the examples of grid-integrated and grid-independent op...
0Redesign Case Study
2024-09-24 •
The blog post is about the author's redesign of his website, discussing the reasons for the redesign, the process, and the highlights of the new design. It also includes detailed information about the design process, including the...
0CSS display contents
2024-09-05 •
The blog post discusses the use of the CSS display: contents property to ungroup elements and manipulate layouts. It provides examples of how to use display: contents to solve various layout problems, such as styling generated HTM...
0CSS Grid Areas
2024-07-20 •
The blog post discusses the CSS grid template areas feature, explaining how it works and its benefits. It provides examples and use cases to demonstrate the power of template areas in simplifying the layout process and making it m...
0CSS Cap Unit
2024-06-05 •
The blog post discusses the problem of placing a box between two words and keeping it aligned, and the author's journey to find a solution using the cap unit in CSS. The post demonstrates different solutions and their limitations,...
0The Gap
2024-05-31 •
The blog post discusses the challenges of managing spacing on the web using CSS margin and the introduction of the gap property as a solution. It explains the limitations of using margins and the benefits of using the gap property...
0Handling The Indentation of a Treeview Component
2024-04-30 •
The blog post discusses the problem of building a UI with nested components and increasing indentation for each one, focusing on examples from GitHub, Figma, Adobe, and more. It explores how each platform solved the problem using ...
0An Interactive Guide to CSS Container Queries
2024-04-02 •
The blog post is an interactive guide to CSS container queries. It explains the problems they solve, how they work, and how to use them in workflows. It includes examples of how to use container queries for different components su...
0CSS :has() Interactive Guide
2024-02-24 •
The blog post discusses the use of the CSS :has() selector to style elements based on their descendants. It explores various use cases and examples of how to use the selector to solve common problems in CSS. The post also includes...
0Designing better target sizes
2024-01-10 •
The blog post discusses the importance of designing better target sizes for clickable UI elements, such as buttons, links, and cards. It explains the concept of target size, inclusive target size, minimum target size, and how to a...
0CSS Nesting UX in DevTools
2023-11-19 •
The article discusses the author's thoughts on the UX of CSS nesting in DevTools, highlighting the inconsistencies between browsers and proposing solutions to improve the user experience. The author explores different proposals, s...