import { Meta, Source } from '@storybook/addon-docs';
import tailwindPreset from '@vtmn/css-tailwind-preset';

<Meta title="Guidelines / Layout" />

# Layout

> The very large number of devices today forces designers to follow some guidelines to design their layouts. By following it, we ensure to keep a visual consistency across multiple devices.

For more details, see our <a class="vtmn-link vtmn-link--icon-along" href="https://www.decathlon.design/726f8c765/p/061870-layout/b/91b22f" target="_blank" rel="noopener noreferrer">Layout's guideline</a>.

## Breakpoints

Every utility class in [Tailwind CSS](https://tailwindcss.com) can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
Here is the list of our breakpoints in Tailwind CSS Configuration, the values are the `min-width` where that breakpoint should start:

<Source
  language="json"
  code={JSON.stringify(tailwindPreset.theme.screens, null, 2)}
/>

If you want to use our utility classes from Tailwind CSS for Responsive Design, [see this documentation](https://tailwindcss.com/docs/responsive-design).

## Spacings

Spacings help creating hierarchy and relationships between elements.
The spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.

<Source
  language="json"
  code={JSON.stringify(tailwindPreset.theme.spacing, null, 2)}
/>

These values will override the [Tailwind CSS' default spacing scale](https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale) and generates classes like `p-10`, `w-8`, `h-6`, etc.

## Grid system

As you've probably seen on our [Layout's guideline](https://www.decathlon.design/726f8c765/p/061870-layout/b/60e5d1), we are in a 12 column grid system.

If you want to apply this guideline, you just need to follow documentation from Tailwind CSS:

- [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)
- [Grid Column Start / End](https://tailwindcss.com/docs/grid-column)
- [Grid Template Rows](https://tailwindcss.com/docs/grid-template-rows)
- [Grid Row Start / End](https://tailwindcss.com/docs/grid-row)
- [Grid Auto Flow](https://tailwindcss.com/docs/grid-auto-flow)
- [Grid Auto Columns](https://tailwindcss.com/docs/grid-auto-columns)
- [Grid Auto Rows](https://tailwindcss.com/docs/grid-auto-rows)
- [Gap](https://tailwindcss.com/docs/gap)

Every Tailwind CSS utility classes from grid follows our configuration about breakpoints & spacings detailed above.

## To go further

For your information, here are the different CSS Custom Properties available for margins & gutters:

```
var(--vtmn-layout-gutter_mobile);
var(--vtmn-layout-gutter_tablet);
var(--vtmn-layout-gutter_small-desktop);
var(--vtmn-layout-gutter_medium-desktop);
var(--vtmn-layout-gutter_large-desktop);
var(--vtmn-layout-margin_mobile);
var(--vtmn-layout-margin_tablet);
var(--vtmn-layout-margin_small-desktop);
var(--vtmn-layout-margin_medium-desktop);
var(--vtmn-layout-margin_large-desktop);
```
