FDND Styleguide

Kleuren

White (--white)

#ffffff

Blueberry (--blueberry)

#050542

Turqoise (--turquoise)

#66e5bf

Lavender (--lavender)

#a675f5

Layout

Flexbox

Grid

Typografie

Heading 2 (1x per section/article)

Heading 3

Heading 4

Dit is een kale alineatekst. De Ad Frontend Design & Development (FDND) is een praktijkgerichte, tweejarige hbo-opleiding waar studenten in worden opgeleid tot Frontend professionals. Frontenders ontwerpen en maken interactieve, toegankelijke toepassingen voor het web. Dit maakt dat een frontender opereert binnen het gebied van software development, interactieontwerp en digitaal visueel ontwerp.

Dit is een text link, deze kunnen worden toegepast in een alinea of

Op zichzelf staand

Dit zijn twee afkortingen: Ad FDND. Qua opmaak veranderd er niets maar je kunt erover hoveren om de title te zien.

Dit is een b(ring to attention) element, gebruik deze om aandacht te vestigen zonder semantische waarde.

Dit is een inline cite element.

Dit is een inline code element: mv ./public_html/super.html ./public_html/awesome.html.

Dit is een em(phasize) element, hiermee wordt semantische nadruk gelegd. Kan genest worden, elk niveau krijgt dan extra nadruk.

Dit hieronder is een image:

640x480 placeholder image

Dit is een i(diomatic text) element, gebruik deze voor technische terminologie, jargon etc. zonder semantische waarde.

Dit is een (ge)mark(eerd) stuk tekst.

Dit is een inline quote.

Dit is een strong(ly) benadrukt element met sterke urgentie qua semantiek.

Dit is superschrift en dit is subschrift voor voetnoten of verwijzing.

Dit is een time element

  1. Dit is een
  2. geordende
  3. lijst items.

Formulieren

De opmaak van standaard formulieritems (inputs/textarea/buttons) staat in fdnd.css afwijkende zaken voor dit specifieke formulier staan in local.css

Richtlijnen voor het opmaken van een formulier:

Aanmeldformulier

Persoonlijke informatie
Contact informatie

Beeld

Een selectie van beeldmateriaal dat gebruikt kan worden voor FDND.

640x480 placeholder image 1024x768 placeholder image 1280x1024 placeholder image

Over

Deze styleguide is mede tot stand gekomen door Lukas van Driel van Q42! Hij deelde zijn werkwijze en een aantal styleguides van projecten die model hebben gestaan voor onze styleguide.