Layout

Indeks har utility-klasser for Flex og CSS Grid. Du skriver dem rett i markupen, så du slipper en egen CSS-fil for hver plassering.

Flex eller Grid?

Spør hvor mange dimensjoner du styrer. Én rad eller én kolonne: Flex. Rader og kolonner samtidig: Grid. Er du i tvil, er det nesten alltid Flex.

Grid

Grid-klassene setter rader, kolonner og avstand mellom cellene. Se Grid-dokumentasjonen for hele settet.

Bruk Grid når:

• Du trenger å plassere elementer i både rader og kolonner
• Du ønsker presis kontroll over plassering av elementer i et rutenett
• Layouten bestemmer størrelsen på innholdet

Eksempel

<div class="ix-grid ix-grid-cols-3 ix-gap-lg">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

Flex

Flex-klassene justerer og fordeler elementer langs én akse. Se Flex-dokumentasjonen for hele settet.

Bruk Flex når:

• Layouten har én dimensjon: enten rad eller kolonne
• Innholdet selv bestemmer størrelsen på elementene
• Du trenger fleksibel wrapping av elementer

Eksempel

<div class="ix-flex ix-gap-md ix-justify-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div class="ix-self-end">Element 3</div>
</div>

VStack og HStack

VStack og HStack er React-komponenter som stabler innhold vertikalt og horisontalt. De er Flex under panseret, så du kan kombinere dem med Flex-utilities. Skriver du HTML uten React, bruker du <ix-stack> i stedet.

<!-- Vertikal stack med standard gap (md) -->
<VStack>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</VStack>

<!-- Horisontal stack med standard gap (md) -->
<HStack>
    <button>Avbryt</button>
    <button>Lagre</button>
</HStack>

Density

Alle spacing-verdier skalerer med data-density på et container-element. Standard er data-density="default". De to andre:

• data-density="comfortable": Gir en mer romslig layout med større avstander mellom og inni elementer
• data-density="compact": Gir en tettere layout med mindre avstander mellom og inni elementer

Mer informasjon om density

Mobile first

De responsive klassene er mobile first: en klasse uten prefiks gjelder alle skjermstørrelser, og en med prefiks gjelder fra det breakpointet og oppover. ix-md-flex gjør elementet til flex-container fra md og opp, og lar mindre skjermer stå som de er.

<div class="ix-md-flex ix-lg-grid">
    Denne containeren er en flex-container på medium skjermer og oppover,
    og en grid-container på store skjermer og oppover.
</div>

Breakpoints

Indeks bruker følgende breakpoints for å håndtere responsiv design:

• sm: 768px og oppover
• md: 1024px og oppover
• lg: 1280px og oppover
• xl: 1600px og oppover