#Development #Guides
Building typographic scales in CSS · Get ready for :heading(), sibling-index(), and pow()! https://ilo.im/16apaw

_____
#ModernCSS #Scales #Typography #Layouts #DesignSystems #Design #WebDesign #WebDev #Frontend #CSS

#Development #Overviews
CSS layout fundamentals · Master the core concepts behind CSS layouts https://ilo.im/16a1ic

_____
#Layouts #Positioning #Stacking #CssGrid #CssFlexbox #BoxModel #Browsers #WebDev #Frontend #CSS

#Design #Examples
Values to stress-test interfaces · Break your interface before users do https://ilo.im/169wx8

_____
#Testing #Names #Words #Numbers #Layouts #Forms #Constraints #ProductDesign #UiDesign #WebDesign

By Jove I think I have it! #CSS #Layouts

Một bộ sưu tập các layout và theme mã nguồn mở cho Uptime Kuma đã được tạo ra! Một người dùng Uptime Kuma đã tự tổng hợp các tùy chỉnh giao diện để nâng cao trải nghiệm trang trạng thái của mình.

#UptimeKuma #SelfHosted #OpenSource #Themes #Layouts #TrạngThái #MãNguồnMở #TựHost

https://www.reddit.com/r/selfhosted/comments/1pe5gln/a_collection_of_opensource_uptime_kuma_layouts/

Brand New Layouts with CSS Subgrid

https://www.joshwcomeau.com/css/subgrid/

#HackerNews #CSS #Subgrid #Web #Design #Layouts #Grid #Layouts #Frontend #Development #Responsive #Design

#Development #Examples
Brand new layouts with CSS subgrid · “Subgrid unlocks exciting new layout possibilities.” https://ilo.im/168p12

_____
#CssGrid #CssSubgrid #Layouts #Grids #Browser #Design #WebDesign #WebDev #Frontend #CSS

#Design #Collections
Pricing Pages · Curated pricing page designs to spark your creativity https://ilo.im/1661yy

_____
#Business #Pricing #Layouts #Content #Website #ProductDesign #UxDesign #UiDesign #WebDesign #Inspirations

🎨 Everything in Flutter is a #widget: text, buttons, layouts, even the app itself. Learn how widgets and #layouts work together to create expressive, flexible UIs.

👉 Read more: https://bitskingdom.com/blog/flutter-development-essentials-widgets-layouts/

#Flutter #UXDesign #UI #Development 

#Development #Inspirations
Getting creative with small screens · Design is storytelling, even on a small screen https://ilo.im/1680vh

_____
#Layouts #Images #Screens #Mobile #Storytelling #Design #WebDesign #WebDev #Frontend #CSS

TROMjaro: All about properly customizing a Linux Distro

https://videos.trom.tf/w/gsVhyEnuVyCFFG2gbLXVTa

#Development #Techniques
Section layouts · How modern CSS can make them more dynamic https://ilo.im/167vol

_____
#ModernCSS #CssGrid #ContainerQueries #CssClamp #Layouts #Typography #Browser #WebDev #Frontend #CSS

#Development #Previews
CSS typed arithmetic · “This single feature is a quiet revolution.” https://ilo.im/1674t5

_____
#ModernCSS #CssCalc #Calculations #Layouts #Animations #Browser #WebDev #Frontend #CSS

Everything You Need To Know about Graphic Design Grids

Graphic Design Grids: Why Modular Grids Still Matter in Contemporary Design

Grids are one of the most misunderstood tools in graphic design. Many outside design education view them as rigid frameworks that restrict creativity. Yet inside design schools and professional studios, grids are taught as the silent architecture of a layout. They create rhythm, coherence, and meaning. Among them, the modular grid remains one of the most powerful, though it is rarely discussed outside academic circles.

Why is this relevant now? Digital platforms, from responsive web design to variable typography, demand systems that adapt without losing clarity. Designers are rediscovering the value of modular grids not as relics of Swiss modernism but as adaptable structures for today’s flexible media landscape.

What Is a Modular Grid in Graphic Design?

A modular grid divides a page or screen into consistent horizontal and vertical modules. Unlike simple column grids, modular grids form a matrix of squares or rectangles that can hold text, images, or graphic elements.

Think of it as scaffolding: the grid organizes information, but it does not dictate the final form. Designers can stretch across modules, combine them, or leave them empty to create dynamic white space. This flexibility makes modular grids ideal for magazines, complex websites, and design systems where hierarchy and order must coexist with variety.

Why Modular Grids Are More Than Alignment Tools

Most casual guides reduce grids to alignment devices. In practice, they are much more.

• They establish rhythm. By repeating units, modular grids create visual tempo that guides the eye.
• They ensure hierarchy. Designers use different module combinations to emphasize or downplay content.
• They balance freedom with control. A designer can break the grid deliberately, but the underlying system ensures cohesion.
• They adapt to responsive design. Modules scale more elegantly across devices than rigid column structures.

