Skip to content

Campus Design System

Main Navigation Home Handboek Richtlijnen Storybook

Appearance

Sidebar Navigation

Handboek

Introductie

Pijlers

Boost Track

1. Concept & Design

2. Kickstart

3. Fine tune

4. Top notch

Design tokens

Voor developers

Conventional Commits

🌟 Code guidelines 🌟

Architectuur

CUBE

Introductie

Composition

Utility

Block

Exception

Fluid typescaling

Logical properties

Design Tokens

Utility CSS classes 🚀

Composition

Stack

Cluster

Autogrid

Reel

Imposter

Switcher

Utilities

Base

Reset

Layout

Display

Isolation

Overflow

Position

Visibility

Top/Right/Bottom/Left

Z-index

Flexbox & Grid

Flex

Flex basis

Flex direction

Flex grow

Flex shrink

Flex wrap

Order

Grid template columns

Grid column start/end

Grid template rows

Grid row start/end

Grid flow

Grid auto columns

Grid auto rows

Gap

Justify content

Justify items

Justify self

Align content

Align items

Align self

Place content

Place items

Place self

Spacing

Inset

Padding

Margin

Sizing

Typography

Applying type

Font Weight

Line Clamp

Text Align

Text Color

Text Decoration

Text Decoration Style

Text Decoration Thickness

Text Transform

Text Overflow

Whitespace

Backgrounds

Background Color

Borders

Border Radius

Border Width

Border Color

Border Style

Ring Width

Ring Color

Ring Offset

Effects

Elevation

Opacity

Mix Blend Mode

Filters

Blur

Brightness

Contrast

Drop Shadow

Grayscale

Hue Rotate

Invert

Saturate

Sepia

Backdrop Blur

Backdrop Brightness

Backdrop Contrast

Backdrop Grayscale

Backdrop Hue Rotate

Backdrop Saturate

Backdrop Sepia

Transitions & Animations

Transition Property

Transition Duration

Transition Ease

Transition Delay

Animation

Transforms

Scale

Rotate

Translate

Skew

Transform Origin

DCR Component maken

Nieuw component

Basisprincipes

Introductie tot LIT

Lifecycle van een component

Shadow DOM

Attributen

Styling

DOM elementen zoeken en doorlopen

Events

Event handling

Event propagation

JavaScript event loop

CSS

Sass string interpolatie

Angular Integratie

Property vs Attribute Binding

Change Detection Issues

CDK Drag & Drop

State Management

Reactieve update cycles vermijden

UX testing

AB test

User Journey Tracking

Voor designers

Voor managers

Rol van die Keure

Principes

Gebruikers

Richtlijnen

Prioriteiten

Richtlijnen

Stijl

Typografie

Lettergrootte

Lettertype

Regelafstand

Opmaak

Kleur

Contrast

Contrast voor niet-tekstuele inhoud

Gebruik kleur met een doel

Gebruik kleur niet alleen

Verschillen in waarneming

Voorkeursinstellingen

Ruimte

Box model

Spacing scale

Relaties

Interactieve elementen

Iconografie

Kleur

Afmetingen

Met labels

Patronen

Onboarding Popups

Fouten en waarschuwingen

WCAG

1.1.1 Niet-tekstuele inhoud

1.2.1 Audio-only en video-only inhoud

1.2.2 Ondertitels (Opgenomen)

1.2.3 Audio beschrijving of media alternatief (Opgenomen)

1.2.4 Ondertitels (Live)

1.2.5 Audio beschrijving (Opgenomen)

1.3.1 Informatie en relaties

1.3.2 Structurele gegevens

1.3.3 Zintuiglijke Kenmerken

1.3.4 Oriëntatie

1.3.5 Identificeer het inputdoel

1.4.1 Gebruik van kleur

1.4.2 Audio-regeling

1.4.3 Contrast (minimum)

1.4.4 Tekst herschalen

1.4.5 Afbeeldingen van tekst

1.4.10 Reflow

1.4.11 Non-tekst Contrast

1.4.12 Tekstafstand

1.4.13 Inhoud bij hover of focus

2.1.1 Toetsenbordtoegankelijkheid

2.1.2 Geen toetsvergrendeling

2.1.4 Sneltoetsen met Karakters

2.2.1 Voldoende tijd

2.2.2 Pauzeer/stop/verleng

2.3.1 Maximaal drie flitsen

2.4.1 Blokken omzeilen

2.4.2 Paginatitels

2.4.3 Focusvolgorde

2.4.4 Doel van de link

2.4.5 Meerdere manieren

2.4.6 Koppen en labels

2.4.7 Focus zichtbaar

2.4.11 Focus niet belemmerd

2.5.1 Pointergebaren

2.5.2 Pointer Annulering

2.5.3 Label in naam

2.5.4 Bewegings-activering

2.5.7 Sleepbewegingen

2.5.8 Doelgrootte (minimaal)

3.1.1 Taal van de pagina

3.1.2 Taal van onderdelen

3.2.1 Bij focus

3.2.2 Bij invoer

3.2.3 Consistente navigatie

3.2.4 Consistente identificatie

3.2.6 Consistente hulp

3.3.1 Foutidentificatie

3.3.2 Labels of instructies

3.3.3 Foutsuggestie

3.3.4 Foutpreventie

3.3.7 Redundante invoer

3.3.8 Toegankelijke authenticatie (minimaal)

4.1.2 Naam, Rol, Waarde

4.1.3 Statusberichten

Taal

Lab

Steering

Campus

Projectstructuur

Product Overzicht

Technologie Stack

DDD Architectuur

Die Core

Projectstructuur

Product Overzicht

Technologie Stack

AB-test

Requirements

Design

Tasks

Storybook

Changelog

On this page

Typografie

Pager

Next pageHandboek