Mixins

Componenten

Button Formulier Tekstvelden Errors Hamburger menu Tekst links

Overig

Losse mixins

Losse mixins

Backgrounds
@include background-cover ($image);
@include background-contain ($image);


Transitions

@include transition ($transition);



Into view

@include fade-into-view ($transform, $duration);



Zichtbaarheid (met transitie)

@include visibility ("hide");

@include visibility ("show");



Tekst effecten

@include text-columns ($columns, $gap);

@include text-ellipsis ($width);



Media queries

@include media-xs { ... }

@include media-s { ... }

@include media-m { ... }

@include media-l { ... }

@include media-xl { ... }

@include media-break { ... }



Object-fit

@include object-contain ($position, $width, $height);

@include object-cover ($position, $width, $height);



Kleuren effecten

@include color-multiply ($color);

@include blur ($blur, $brightness, $opacity, $color);



Aspect-ratio

@include aspect-ratio ($percent, $side);



Grid

@include part { ... }

@include grid-part ($size, $model, $gutter);



Achtergrondkleuren

@include background-colors;



Posities

@include absolute-cover;

@include absolute-contain;

@include flex-center;



Before and after

@include clearfix

@include before

@include before-absolute

@include after

@include after-absolute