Variabelen

Manon maakt gebruik van CSS-variabelen voor het instellen van stijlkeuzes en Sass variabelen voor het instellen van breekpunten.

Voorbeeld CSS-variabele
--application-base-accent-color: hotpink;
Voorbeeld sass-variabele
$application-base-breakpoint-1: 24rem;

Opbouw variabelennamen

Variabelennamen zijn opgebouwd uit de onderstaande onderdelen

Voorbeeld --navigation-base-list-item-hover-background-color.

  1. Componentnaam. In dit geval: --navigation-base. Dit is het basiscomponent voor navigatie.
  2. Object binnen het component. In dit geval -list.
  3. Subobject(en) binnen het component. In dit geval -item.
  4. State. In dit geval -hover.
  5. Attribuut, verwijzing naar het CSS-attribuut. In dit geval -background-color.

Variabelen instellen

Alle instelbare componenten verwijzen naar een variabelen-bestand. Binnen dit bestand staan alle variabelen die beschikbaar zijn voor het component.

Waarde aanpassen of invullen

Let op: Aan deze instructies wordt nog gewerkt.

Breekpunten instellen

Let op: Aan deze instructies wordt nog gewerkt.

Overzicht

Overzicht van types variabelen:
Naam CSS-attribuut Omschrijving Opties
*-padding padding Geeft padding aan de binnenkant van het element. Numerieke waarde.
  • Alle waardes die binnen het padding-element binnen CSS gebruikt kunnen worden.
  • De waarde geldt voor padding-top, padding-right, padding-bottom, padding-left in deze volgorde.
  • Enkele waarde: Bijvoorbeeld 1rem.
    • Dit vertaald zich in:
      • padding-top: 1rem;
      • padding-right: 1rem;
      • padding-bottom: 1rem;
      • padding-left: 1rem;
  • Twee waardes bijvoorbeeld: 0.5rem 1rem
    • Dit vertaald zich in:
      • padding-top: 0.5rem;
      • padding-right: 1rem;
      • padding-bottom: 0.5rem;
      • padding-left: 1rem;
  • Vier waardes bijvoorbeeld: 0 0 1rem 0
    • Dit vertaald zich in:
      • padding-top: 0;
      • padding-right: 0;
      • padding-bottom: 1rem;
      • padding-left: 0;
*-padding-top padding-top Geeft padding aan de bovenkant binnen het element. Numerieke waarde.
  • Alle waardes die binnen het padding-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 5px.
*-width width Breedte van het element Numerieke waarde.
  • Alle waardes die binnen het width-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-max-width max-width Maximale breedte van het element Numerieke waarde.
  • Alle waardes die binnen het max-width-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-min-width min-width Minimale breedte van het element Numerieke waarde.
  • Alle waardes die binnen het min-width-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-height height Hoogte van het element Numerieke waarde.
  • Alle waardes die binnen het height-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-min-height min-height Minimale hoogte van het element Numerieke waarde.
  • Alle waardes die binnen het min-height-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-max-height max-height Maximale hoogte van het element Numerieke waarde.
  • Alle waardes die binnen het max-height-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 100%.
*-margin margin Witruimte rondom het object. Numerieke waarde.
  • Alle waardes die binnen het margin-element binnen CSS gebruikt kunnen worden.
  • De waarde geldt voor margin-top, margin-right, margin-bottom, padding-left in deze volgorde.
  • Enkele waarde: Bijvoorbeeld 1rem.
    • Dit vertaalt zich in:
      • margin-top: 1rem;
      • margin-right: 1rem;
      • margin-bottom: 1rem;
      • margin-left: 1rem;
  • Twee waardes bijvoorbeeld: 0.5rem 1rem
    • Dit vertaalt zich in:
      • margin-top: 0.5rem;
      • margin-right: 1rem;
      • margin-bottom: 0.5rem;
      • margin-left: 1rem;
  • Vier waardes bijvoorbeeld: 0 0 1rem 0
    • Dit vertaalt zich in:
      • margin-top: 0;
      • margin-right: 0;
      • margin-bottom: 1rem;
      • margin-left: 0;
*-object-fit object-fit Manier waarop de afbeelding of video binnen de container geplaatst wordt.
  • Alle waardes die binnen het object-fit-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld contain of cover.
*-border-radius border-radius De radius van de hoeken van het element
  • Numerieke waarde
    • Alle waardes die binnen het border-radius-element binnen CSS gebruikt kunnen worden.
    • Bijvoorbeeld 0.25rem 0 0 0 of 50%.
*-object-position object-position Manier waarop de afbeelding of video binnen de container uitgelijnd wordt.
  • Alle waardes die binnen het object-position-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld center, top left of 50% 0.
*-padding-bottom padding-bottom Geeft padding aan de onderkant binnen het element. Numerieke waarde.
  • Alle waardes die binnen het padding-element binnen CSS gebruikt kunnen worden.
  • Bijvoorbeeld 1rem of 5px.
