Best of UI Design — August 2025
- 1
- 2
Ahmad Shadeed·39w
Better CSS layouts: Time.com Hero Section
A detailed analysis of Time.com's hero section layout, demonstrating how to rebuild it using modern CSS techniques. The article covers CSS Grid, container queries, the :has() selector, and grid areas to create flexible, responsive layouts that adapt based on content and viewport size. Key techniques include using display: contents for dynamic grouping, query units for fluid typography, and conditional layouts that respond to the number of articles.
- 3
Telerik·39w
Common Tailwind CSS Patterns
Covers essential Tailwind CSS patterns for creating and positioning elements including cards, flexbox layouts, grid systems, spacing techniques, and fixed positioning for navigation bars. Demonstrates how to use utility classes for alignment, responsive design with breakpoint prefixes, and element ordering across different screen sizes.
- 4
Lobsters·38wsabrinas.space -
A data scientist analyzed 2,671 website screenshots from popular sites across different countries using AI and machine learning to investigate whether Japanese web design is truly more maximalist than other regions. The study used ResNet models and t-SNE visualization to cluster websites by visual similarity, confirming that Japanese sites tend to favor lighter colors and denser layouts. The research explores three potential causes: writing system constraints (CJK characters), cultural differences, and Japan's unique technology adoption patterns, particularly their separate smartphone evolution that bypassed the iPhone-driven minimalism trend that influenced Western web design.
- 5
Collections·37wIntroducing Material 3 Expressive: A Comprehensive Design System for Wear OS
Google launched Material 3 Expressive, a new design system specifically built for Wear OS that optimizes user interfaces for round screens and battery-sensitive devices. The system features edge-hugging buttons, TransformingLazyColumn for smooth scrolling, 3-slot tile layouts, dynamic color palettes, variable fonts, and shape morphing animations. Developers get access to Figma design kits and code examples to build engaging, brand-expressive wearable applications with intuitive swipe gestures and quick information access.
- 6
CSS-Tricks·37w
A Radio Button Shopping Cart Trick
A CSS-only technique for animating items into a shopping cart using radio button pairs that toggle states to trigger smooth transitions. Each product contains two radio inputs with the same name attribute, creating a see-saw effect when clicked. When selected, items shrink and move to the cart position using CSS transforms and transitions. The approach includes JavaScript for counting items and discusses accessibility limitations due to duplicate interactive elements. The author suggests modern alternatives like the View Transitions API for better implementation.
- 7
Una Kravets·39w
5 Useful CSS functions using the new @function rule
CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns computed values. The article demonstrates five practical examples: a negation function for inverting values, an opacity function for creating transparent color variants, a fluid typography function that scales text responsively, a conditional border radius function that removes rounded corners near viewport edges, and a layout sidebar function for responsive grid layouts. These functions make CSS more organized and dynamic, similar to utility functions in JavaScript, and represent a significant step toward more powerful CSS capabilities with upcoming @mixin and @apply rules.
- 8Lobsters·39w
missing.css
missing.css version 1.2.0 introduces toggle buttons with ARIA switch roles, print annotations for abbreviations and links, new grid modifiers for print layouts, extensive customization variables for borders and shadows, layout utilities, color scheme support via meta tags, scrollbar theming, progress and meter element styling, improved flexbox classes, Lucide icon integration, breadcrumb enhancements, button colorways, select element improvements, and various bug fixes while deprecating several older classes and variables.
- 9
Horde·39w
Create Your Retro 8-Bit Profile Card with 8bitcn! 🎮
8bitcn launched a new profile card creator that lets users generate retro 8-bit style profile cards. Users can customize their cards with personal information and images, choose from multiple retro themes, download the results as images, and copy the code via Shadcn registry for integration into their projects.
- 10
Very Good Ventures·37w
A New Era for App Design (and What it Means for Flutter)
Flutter is decoupling Material and Cupertino UI libraries from its core SDK, moving them to independent packages on pub.dev. This change enables faster updates for UI components, gives developers more flexibility in choosing design systems, and creates equal opportunities for third-party UI libraries. The move positions Flutter as a more modular framework that can adapt to new design trends like Apple's Liquid Glass and Google's Material 3 Expressive without being constrained by SDK release cycles.
- 11
Smart Layouts (CSS Day - 06.06.2025) - Video & Slides
Ahmad Shadeed presented at CSS Day 2025 about "Smart Layouts" - CSS layouts that make intelligent decisions autonomously using modern features like clamp, :has selector, and container queries. The talk introduces the concept of Layout Zones where components adapt based on their container's constraints and conditions. Shadeed emphasizes that many developers underutilize well-supported CSS features, despite CSS becoming powerful enough to create designs natively in browsers that previously required design tools. The presentation includes real-world examples and is available with slides and video resources.
