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.
- Componentnaam. In dit geval:
--navigation-base. Dit is het basiscomponent voor navigatie. - Object binnen het component. In dit geval
-list. - Subobject(en) binnen het component. In dit geval
-item. - State. In dit geval
-hover. - 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
| Naam | CSS-attribuut | Omschrijving | Opties |
|---|---|---|---|
| *-padding | padding | Geeft padding aan de binnenkant van het element. | Numerieke waarde.
|
| *-padding-top | padding-top | Geeft padding aan de bovenkant binnen het element. | Numerieke waarde.
|
| *-width | width | Breedte van het element | Numerieke waarde.
|
| *-max-width | max-width | Maximale breedte van het element | Numerieke waarde.
|
| *-min-width | min-width | Minimale breedte van het element | Numerieke waarde.
|
| *-height | height | Hoogte van het element | Numerieke waarde.
|
| *-min-height | min-height | Minimale hoogte van het element | Numerieke waarde.
|
| *-max-height | max-height | Maximale hoogte van het element | Numerieke waarde.
|
| *-margin | margin | Witruimte rondom het object. | Numerieke waarde.
|
| *-object-fit | object-fit | Manier waarop de afbeelding of video binnen de container geplaatst wordt. |
|
| *-border-radius | border-radius | De radius van de hoeken van het element |
|
| *-object-position | object-position | Manier waarop de afbeelding of video binnen de container uitgelijnd wordt. |
|
| *-padding-bottom | padding-bottom | Geeft padding aan de onderkant binnen het element. | Numerieke waarde.
|
| *-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 |
|
| *-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. |
|
| *-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 | ||
| *-right | right | ||
| *-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 |