Sprint 1
week 1
05/09
Workshop CSS Basics
Selectors:
element selectors
.class selectors
meta = boven
body = content
universal selector = alles
pseudo element :before, :after
Properties:
hoogte, font, display, color
typografie - font, kleur
boxes - hoogte, breedte, margin, padding
Typografie:
line-height = ruimte tussen regels
letter-spacing = ruimte tussen letters
week 1
05/09
Workshop CSS Basics
Box:
margin = ruimte buitenkant box
padding = ruimte binnenkant box
border-radius = hoeken rond maken
debuggen = inspect gebruiken
Position:
position: absolute/relative
bottom: ...;
right: ...;
Transform:
rotate: ..deg = .. graden draaien
scale: 2 = 2x zo groot
transition: 2s = transition tijd
week 1
06/09
Visuele Hiërarchie
Volgorde belangrijke tekst
1. wie, wat, waar, wanneer
2. belangrijke details
3. andere info (minder belangrijk)
meest belangrijk
h1
h2
h3
h4
h5
h6
minst belangrijk
Visuele hiërarchie:
grootte
positie op scherm
witruimte
kleur/contrast
week 2
12/09
HTML & CSS
< a > = anchor element (link naar andere website)
target = blank = nieuwe tablad
Target een class name:
< button class 'sub-button' >
13/09
media query
@media (min-width: ...px){
div{
background-color: ...
}
week 3
19/09
Digitale toegankelijkheid
We ❤️ Web presentatie
Wat is digitale toegankelijkheid?
- de mensen
- de wet
- de richtlijnen
- de praktijk
Web Content Accesibility Guidelines:
- 4 principes
- 13 richtlijnen
1. niet goed kunnen zien?
2. niet goed kunnen horen?
3. niet goed kunnen bewegen?
4. niet goed kunnen snappen/begrijpen?
week 3
19/09
Voorbeelden
1. screenreaders, alt text, contrast
2. tekst, ondertiteling
3. eye tracker, tab
4. overzicht, duidelijk/simpel
Inclusive design:
deaf/Deaf
teletolk
gebarentaal is niet overal zelfde,
bijv. ander soort grammatica
Tips:
- use headings & subheadings
- één punt per paragraaf
- easy acces language
- journalistic style
- white space
- actieve vorm schrijven
- foto's
Sprint 2
week 1
26/09
CSS Challenges
Grid:
CSS grid generator
display: grid
gap: ...px
grid-column-start/end: -1/10
grid-row-start/end: -1/10
grid-template-areas:
"div-1 div-2"
"div-3 div-4"
week 2
4/10
Workshop Typografie & leesbaarheid
Typografie & leesbaarheid
web.dev
verschilt per taal
minimaal 16px groot / 1.2 em
regels met max 10-12 woorden
regel afstand - 1.4
line height - 1.4
vw = percentage van breedte
p{
width:30em} = 10-12 woorden
week 3
10/10
CSS Challenges
Flexbox:
flex = controle over 1 richting
display: flex = naast elkaar
justify-content(horizontaal): start/center/end/space-evenly
align-items(veritcaal): start/center/end
overflow: scroll = scrollen wanneer text/foto's overflowen
flex-shrink: 0 = niet krimpen
flex-direction: row/column
flexboxfroggy.com = flexbox oefenen
Sprint 3
week 1
18/10
Kleur & Contrast
Kleurenblind:
1. gebruik naast kleuren alt. info
2. onderscheidende kleuren
koud & warm contrast
complementair contrast
3. saturatie & brightness
light and dark colours
4. vermijd rood en groen!
Color Contrast Analyser
Hiermee kan je het contrast tussen kleuren checken
week 2
23/10 - 27/10
Vakantie!
week 3
30/10
Visual thinking
Denk-cyclus & Typografie:
Sprint 4
week 1
15/11
Responsive lay-out & Huisstijl
Huisstijl:
kleur gebruik
lettertype
positionering controllers
lay-out
typografie
lijsten
"album covers"
beeld elementen
hover (animaties om iets te laten zien)
grid
Lay-outs:
fixed = size blijft altijd hetzelfde
fluid = word groter/kleiner afhankelijk van scherm
adaptive = verschillend afhankelijk van soort scherm
responsive = past zich aan afhankelijk van schermgrootte
container queries --> stap verder
week 2
20/11
Typografie & Leesbaarheid
Leesbaarheid
goed leesbare tekst = minimaal 16px
browser default = 16px
10-12 woorden per zin
45-70 characters per zin
Regelafstand:
1.4 (140%)
1.2 (browser default line-height)
1.5 - 2
minimaal 1.5 line height
Font:
max 3-4 fonts in huisstijl
relatieve length units: em/rem/vh/vw
Max-width:
...ch = aantal characters(letters)
30em = 10-12 woorden
Toegankelijkheid:
altijd font fallback
geen caps gebruiken(VOORBEELD)
geen "center-text" als je meer dan 3 regels hebt
nooit text-align: justify
goede contrast
22/11
CSS voor styleguides
CSS custom properties:
1. globaal
2. scoped
3. fallback
4. veranderbaar
Naamgeving:
Niet doen❌:
rood
blauw
size
color
Wel doen✅ :
primary-color
secondary-color
font-size
font-color
Structuur in CSS:
1. DRY
2. specificity
3. naamgeving
4. comments
WET & DRY:
WET = write everything twice
DRY = don't repeat yourself
Specificity:
target class names
geen id's voor styling
zo min mogelijk inline styling
geen !important gebruiken
week 2
24/11
Yolijn van der Kolk, NL Design System
We ❤️ Web presentatie
Wat is een design system?
Een online verzameling van herbruikbare visuele componenten met duidelijke richtlijnen.
Voorbeelden van een design system
Community:
samenwerking tussen overheidsorganisaties
samenwerking met leveranciers van overheid
Rekening mee houden:
elk organisatie heeft eigen huisstijl
code en design in sync
open source voor iedereen te gebruiken
Architectuur(tech-stack):
CSS componeten met voorspelbare namen
Design tokens in JSON
Webcomponents waar mogelijk
Framework componenten waar handig
Documentatie in Markdown(soortvan read.me)
Storybook met visuele regressie tests
Voorspelbare naamgeving:
bekend van webstandaarden
Design tokens in lagen:
1. Huisstijl tokens
2. Algemene tokens
3. Component tokens
High contrast mode
1. kleurenpalet
font
border-radius
2. consistentie kleuren gebruik.
font-familie voor heading.
kleuren voor feedback & interactie.
3. denk aan:
bg-kleur van een button.
border-kleur van textbox.
tekst-kleur van card.
Sprint 5
week 1
15/11
week 2
15/12
Julia Miocene, Over CSS
We ❤️ Web presentatie
Why?:
Learn new things
Try new things
Have fun & prevent burn out
Gain skills in a nearby area
Find a creative community
Push technoology forward
Where to start?
Peoples Codepens to visit:
David Khourshid
Ben Evans
Julia Miocene
Steve Gordner
Ana Tudor
Amit Sheen