XBlock-Layout.md

XBlock “utility-first” helpers (Tailwind-ish)

These utilities are scoped under .xblock-student_view-html (see src/_xblock-article.scss).

You compose layout by stacking classes (like Tailwind). Responsive variants use the sm: prefix and kick in at < 500px.

Layout

• flex: display:flex
• flex-wrap: flex-wrap: wrap
• flex-col: flex-direction: column
• w-full: width: 100%
• gap-6: gap: 1.5rem (24px)

Justify / align

• justify-center: justify-content: center
• items-center: align-items: center

Sizing

• flex-1: flex: 1 1 300px (fills remaining space, but wraps nicely)
• w-1/2: flex: 1 1 45% + max-width: 45%
• w-1/3: flex: 1 1 30% + max-width: 30%
• w-80 / w-120 / w-160 / w-200 / w-300: fixed width columns (px)

Text

• text-left / text-center / text-justify

Spacing

• mt-auto, mt-4, mt-6, mb-4, mb-6, p-2, p-4

Responsive (< 500px)

• sm:basis-full: force full width (flex: 1 1 100%, max-width: 100%)
• sm:flex-col-reverse: reverse stacking order on mobile (flex-direction: column-reverse)

Recipes (with ASCII layouts)

2 columns (desktop) → stacked (mobile)

<div class="flex flex-wrap w-full gap-6">
  <div class="w-1/2 sm:basis-full">Left column</div>
  <div class="w-1/2 sm:basis-full">Right column</div>
</div>

Desktop

| Left (~45%) | gap | Right (~45%) |

Mobile (<500px)

| Left  (100%) |
| Right (100%) |

2 columns + reverse order on mobile

<div class="flex flex-wrap w-full gap-6 sm:flex-col-reverse">
  <!-- Desktop: A then B | Mobile (<500px): B then A -->
  <div class="w-1/2 sm:basis-full">Column A</div>
  <div class="w-1/2 sm:basis-full">Column B</div>
</div>

Desktop

| A | gap | B |

Mobile (<500px)

| B |
| A |

Left column 80px / right column fills

<div class="flex flex-wrap w-full gap-6">
  <div class="w-80 sm:basis-full">[icon]</div>
  <div class="flex-1 sm:basis-full">Some longer text content…</div>
</div>

Desktop

| [80px] | gap | content (flex) |

Mobile (<500px)

| [icon]   (100%) |
| content  (100%) |