Layout eenderde tweederde

Verdeling 33.33% - 66.66% 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.
  2. Voeg de class one-third-two-thirds toe aan de gewenste componenten. Voor meer informatie zie: 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="one-third-two-thirds">
  <div>
    <!-- Content -->
  </div>

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

section:

--> 
<section class="one-third-two-thirds">
  <div>
    <!-- Content -->
  </div>

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

article:

--> 
<article class="one-third-two-thirds">
  <div>
    <!-- Content -->
  </div>

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

Bijbehorende bestanden

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

Aandachtspunten:

Importeer component via NPM

CSS-voorbeeld:

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

/* Two thirds one third */
@use "@minvws/manon/one-third-two-thirds";

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizotal-view.

Beschikbare instelbare variabelen:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--layout-one-third-two-thirds-gap gap var(--content-gap) 42rem one-third-two-thirds

CSS

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

:root {
  --layout-one-third-two-thirds-gap
}