Design Technologist · AI-Assisted CSS Engineering
This Week 03 showcase documents how semantic settings-card HTML becomes a responsive LTR/RTL interface by replacing physical CSS assumptions with Logical Properties, parent-owned Flexbox gaps, and human audit checks.
Directional spacing works in one language direction, but it becomes fragile when the component is reused in another writing system.
A profile settings card can appear correct in English while hiding brittle CSS underneath. Physical margins, paddings, borders, and text alignment do not understand the document's writing direction, so the same component can feel reversed or misaligned when translated.
Logical Properties describe spacing through inline and block directions. Flexbox gaps let the parent own element-to-element spacing. Together, the same class names can support an English card and an Arabic card without duplicate RTL styles or JavaScript.
Six coordinated ideas turn one semantic structure into a resilient translated interface.
Components start from normal flow, then use intentional sizing so padding and borders do not create overflow.
Parent containers align related items and own spacing through gap instead of directional child margins.
Inline and block properties follow the active writing direction instead of hard-coding physical edges.
Avatar, profile text, and action controls stay visually related even as card content wraps.
The source order remains semantic while the browser mirrors the row direction for RTL content.
Profile text can grow, shrink, and wrap safely while avatar and buttons keep practical sizes.
The markup already carries LTR and RTL direction metadata, but browser defaults still stack the content without a card system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 03: Logical Properties Lab</title>
</head>
<body>
<div class="app-layout">
<!-- COMPONENT 1: English (Left-to-Right) Settings Card -->
<section class="settings-card" dir="ltr">
<header class="settings-card__header">
<h2 class="settings-card__title">Profile Settings</h2>
<p class="settings-card__subtitle">Manage your public directory information.</p>
</header>
<div class="settings-card__profile-section">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" alt="Avatar" class="profile-avatar">
<div class="profile-info">
<h3 class="profile-info__name">Sasha Dupont</h3>
<span class="profile-info__status">Active Editor</span>
</div>
<button class="btn btn--secondary">Change Photo</button>
</div>
<footer class="settings-card__actions">
<button class="btn btn--text">Cancel</button>
<button class="btn btn--primary">Save Changes</button>
</footer>
</section>
<!-- COMPONENT 2: Arabic (Right-to-Left) Settings Card -->
<!-- (Using the exact same CSS classes as Component 1!) -->
<section class="settings-card" dir="rtl">
<header class="settings-card__header">
<h2 class="settings-card__title">إعدادات الملف الشخصي</h2>
<p class="settings-card__subtitle">إدارة معلومات الدليل العام الخاص بك.</p>
</header>
<div class="settings-card__profile-section">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" alt="Avatar" class="profile-avatar">
<div class="profile-info">
<h3 class="profile-info__name">ساشا دوبونت</h3>
<span class="profile-info__status">محرر نشط</span>
</div>
<button class="btn btn--secondary">تغيير الصورة</button>
</div>
<footer class="settings-card__actions">
<button class="btn btn--text">إلغاء</button>
<button class="btn btn--primary">حفظ التغييرات</button>
</footer>
</section>
</div>
</body>
</html>Browser defaults only
Manage your public directory information.
Sasha Dupont — Active Editor
Avatar · Change Photo
Cancel · Save Changes
إدارة معلومات الدليل العام الخاص بك.
ساشا دوبونت — محرر نشط
Avatar · تغيير الصورة
إلغاء · حفظ التغييرات
The prompt converts the assignment rules into specific checks for Logical Properties, Flexbox gaps, directionality, and output boundaries.
Keep the supplied semantic HTML and class names intact.
Assign Flexbox responsibilities to the app, profile row, actions row, and buttons.
Use gap for sibling spacing instead of margins on individual children.
Use inline and block properties for spacing, sizing, and borders.
Use text-align: start and let dir mirror the two cards without duplicate selectors.
Require responsive, accessibility, overflow, reduced-motion, and code-audit checks.
Act as a senior CSS systems engineer. Generate a production-ready stylesheet for the supplied semantic settings-card HTML without replacing its structural class system.
Architecture requirements:
1. Preserve the supplied app-layout, settings-card, settings-card__header, settings-card__profile-section, profile-avatar, profile-info, settings-card__actions, and button class names.
2. Build the layout with Flexbox parent containers. Use gap on each Flexbox parent for element-to-element spacing instead of placing margins on individual children.
3. Use Internationalized Logical Properties for all spacing, sizing, and borders. Prefer padding-block, padding-inline, margin-block, margin-inline, border-block-end, inline-size, min-inline-size, and max-inline-size.
4. Do not use physical spacing or border declarations. The generated stylesheet must avoid physical directional property names in margins, paddings, borders, and positioning.
5. Align translated text with text-align: start so both English and Arabic content keep the correct reading edge.
6. Ensure the English card and Arabic card use the same class names and the same CSS rules. The dir attribute must be enough to mirror avatar placement, profile text flow, and action button order.
7. Make the cards responsive with flexible wrapping, shrink-safe children, controlled avatar sizing, accessible button target sizes, and no page-level horizontal overflow.
8. Include visible focus states, readable contrast, reduced-motion handling, and comments explaining the Logical Properties and Flexbox gap strategy.
9. Return only CSS. Do not add JavaScript, duplicate class names for RTL, or rewrite the HTML structure.
Return only the complete CSS stylesheet.The draft is accepted only after the stylesheet proves that spacing is logical, parent-owned, and mirrored by direction.
.app-layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl);
align-items: stretch;
justify-content: center;
padding-block: var(--space-xl);
padding-inline: var(--space-lg);
}
.settings-card {
display: flex;
flex-direction: column;
gap: var(--space-lg);
inline-size: min(100%, 32rem);
padding-block: var(--space-lg);
padding-inline: var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-align: start;
}
.settings-card__profile-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
.profile-info {
flex: 1 1 12rem;
min-inline-size: 0;
}
.settings-card__actions {
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: var(--space-sm);
border-block-start: 1px solid var(--color-border);
padding-block-start: var(--space-md);
}CSS audit search terms:
left
right
top
bottom
Expected result inside spacing, padding, border, and positioning declarations:
No matches.The English and Arabic cards use the same HTML classes and the same CSS selectors.
The app wrapper, profile row, and action row use gap for sibling spacing.
padding-inline, padding-block, and border-block-start express layout intent.
text-align: start keeps English and Arabic copy aligned to the reading edge.
The dir attributes carry the direction change without a second stylesheet branch.
min-inline-size: 0 allows translated names and labels to wrap inside the card.
Cards and internal rows wrap instead of creating page-level overflow.
Buttons retain practical target sizes and focus indicators for keyboard users.
The avatar, profile text, photo action, and footer buttons mirror through the native direction algorithm while keeping the same classes.
Manage your public directory information.
إدارة معلومات الدليل العام الخاص بك.
The LTR and RTL cards share the same selectors, spacing tokens, and component rules.
gap belongs to the Flexbox parents, while padding-inline and padding-block describe the component surfaces.
The browser mirrors inline flow from the dir attribute without duplicated layout code.
The final page is accepted only after the component behavior, source code, and portfolio integration are inspected.
dir="ltr" and the Arabic card uses dir="rtl".display: flex is active on the app, profile, and action containers.gap.left, right, top, and bottom; the generated CSS should return no matches.text-align: start is used for translated content.AI drafted the CSS. Human auditing verified direction-aware spacing, source constraints, accessibility, and portfolio preservation.