Responsive design

Mobile-first mindset

The Storefront and Reader are designed with a mobile-first approach. Once the layout works at 360 px we progressively scale it using Tailwind breakpoints (lg:, xl:) or the Livewire Grid utilities. The Dashboard is the only area that is desktop-first, yet it must still be usable at 768 px.

Quick rule: if a view does not fit well at 360 px, it is not ready.

Official breakpoints

Alias	Min-width (px)	Typical usage
sm	640	Tablet portrait
md	768	Tablet landscape / small desktop
lg	1024	Standard desktop
xl	1280	Wide desktop
2xl	1536	Ultra-wide dashboards

Tailwind automatically adds the prefixes, e.g. lg:tw-px-8 adds horizontal padding only from 1024 px upward.

Livewire Grid

Livewire views rely on Blade components x-layout.* that wrap the 12-column grid and eliminate manual CSS.

Basic example

<x-layout.container>
    <x-layout.row>
        <!-- 12 columns on mobile, 6 on ≥ lg -->
        <x-layout.col lg="6">
            <div class="tw-bg-violet-50 tw-p-4">Content</div>
        </x-layout.col>
        <x-layout.col lg="6">
            <div class="tw-bg-violet-100 tw-p-4">More content</div>
        </x-layout.col>
    </x-layout.row>
</x-layout.container>

The span prop

span lets you control the width on the base breakpoint:

<x-layout.col span="6" md="4" lg="3" />

The element above takes 6/12 on phones, 4/12 on md, and 3/12 on lg.

Full product-card example

<x-layout.container>
  <x-layout.row class="tw-gap-y-6">
    @foreach($products as $product)
      <x-layout.col span="6" md="4" lg="3">
        <x-product.card :product="$product" />
      </x-layout.col>
    @endforeach
  </x-layout.row>
</x-layout.container>

Best practices

1. Avoid magic percentages. Use the grid for consistency.
2. Refactor Bootstrap. Replace col-md-6 with x-layout.col md="6".
3. Do not overuse hidden. Prefer flex, order, or grid utilities.
4. Test at 320 px and 1024 px before opening a merge request.

---

Last updated: 2025-07-14