Layout fifty-fifty

Verdeling 50% - 50% vanaf het ingestelde breekpunt.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project.
    • Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
    • Voeg de class fifty-fifty toe op het gewenste element. Voor meer informatie over het implementeren zie de voorbeelden.

Voorbeelden

Visueel voorbeeld:

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

HTML-voorbeeld:

div:

--> 
<div class="fifty-fifty">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</div>

section:

--> 
<section class="fifty-fifty">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</section>

article:

--> 
<article class="fifty-fifty">
  <div>
    <!-- Content -->
  </div>

  <div>
    <!-- Content -->
  </div>
</article>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via NPM

Het is mogelijk om gebruik te maken van de layout-set. Door hier gebruik van te maken blijft de breedte tussen de blokken gelijk aan de daar gedefinieerde breedte.

CSS-voorbeeld:

/* Layout set */
@use "@minvws/manon/layout-set"; /* Optional */

/* Headings */
@use "@minvws/manon/fifty-fifty";

Instelbare variabelen

Beschikbare instelbare variabelen:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--layout-fifty-fifty-gap gap var(--content-gap, 2rem) 42rem -
--layout-fifty-fifty-breakpoint-gap gap var(--layout-fifty-fifty-gap) 42rem -

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

Om stijlkeuzes door te voeren op alle titels gebruik de onderstaande variabelen. Hierbij kan ook verwezen worden naar stijlkeuzes in heading-sets als deze toegevoegd zijn aan het project. Voor een voorbeeld zie: heading-base-set.

:root {
  --layout-fifty-fifty-gap: ;
  --layout-fifty-fifty-breakpoint-gap: ;
}