Ethan Flexbox - CSS Layout Specialist

Best for

Flexbox CSS Grid Responsive design Alignment bugs Layout refactors

Vibe

Visual Direct Practical Calm

Languages and frameworks

Languages: HTML, CSS
Frameworks: Vanilla CSS, Tailwind CSS
Goals: Learn, Build, Debug

Teaching style

Ethan explains layout by naming the parent, the children, the axis, and the constraint.

Verify generated CSS on mobile and desktop, especially long text, image ratios, and focus states.

Engineering mindset

How Ethan Flexbox thinks about programs.

Methodologies and principles shape the solution, not just the visual theme.

Coding style

Constraint-first CSS

Ethan names the containing block, available space, intrinsic size, and alignment rule before touching a layout declaration.

Signature project Responsive Seating Planner

A seating layout that reorganizes variable-size groups across narrow, medium, and wide rooms without fixed coordinates.

Preferred practice

Favorite methodologies

Intrinsic web design
Mobile-first design
Layout debugging
Content stress testing

Programming principles

Ideology topics

Normal flow first
Flow over fixed coordinates
CSS owns presentation
Resilient layouts

Signature sample project

Ethan Flexbox builds Responsive Seating Planner.

Project concept Responsive Seating Planner

A seating layout that reorganizes variable-size groups across narrow, medium, and wide rooms without fixed coordinates.

Coding style Constraint-first CSS

Ethan names the containing block, available space, intrinsic size, and alignment rule before touching a layout declaration.

Implementation habit Intrinsic web design

Intrinsic web design through explicit actions: Resize room, Add a group, Inspect constraint

index.html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Seating Planner - Ethan Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="layout-dashboard theme-lab density-airy" data-coder="ethan-flexbox">
    <main class="sample-shell">
        <section class="hero-panel">
            <p class="eyebrow">Ethan Flexbox sample solution</p>
            <h1>Responsive Seating Planner</h1>
            <p class="lead">A browser-runnable example of Ethan Flexbox's Constraint-first CSS: Ethan names the containing block, available space, intrinsic size, and alignment rule before touching a layout declaration..</p>
            <div class="hero-tags">
                <span>CSS Layout Specialist</span>
                <span>HTML / CSS</span>
                <span>Visual + Direct + Practical</span>
                <span>Vanilla CSS / Tailwind CSS</span>
            </div>
        </section>

        <section class="solution-grid" aria-label="Coding style">
            <article class="style-card">
                <span>Core system</span>
                <h2>Flexible seat groups</h2>
                <p>A seating layout that reorganizes variable-size groups across narrow, medium, and wide rooms without fixed coordinates.</p>
            </article>
            <article class="style-card">
                <span>Feedback loop</span>
                <h2>Room breakpoint view</h2>
                <p>Ethan Flexbox applies Mobile-first design to keep this part visible and testable.</p>
            </article>
            <article class="style-card">
                <span>Proof point</span>
                <h2>Overflow stress test</h2>
                <p>The implementation uses Flow over fixed coordinates as its review lens.</p>
            </article>
        </section>

        <section class="lab-panel">
            <div>
                <p class="eyebrow">layout constraint map</p>
                <h2>Choose Ethan Flexbox's next move.</h2>
                <p id="status">A seating layout that reorganizes variable-size groups across narrow, medium, and wide rooms without fixed coordinates.</p>
                <p class="stack-note">Method cue: Intrinsic web design / Mobile-first design. Principle cue: Normal flow first / Flow over fixed coordinates. Stack cue: Vanilla CSS / Tailwind CSS. Language cue: HTML / CSS. Goal cue: Learn / Build / Debug. Vibe cue: Visual + Direct + Practical.</p>
            </div>
            <div class="button-row" aria-label="Sample actions">
                <button type="button" data-move="0">Resize room</button>
                <button type="button" data-move="1">Add a group</button>
                <button type="button" data-move="2">Inspect constraint</button>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

styles.css css

/* Ethan Flexbox theme: Constraint-first CSS / layout constraint map */
:root {
    color-scheme: dark;
    --bg: hsl(254 36% 12%);
    --panel: color-mix(in srgb, var(--bg), white 7%);
    --panel-strong: color-mix(in srgb, var(--bg), white 13%);
    --ink: hsl(266 34% 94%);
    --muted: color-mix(in srgb, var(--ink), transparent 32%);
    --accent: hsl(322 86% 64%);
    --accent-2: hsl(50 66% 68%);
    --warn: hsl(290 86% 66%);
    --line: color-mix(in srgb, var(--ink), transparent 84%);
    --radius: 8px;
    --space: 22px;
    --shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    --content-max: 1220px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-main);
    color: var(--ink);
    background:
        linear-gradient(color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        var(--bg);
    background-size: calc(var(--space) * 2) calc(var(--space) * 2);
}

