I started writing CSS around 2001 and it has evolved safely and steadily since then thanks to the invaluable work of the W3C. Now it is not only mature, it is completed.
Last year I was working on my latest – and all time greatest –WordPress project where the task was to finally modernize the age-old theme to a modern Gutenberg based approach. I’ve been using Gutenberg from day one but was hesitant to go into the Full Theme Editor experience for a variety of reasons but first and foremost because of missing incentives to tackle the inner workings of a system not relying on PHP/HTML/CSS but on React.
With LLM superpowers and fabulous WP 101 instructors like @BrianCoords I dived into the deep waters of JSON theme configurations and dynamic Block development but what stroke me wasn’t deep down in the “modern way” of WP development. It was a principle acting on UI/UX design I had completely missed over the years and even judged as missing in the block editor:
The possibilities of web design
It has been coined “Intrinsic” web design by designer and developer Jen Simmons, member of the aforementioned W3C. It is now the standardized way to approach web design, drawing from all the available CSS-display models. It allows content to visually express itself through the dynamic limits of infinite hardware-display sizes and formats, freeing you from the vicious “responsive” breakpoint drama.
There is consent that it is freaking complex to master and after one year I’ve just scratched the surface. But it is also surprising because it is design driven by very smart browser rendering rules while putting me as designer into the passenger seat making friendly suggestions. A bit like the black box of LLMs where you never actually know how it got to the conclusions. But with practice you learn how content behaves in a fluid medium. You learn how to let go of absolute control and are gifted with surprising coherent results.
You probably will start by just hating it, drowning in it. But my advice is to embrace what you can’t un-see @labs.jensimmons because it teaches you to swim in the stream of the medium.
Those are the rules at play in the WordPress block editor, the default editor for the most popular self-publishing platform online.
Now, show your LLM some development rules (.cursorules) and get to know the medium you are actually designing in so one day we can enjoy to surf the intrinsic way of your web design:
---
description: "Intrinsic Web Design Rules - Guide Agent to prioritize modern CSS capabilities and fluid layouts over traditional responsive design"
alwaysApply: true
globs:
- "**/*.css"
- "**/*.scss"
- "**/*.html"
---
# Intrinsic Web Design Project Rules
This project follows **intrinsic web design principles** as coined by Jen Simmons. We create flexible layouts that adapt based on content and context rather than relying solely on viewport breakpoints.
## Core Philosophy
Intrinsic design uses modern CSS capabilities to create layouts that are:
- **Fluid** - Adapt smoothly across all sizes without hard breakpoints
- **Content-aware** - Respond to actual content dimensions
- **Component-first** - Individual components manage their own responsiveness
- **Accessible** - Maintain readability and usability at all zoom levels
## CSS Approach (Priority Order)
### 1. Fluid Sizing Functions (ALWAYS use these first)
- `clamp(min, preferred, max)` - Responsive sizing without media queries
- `min()` - Constrain maximum values
- `max()` - Ensure minimum values
- `calc()` - Mathematical operations for flexible sizing
- `fit-content()`, `min-content`, `max-content` - Content-based sizing
**Example**: Instead of media queries, use:
```css
font-size: clamp(1rem, 5vw, 2rem);
width: min(100%, 1200px);
padding: clamp(1rem, 5%, 3rem);
```
### 2. Grid with Responsive Columns (NOT fixed breakpoints)
- `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` - Adaptive grid
- `grid-auto-rows` - Flexible row sizing
- `auto-fit` vs `auto-fill` - auto-fit collapses empty tracks, auto-fill keeps them
- Never use fixed pixel column counts
### 3. Flexbox for Component Alignment
- `flex: 1` - Flexible growing/shrinking
- `flex-wrap` - Natural wrapping
- Gap-based spacing - Use `gap` not margin hacks
### 4. Container Queries (for component-level responsiveness)
- `@container (width > 40rem)` - Components respond to their container, not viewport
- Essential for reusable component libraries
- Replaces viewport-dependent media queries at component level
### 5. Modern CSS Units
- `em`, `rem` - Scalable and accessible
- `ch` - Character-based widths (perfect for typography)
- `vw`, `vh`, `vmin`, `vmax` - Viewport relative (use sparingly)
- Avoid `px` for sizing; use only for fine details like borders
### 6. Aspect Ratio Control
- `aspect-ratio` property - Maintain proportional elements
- `object-fit` and `object-position` - Control media inside containers
- Crucial for responsive images and video embeds
## What NOT to Do
❌ Avoid hardcoded media query breakpoints like `@media (max-width: 768px)`
❌ Don't use fixed pixel widths for layout columns
❌ Don't rely on viewport-only responsive design
❌ Avoid complicated nested media query hierarchies
❌ Don't force breakpoints into designs that don't need them
## Component Design Standards
All components should be:
1. **Self-contained** - Manage their own responsiveness via `@container` queries
2. **Flexible** - Use fluid sizing and flexible grids
3. **Aspect-aware** - Maintain proportions with `aspect-ratio`
4. **Content-respectful** - Adapt to actual content dimensions
## File Organization
```
css/
├── reset.css # CSS reset with modern defaults
├── styles.css # Global styles using fluid design
├── components/
│ ├── grid.css # Grid layout patterns
│ ├── flex.css # Flexbox patterns
│ └── typography.css # Fluid typography
```
## Typography Standards
- Use `clamp()` for all responsive font sizing
- Example: `font-size: clamp(1rem, 2.5vw, 2.5rem);`
- Set line-height based on font size: `line-height: 1.5`
- Use `ch` unit for readable line lengths: `max-width: 65ch`
## Spacing Standards
- Use `clamp()` for responsive padding/margins
- Example: `padding: clamp(1rem, 5%, 3rem);`
- Use `gap` property for spacing between grid/flex items
- Never use margin-based spacing hacks
## Grid Patterns
All grids should support flexible column counts:
```css
/* Auto-fitting grid - GOOD */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Auto-filling grid - for fixed counts */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Subgrid for complex nested layouts */
grid: subgrid / subgrid;
```
## When Media Queries Are Acceptable
Use media queries **only** for:
- Navigation layout changes (sidebar to hamburger)
- Fundamentally different layouts between mobile/desktop
- Accessibility adjustments (`prefers-reduced-motion`, `prefers-dark-scheme`)
- Print styles
- Device-specific rules
## Browser Support
This project targets:
- Modern browsers with CSS Grid, Flexbox, and `clamp()` support
- Modern CSS features like `container` queries
- Progressive enhancement for older browsers using `@supports`
Use `@supports` for feature detection:
```css
@supports (aspect-ratio: 1) {
/* Modern aspect-ratio approach */
}
```
## Resources & References
- Every Layout (every-layout.dev) - Compositional patterns
- Jen Simmons' Layout Lab (labs.jensimmons.com)
- MDN CSS Reference (developer.mozilla.org/en-US/docs/Web/CSS)
- CSS Tricks - Modern CSS articles
## Testing & Validation
Before considering a layout "complete":
1. ✓ Test at various zoom levels (75%, 100%, 150%, 200%)
2. ✓ Verify responsiveness without resizing window
3. ✓ Check that text remains readable at all sizes
4. ✓ Ensure no horizontal scrolling at any size
5. ✓ Test with actual content (not placeholder text)
6. ✓ Validate accessibility at all breakpoints