*-text-color color Tekstkleur Kleurwaarde. Bijvoorbeeld hex, CSS kleurcode, rgb, rgba.
*-background-color background-color Achtergrondkleur Kleurwaarde. Bijvoorbeeld hex, CSS kleurcode, rgb, rgba.
variabele naam css-variabele Variabele die een kleurwaarde verwacht. Kleurwaarde. Bijvoorbeeld hex, CSS kleurcode, rgb, rgba.
*-font-size font-size Tekstgrootte Alle waardes die binnen het font-size-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld een numerieke waarde in px, rem of em.
*-font-family font-family Lettertype Alle waardes die binnen het font-family-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld sans-serif, serif. Voor het toevoegen van lettertypes aan het project zie: Lettertype toevoegen.
*-line-height line-height Regelhoogte Alle waardes die binnen het line-height-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld een numerieke waarde in px, rem of em. Line-height kan ook relatief weergeven worden. Geef dit aan met enkel een waarde. Bijvoorbeeld: 2. Hierbij wordt de regelhoogte gezet op 2 keer de hoogte van het lettertype. Stel dat het lettertype 16 is wordt de regelhoogte 32.
*-font-weight font-weight Dikte van de tekst indien beschikbaar binnen het lettertype. Alle waardes die binnen het font-weight-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld: light, 300, regular, 400, bolder, 700
*-striping background-color Achtergrondkleur van elementen om en om. De achtergrondkleur wordt geplaatst op nth-child(odd) Kleurwaarde. Bijvoorbeeld hex, CSS kleurcode, rgb, rgba.
*-border-width border-width Breedte van de omlijning
  • Alle waardes die binnen het border-width-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld een numerieke waarde in px, rem of em.
  • Enkele waarde: Bijvoorbeeld 1px.
    • Dit vertaalt zich in:
      • border-top: 1px;
      • border-right: 1px;
      • border-bottom: 1px;
      • border-left: 1px;
  • Twee waardes bijvoorbeeld: 0 1px
    • Dit vertaalt zich in:
      • border-top: 0;
      • border-right: 1px;
      • border-bottom: 0;
      • border-left: 1px;
  • Vier waardes bijvoorbeeld: 0 0 1px 0
    • Dit vertaalt zich in:
      • border-top: 0;
      • border-right: 0;
      • border-bottom: 1px;
      • border-left: 0;
*-border-style border-style Stijl van de omlijning Alle waardes die binnen het border-style-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld: solid, dashed of dotted.
*-border-color border-color Kleur van de omlijning Kleurwaarde. Bijvoorbeeld hex, CSS kleurcode, rgb, rgba.
*-align-items align-items Positionering van de content van het element. Alle waardes die binnen het align-items-element binnen CSS gebruikt kunnen worden. align-items is onderdeel van flexbox. Opties zijn o.a: flex-end, flex-start, center.
*-flex-direction flex-direction Positionering van de content van het element. Alle waardes die binnen het flex-direction-element binnen CSS gebruikt kunnen worden. flex-direction is onderdeel van flexbox. Opties zijn: row, row-reverse, column en column-reverse.
*-justify-content justify-content Positionering van de content van het element. Alle waardes die binnen het justify-content-element binnen CSS gebruikt kunnen worden. justify-content is onderdeel van flexbox. Opties zijn o.a: flex-end, flex-start, center.
*-flex-wrap flex-wrap Wrap geeft aan of de content van het component wel of niet over mag gaan op een nieuwe regel. Alle waardes die binnen het flex-wrap-element binnen CSS gebruikt kunnen worden. flex-wrap is onderdeel van flexbox. Opties zijn bijvoorbeeld: wrap, no-wrap, wrap-reverse.
*-gap gap Afstand tussen de elementen die direct binnen het element liggen.
  • Alle waardes die binnen het gap-element binnen CSS gebruikt kunnen worden.
  • De waarde geldt voor row-gap column-gap in deze volgorde.
  • Enkele waarde: Bijvoorbeeld 1rem.
    • Dit vertaalt zich in:
      • row-gap: 1rem;
      • column-gap: 1rem;
  • Twee waardes bijvoorbeeld: 0.5rem 1rem
    • Dit vertaalt zich in:
      • row-gap: 0.5rem;
      • column-gap: 1rem;
*-word-break word-break Hoe een regel afgebroken wordt. Alle waardes die binnen het word-break-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld: normal, break-all en keep-all.
*-hyphens hyphens Hoe woorden afgebroken worden. Alle waardes die binnen het hyphens-element binnen CSS gebruikt kunnen worden. Bijvoorbeeld: none en auto.
*-icon-* Weergave van een icoon via pseudo-content. De manier waarop pseudo-content-iconen geconfigureerd worden, verschilt per component. Raadpleeg de broncode van het component.
*-text-align text-align
*-outline-color outline-color
*-outline-offset outline-offset
*-outline-style outline-style
*-outline-width outline-width
*-position position
*-top top
*-bottom bottom
*-left left
*-color color
*-display display
*-text-decoration text-decoration
*-box-shadow box-shadow
*-accent-color accent-color
*-max-z-index max-z-index
*-resize resize
*-content content
*-list-style list-style