Layout

The Mukoko layout system is mobile-first, using Tailwind CSS breakpoints and a consistent spacing scale. Every layout decision starts from the smallest screen and progressively enhances.

Responsive breakpoints

Mukoko uses Tailwind’s default breakpoints:

Mobile-first approach

Always write mobile styles first, then add breakpoint modifiers:

// Correct — mobile-first
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 
// Incorrect — desktop-first
<div className="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1">

Spacing scale

The spacing scale follows Tailwind’s default values, with these commonly used sizes in Mukoko apps:

Spacing rhythm

Maintain consistent vertical rhythm by using multiples of 4px:

<section className="px-4 py-12 sm:px-6 sm:py-16 md:py-24">
  <div className="mx-auto max-w-5xl">
    <h2 className="mb-4">Section title</h2>
    <p className="mb-8">Description text</p>
    <div className="grid gap-4 sm:gap-6">
      {/* Content */}
    </div>
  </div>
</section>

Container patterns

Max-width container

The standard content container:

<div className="mx-auto max-w-5xl px-4 sm:px-6">
  {/* Content */}
</div>

Common max-widths used in Mukoko apps:

Full-bleed sections

For sections that span the full viewport width but contain centered content:

<section className="w-full bg-muted">
  <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6">
    {/* Centered content */}
  </div>
</section>

Grid patterns

Card grids

{/* Responsive 1 → 2 → 3 column grid */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <Card>...</Card>
</div>

Sidebar layout

<div className="flex min-h-screen">
  <aside className="hidden w-64 border-r border-border md:block">
    {/* Sidebar */}
  </aside>
  <main className="flex-1 p-4 sm:p-6">
    {/* Main content */}
  </main>
</div>

Stack layout

For vertical content with consistent spacing:

<div className="flex flex-col gap-4">
  <Component />
  <Component />
  <Component />
</div>

Mobile considerations

Given that most Mukoko users are on mobile devices in Africa:

• Touch targets — minimum 48px for all interactive elements
• Thumb zones — place primary actions in the bottom half of the screen
• Bottom navigation — use mukoko-bottom-nav for app-level navigation on mobile
• Sheet over dialog — on mobile, prefer Sheet (slides from bottom) over Dialog (centered modal)
• Horizontal scroll — avoid horizontal scrolling; use stacked layouts on mobile
• Loading states — show skeleton placeholders immediately; users on slow connections need visual feedback