The modular grid is not about creating sameness. It is about building relationships between elements, so the reader moves through a page with clarity and confidence.

How to Build a Modular Grid Step by Step

Many designers encounter modular grids for the first time in design school. The process is methodical but surprisingly intuitive once understood.

1. Define the Format

Start with the dimensions of the medium — print page, poster, or screen resolution. Every grid begins with boundaries.

2. Establish Margins and Gutters

Margins frame the content area. Gutters separate modules. The proportions here affect how open or dense the layout feels.

3. Subdivide the Page

Divide the content area vertically and horizontally into equal modules. The number of divisions depends on the complexity of the project. A magazine spread might use a 12 × 12 module grid, while a simple poster could work with 4 × 4.

4. Test Content in Modules

Place headlines, body text, and images into modules. Combine multiple modules for larger elements. Test several variations.

5. Break the Grid Intentionally

After mastering alignment, consider breaking it. A headline spilling over modules, or an image shifted off-center, gains power because the system makes the disruption noticeable.

Why Breaking the Grid Works Only With a Grid

A critical insight often missed: breaking a grid only has impact when the grid exists in the first place. Without an underlying structure, a “freeform” design looks chaotic. With a grid, disruption becomes a statement.

This principle explains why so many influential layouts — from early Bauhaus experiments to contemporary editorial design — succeed. They are grounded in order, yet they carry energy through strategic imbalance.

Modular Grids in Digital and Responsive Design

Today, modular grids extend far beyond print. Web and app designers rely on them for consistency across devices. CSS frameworks such as Bootstrap or Tailwind essentially apply modular grid thinking, though often without naming it.

Why does this matter? Because responsive design requires scalable systems. A column-only approach often collapses awkwardly. Modular grids allow designers to think in flexible blocks, which adapt more gracefully to screens from phone to desktop.

This adaptability makes modular grids especially relevant for design systems, where branding must remain coherent across hundreds of touchpoints.

Expert Commentary: Why Modular Grids Still Matter

Some argue that modern design software makes grids obsolete. Auto-layout tools, AI-assisted design, and algorithmic composition reduce the need for manual structuring. Yet this perspective misses the essence of grids.

Grids are not about software efficiency. They are about design thinking. They teach visual discipline, spatial awareness, and typographic sensitivity. These skills remain indispensable, even if AI tools become more advanced.

From a personal standpoint, modular grids are one of the few methods that consistently improve a designer’s work. They force decisions about proportion, rhythm, and negative space. They also reveal the difference between decoration and structure. A design without a grid may look appealing, but it rarely holds up under scrutiny or across variations.

Practical Tips for Designers Exploring Modular Grids

• Start with sketching. A pencil and paper often reveal grid logic faster than software.
• Experiment with ratios. Not all modules must be square. Play with rectangles based on the golden ratio or other proportions.
• Use emptiness. Leaving modules blank strengthens rhythm and prevents clutter.
• Build systems, not layouts. Think of grids as reusable frameworks, not one-time solutions.

The Grid as a Living Framework

The modular grid is not a relic of 20th-century modernism. It is a living framework that continues to shape contemporary graphic design. Whether in print or digital, grids provide clarity while allowing space for experimentation.

For designers seeking to refine their craft, mastering the modular grid is essential. It sharpens perception, trains discipline, and creates systems that endure. When used thoughtfully, it transforms layouts into experiences that feel structured yet alive.

Feel free to browse WE AND THE COLOR’s Graphic Design section for more inspiring topics.

#design #designGrids #graphicDesign #graphicDesignGrids #grids #layouts

#Development #Talks
Smart layouts · Ahmad Shadeed‘s inspiring talk at CSS Day 2025 https://ilo.im/166baj

_____
#ModernCSS #Layouts #Browser #Figma #Design #FluidDesign #WebDesign #WebDev #Frontend #CSS

#Design #Approaches
Comic book layouts · What if web design were more like a comic book? https://ilo.im/165wve

_____
#Comics #Layouts #Grids #Content #Website #Storytelling #ProductDesign #UxDesign #UiDesign #WebDesign

I wonder how to handle a chain of components when doing layouts in Android. ConstaintLayout works fine, but when there's a chain of components that are next to each other it all breaks when one component is hidden. There will either be a hole or a broken layout as the component next to the hidden one now is constrained to a non existing or hidden buddy. Based on some googling this seems to be a bug in the layout system.

#android #layouts #hole

#Development #Videos
The CSS mindset · CSS makes sense when seen as a set of algorithms https://ilo.im/1642es

_____
#CSS #Concepts #Algorithms #Layouts #Browser #WebDev #Frontend