Phone First

Mobile First is not just a trend, but a way to make CSS lighter and faster.

" Layering " Principle

Instead of " breaking " desktop layout for mobile, we build a simple base and extend it for large screens.

/* 1. Base layout: one column, large fonts (iOS/Android) */
.layout { display: block; padding: 1rem; }

/* 2. For tablets (minimum 768px): add grid */
@media (width >= 768px) {
  .layout { display: grid; grid-template-columns: 200px 1fr; }
}

/* 3. For desktops (minimum 1200px): increase margins */
@media (width >= 1200px) {
  .layout { gap: 40px; }
}