MiHCM

Grid system

MiHCM uses a mobile-first responsive grid built on Tailwind utilities, the system spacing scale, and constrained page containers. There is no separate grid package: the contract is the documented breakpoint, gutter, column, and container rules below.

Use semantic colour tokens, spacing tokens, and standard responsive utilities. Avoid raw pixel layout values unless the value is part of a documented component contract.

Spacing scale
4px base unit for gutters and padding.
Typography
Readable line lengths and density rules.
PageShell
Use for app chrome, sidebars, and content regions.

Rules

These are the non-negotiable layout rules for MiHCM screens and examples.

Start at base. A usable 375px phone layout is the source of truth.
Use gap and padding from the spacing scale: gap-3, gap-4, gap-6, px-4, px-6, px-8.
Constrain readable content. Do not stretch prose or forms across wide monitors.
Use 12 columns only for complex desktop composition. Most screens need simpler recipes.
Use CSS Grid for two-dimensional placement and Flexbox for one-dimensional alignment.
Let data tables scroll horizontally instead of squeezing columns below readability.

Breakpoints

Breakpoints follow Tailwind's default mobile-first contract. Unprefixed classes apply to every size; prefixed classes apply at that width and above.

Name
Width
Use
base0px+
Phone-first layout. Single column, full-width controls, stacked sections.
sm640px+
Large phones and small tablets. Two-column card groups when content remains readable.
md768px+
Tablet and narrow desktop. Side-by-side form fields and compact secondary panels.
lg1024px+
Primary desktop breakpoint. 12-column layouts, sidebar plus content, dashboards.
xl1280px+
Wide workspaces. More breathing room, not more density by default.
2xl1536px+
Large monitors. Keep content constrained; expand comparison and monitoring views only.
Breakpoint ruler
base
0px+
sm
640px+
md
768px+
lg
1024px+
xl
1280px+
2xl
1536px+
<section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
  <StatCard />
  <StatCard />
  <StatCard />
  <StatCard />
</section>

Containers

Pick the smallest container that supports the workflow. Wide screens should improve scanability, not make every line longer.

Prose guide
max-w-3xl768px

Long-form documentation and readable policy content.

Standard page
max-w-5xl1024px

Most docs, forms, settings pages, and focused workflows.

Wide workspace
max-w-7xl1280px

Dashboards, grids, comparison pages, admin consoles.

Full viewport
w-fullfluid

App shells, split panes, maps, data tables with horizontal scroll.

Gutters

Use spacing tokens for all gutters. The defaults below keep small screens usable and desktop screens readable.

Compact controls
gap-2 / 8px

Toolbar icon groups, inline filters.

Default panels
gap-4 / 16px

Cards, form fields, dashboard blocks.

Page sections
gap-6 / 24px

Primary page regions and split layouts.

Twelve-column showcase

Use the 12-column model for desktop composition, then collapse to simple stacks on small screens.

Main content: col-span-12 lg:col-span-8
Aside: col-span-12 lg:col-span-4
KPI
KPI
KPI
KPI

Recipes

Use these recipes as the default implementation path before creating a custom layout.

Phone stack
grid grid-cols-1 gap-4

Default. Start every layout here.

Card group
grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3

Cards with similar weight and independent actions.

Dashboard row
grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4

KPI tiles and monitoring summaries.

Page + aside
grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]

Primary content with a right-side summary panel.

Twelve columns
grid grid-cols-12 gap-4

Complex desktop composition. Hide the 12-column model behind clear spans.

Dashboard layout

Dashboards should preserve hierarchy: KPI cards first, primary visualization next, secondary panels last.

Headcount
Open roles
Payroll status
Approvals
Primary chart
Exceptions
Next payroll run

Form layout

Forms should be one column on mobile, two columns for related fields at md and above, and constrained to a readable width.

Data layout

Dense data should keep structure. Let tables scroll when columns cannot fit; do not shrink text below the type scale.

Employee
Team
Status
Action
Aisha Rahman
People Ops
Active
Open
Daniel Lee
Payroll
Pending
Open
Maya Chen
Recruiting
Review
Open
<div className="overflow-x-auto">
  <Table className="min-w-full">
    ...
  </Table>
</div>

Accessibility

Responsive layout changes must preserve reading order, focus order, and target size.

Keep DOM order the same as the visual reading order. Avoid using order utilities to create a different keyboard path.
Interactive targets stay at least 44px tall when the layout gets dense.
Do not hide important content at small breakpoints. Reflow it or move it behind an explicit disclosure.
Use landmarks through PageShell, header, main, aside, and nav regions for large application layouts.
Keep chart and data summaries readable without relying on colour alone.
Test at 375px, 768px, 1024px, dark mode, and 200% browser zoom.

End-to-end checklist

Use this checklist before shipping a new screen, docs example, or template.

  • Start with a 375px single-column layout.
  • Use px-4 sm:px-6 lg:px-8 for page gutters unless the host shell already provides padding.
  • Choose a container: max-w-3xl, max-w-5xl, max-w-7xl, or full viewport.
  • Use gap-4 inside cards and gap-6 between major sections.
  • Promote to two columns at md only when both columns remain readable.
  • Promote to 12 columns at lg only for complex desktop composition.
  • Verify light mode, dark mode, keyboard order, 200% zoom, and horizontal overflow.