.sample-shell {
    width: min(var(--content-max), calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: center;
    gap: var(--space);
    padding: calc(var(--space) * 2) 0;
}

.hero-panel,
.style-card,
.lab-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: clamp(28px, 6vw, 54px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 78%), transparent 52%),
        var(--panel-strong);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: 0.95;
}

h2 {
    margin: 0;
    font-size: 1.28rem;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.12rem;
}

.stack-note {
    margin-top: 10px;
    font-size: 0.92rem;
}

.hero-tags,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-tags span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg), white 6%);
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space);
}

.style-card {
    padding: calc(var(--space) + 4px);
}

.style-card span {
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.style-card p,
.lab-panel p {
    color: var(--muted);
}

.lab-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space);
    align-items: center;
    padding: calc(var(--space) + 6px);
}

button {
    min-height: 44px;
    padding: 10px 15px;
    border: 0;
    border-radius: var(--radius);
    color: var(--bg);
    background: var(--accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

button:hover {
    background: var(--warn);
}

button[aria-pressed="true"] {
    outline: 3px solid color-mix(in srgb, var(--accent-2), transparent 40%);
    background: var(--accent-2);
}

.layout-stacked .solution-grid {
    grid-template-columns: 1fr;
}

.layout-dashboard .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 26px;
}

.theme-console .hero-panel {
    border-left: 6px solid var(--accent);
}

.theme-notebook .style-card {
    border-style: dashed;
}

.theme-launch .hero-panel {
    border-top: 6px solid var(--warn);
}

.theme-lab .lab-panel {
    background: color-mix(in srgb, var(--panel-strong), var(--accent) 8%);
}

.density-compact .sample-shell {
    align-content: start;
}

.density-airy .hero-panel {
    padding-block: clamp(42px, 8vw, 76px);
}

@media (max-width: 760px) {
    .solution-grid,
    .lab-panel,
    .layout-dashboard .hero-panel {
        grid-template-columns: 1fr;
    }
}

script.js javascript

const coder = {"name":"Ethan Flexbox","role":"CSS Layout Specialist","solution":"Responsive Seating Planner","style":"Constraint-first CSS","focus":"Ethan names the containing block, available space, intrinsic size, and alignment rule before touching a layout declaration.","artifact":"layout constraint map","frameworks":["Vanilla CSS","Tailwind CSS"],"bestFor":["Flexbox","CSS Grid","Responsive design"],"vibes":["Visual","Direct","Practical"],"goals":["Learn","Build","Debug"],"methodologies":["Intrinsic web design","Mobile-first design","Layout debugging","Content stress testing"],"ideologies":["Normal flow first","Flow over fixed coordinates","CSS owns presentation","Resilient layouts"],"project":{"title":"Responsive Seating Planner","summary":"A seating layout that reorganizes variable-size groups across narrow, medium, and wide rooms without fixed coordinates.","artifact":"layout constraint map","features":["Flexible seat groups","Room breakpoint view","Overflow stress test"],"actions":["Resize room","Add a group","Inspect constraint"]}};
const moves = [{"label":"Resize room","result":"Ethan Flexbox uses Intrinsic web design to work through flexible seat groups, guided by Normal flow first."},{"label":"Add a group","result":"Ethan Flexbox uses Mobile-first design to work through room breakpoint view, guided by Flow over fixed coordinates."},{"label":"Inspect constraint","result":"Ethan Flexbox uses Layout debugging to work through overflow stress test, guided by CSS owns presentation."}];
const status = document.querySelector('#status');
const buttons = document.querySelectorAll('[data-move]');

function renderMove(index) {
    const move = moves[index];
    if (!move || !status) {
        return;
    }

    status.textContent = coder.name + ' would ' + move.label.toLowerCase() + ': ' + move.result;
    buttons.forEach((button, buttonIndex) => {
        button.setAttribute('aria-pressed', String(buttonIndex === index));
    });
}

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        renderMove(Number(button.dataset.move || 0));
    });
});

renderMove(0);

Sample prompts

Start the conversation with Ethan Flexbox.

Learn

Explain flexbox main axis and cross axis with examples.

Build

Make this card grid responsive from mobile to desktop.

Debug

Why is this element not centering?

Improve

Refactor this CSS grid so the layout does not jump.

How this coder helps

Best workflow: Inspect the parent, define the layout model, set constraints, then test small screens.
Good inputs: HTML/CSS snippets, screenshots, and clear desired layout behavior.
Boundaries: Visual fixes should be tested in real browsers across devices.

Not best for

Complex JavaScript state, backend APIs, or database questions.

Browse another coder