import { Meta } from "@storybook/addon-docs";

<Meta title="Guidelines/Mobile First" />

# Mobile First Approach

## What is it?

**“Mobile first”, as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.**

Luke Wroblewski coined the term, and wrote a [short article about mobile first](https://www.lukew.com/ff/entry.asp?933) back in 2009 (he's also written a book on the topic since)

## Why do we need it?

Mobile users are now the majority on the web. People expect sites and apps to work (and work well) on smaller devices. Mobile shouldn't be an afterthought at all since it can hurt business.

There are also some other benificial reasons to design and code interfaces with mobile first in mind.

- **Focus on core content** — The content that is displayed on a user’s screen has to be clear, concise and easy to understand. When done correctly, the mobile-first approach positively affects the tablet and desktop versions of your interface, resulting in a more clean and polished look. Since space comes at a premium the user must be able to find very quickly whatever they are looking for.
- **Simple design approach** - Thinking of your UI from a mobile perspective first helps you decide what's more important and helps you design better components and interfaces.
- **Easier to maintain** - as shown in the CSS section below.

## Writing mobile first CSS

A mobile-first approach to styling means that styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added into the stylesheet via media queries.

This approach uses `min-width` media queries (and soon [Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries))

Here’s a quick example:

```
// This applies from 0px to 600px
.main {
  display: grid;
  gap: var(--spacing-4);
  // By default items will be stacked in a single column, which is what we want on small devices
}

// This applies from 480px onwards, with the increased space, we can start adding more columns
@media (min-width: 480px) {
  .main {
    grid-template-columns: var(--cols-2);
  }
}

// This applies from 960px onwards
@media (min-width: 960px) {
  .main {
    grid-template-columns: var(--cols-4);
  }
}
```