Layout & Grid

Page Structure (Live)

FUJITSUZippin Control Centertopbar · 56px · fixed

Operations

Dashboard

Monitoring

sidebar · 240px

.page-title

.page-desc

.section-title

.card

.card

.card

.main · margin-left: 240px

Grid System (Live)

.grid-2

1

2

.grid-3

1

2

3

.grid-4

1

2

3

4

.grid-5

1

2

3

4

5

Grid gap: 0.75rem. Always use .grid .grid-N together.

Responsive Breakpoints

≤ 900px

Mobile
Sidebar hidden
1 column grids
44px touch targets

901–1200px

Tablet
Sidebar visible
2 column grids

> 1200px

Desktop
Full layout
All columns visible