MUZISYSTEM - Design System AVNIR

Mobile-First Approach

MUZISYSTEM follows a mobile-first responsive design approach. This means we design for small screens first, then progressively enhance the experience for larger screens using media queries.

Our breakpoint system is based on common device sizes and ensures consistent layouts across all screen sizes, from smartphones to ultra-wide monitors.

Breakpoint Scale

5 responsive breakpoints

Mobile

sm

≥ 640px

0px - 639px

Smartphones, portrait tablets

Tablet

md

≥ 768px

640px - 767px

Tablets, small laptops

Desktop

lg

≥ 1024px

768px - 1023px

Laptops, desktops

Large Desktop

xl

≥ 1280px

1024px - 1279px

Large screens, wide monitors

Extra Large

2xl

≥ 1536px

1280px+

Ultra-wide monitors, 4K displays

Common Patterns

Responsive layout strategies

Grid Layouts

Mobile (sm) - 1 column
Tablet (md) - 2 columns
Desktop (lg) - 3-4 columns
Large (xl) - 4-6 columns

Typography

Mobile - Smaller font sizes
Tablet - Medium font sizes
Desktop - Larger font sizes
Use clamp() - Fluid typography

Spacing

Mobile - Compact spacing
Tablet - Medium spacing
Desktop - Generous spacing
Adjust padding - Scale with screen size

Navigation

Mobile - Hamburger menu
Tablet - Collapsed menu
Desktop - Full horizontal menu
Sticky - Fixed on scroll

Code Examples

How to use breakpoints in CSS

/* Mobile-first approach */
.container {
  padding: 16px; /* Mobile */
}

@media (min-width: 640px) { /* sm */
  .container {
    padding: 24px; /* Tablet */
  }
}

@media (min-width: 1024px) { /* lg */
  .container {
    padding: 32px; /* Desktop */
  }
}

/* Grid example */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 16px;
}

@media (min-width: 768px) { /* md */
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
  }
}

@media (min-width: 1024px) { /* lg */
  .grid {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
  }
}

Best Practices

Mobile-first - Start with mobile styles, enhance for larger screens
Content-based - Let content dictate breakpoints, not devices
Test thoroughly - Check all breakpoints in real devices
Fluid layouts - Use relative units (%, rem, em) when possible
Touch targets - Ensure 44x44px minimum on mobile
Performance - Optimize images and assets for each breakpoint

Testing Devices

Common devices to test

📱 Mobile

iPhone SE (375px)
iPhone 14 Pro (393px)
Samsung Galaxy (360px)

📱 Tablet

iPad (768px)
iPad Pro (1024px)
Surface Pro (912px)

💻 Desktop

MacBook (1280px)
Desktop HD (1920px)
4K Display (3840px)

Breakpoints