version 1.1

Uncode Styleguide

inspired by the client first work method.

structure classes

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-large
padding-section-medium
btn-group

grids

2col_grid
3col_grid
4col_grid
5col_grid

html tags

H1

Dit is een heading

H2

Dit is een heading

H3

Dit is een heading

H4

Dit is een heading

other HTML tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All quotes

Dit is een heading

All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

text sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present.

text-size-small

Sample text is being used as a placeholder for real text that is normally present.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present.

colors

background colors

bg-color-black--700
bg-color-black--600
bg-color-black--500
bg-color-black--400
bg-color-black--300
bg-color-black--200
bg-color-black--100
bg-color-black--50

text colors

color-black--700
This is some text inside of a div block.
color-black--600
This is some text inside of a div block.
color-black--500
This is some text inside of a div block.
color-black--400
This is some text inside of a div block.
color-black--300
This is some text inside of a div block.
color-black--200
This is some text inside of a div block.
color-white
This is some text inside of a div block.

paddings

direction classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

size classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

margins

directional classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

margin size classes

marin-0
marin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge

webflow elements

form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
rich-text

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • This is a list item
  • This is a list item
  • This is a list item

custom code classes

white-text-outline

custom code classes

interaction classes

interaction_fade-in-up
[element-trigger]-[interaction]
De overheid faalt steeds vaker om haar eigen beleid uit te voeren. Of het nou gaat om haar kerntaken, zoals het hervormen van ons belastingstelsel, of het opzetten van een fatsoenlijke compensatieregeling voor de toeslagenouders. Politieke compromissen zijn zwaarbevochten, maar stranden vervolgens in de uitvoer.
De reden daarvoor is vaak dezelfde: de IT-systemen van de overheid zijn verouderd. Ze zijn geprogrammeerd in achterhaalde talen die bijna niemand meer beheerst, of ze zijn simpelweg niet bijgehouden. Het zijn wankele kaartenhuizen die niemand meer durft aan te raken, uit angst dat ze bij de kleinste aanpassing in elkaar storten. Als gevolg blijven nieuwe regelingen op de plank liggen en staat de overheid stil.
Dat moet anders. IT is een kerncompetentie van de overheid, en zal de komende decennia alleen nog maar belangrijker worden. Een toekomstbestendige overheid loopt niet achter, maar op de zaken vooruit. Daarom roepen wij de politiek op om serieus te gaan investeren in IT-renovatie, en de technische schuld af te bouwen naar net-zero in 2030.
Daarnaast is het noodzakelijk dat we een omgeving creëren waarin IT-talent de ruimte krijgt om te bouwen. Wij geloven dat dit het beste kan door IT'ers bij elkaar te zetten, zonder de bagage van oude systemen en onnodige bureaucratische hoepels. Naar voorbeeld van het Verenigd Koninkrijk kunnen we een Digital Service oprichten, die waar mogelijk digitale infrastructuur centraliseert. Zo hoeven gemeenten niet keer op keer het wiel opnieuw uit te vinden.
Beleidsdepartementen zoals de Belastingdienst moeten er juist een kleinere, digital-first uitvoeringsorganisatie bij krijgen. Deze kan nieuwe  regelingen oppakken als de gewone uitvoerder capaciteit mist, en tegelijkertijd verouderde modules vervangen. Zo heeft de overheid niet alleen olietankers, maar ook speedboats. Door alternatieve routes te creëren binnen de overheid voorkomen we bovendien dat regelingen bij private bedrijven moeten worden neergelegd, waardoor kennis en expertise weglekken, en de overheid afhankelijk raakt van dure consultants.
Het is tijd dat we de digitale stilstand doorbreken.

Beleidsvoorstellen

  • Maak de landschapsanalyse van IT systemen openbaar. De Belastingdienst beschikt over gegevens over de exacte staat van het IT landschap. Laat uitvoerders dergelijke cijfers aan de Tweede Kamer sturen zodat deze over objectieve gegevens beschikt.
  • Vraag een meerjarige begroting voor modernisering waarmee de technische schuld afbouwt. De Belastingdienst werkt op het ‘kasstelsel’ waarbij geld ieder jaar wordt verdeeld en meerjarige projecten tussentijds hun financiering kunnen verliezen. Zonder financiële zekerheid kan men vaak niet beginnen met moderniseren. Binnen het ‘kasstelsel’ wordt vaak prioriteit gegeven aan korte termijn projecten. Laat uitvoerders zich daarom committeren aan een meerjarenbegroting met voldoende modernisering.
  • Maak berekeningen en modellen ‘open source’. Cruciale modellen, zoals van het CPB en fraude-selectie algoritmes van de Belastingdienst, zijn belangrijk voor de maatschappij, maar nergens beschreven of inzichtelijk. Modellen en berekeningen moeten ‘open source, tenzij’, waarbij alleen op grond van veiligheidsrisico's of privacywetgeving code en data niet openbaar mogen worden gemaakt.
  • Knip de ontwerpfase en uitvoeringsfase op in 2 delen. Zorg ervoor dat een team binnen de overheid strak definieert hoe projecten technisch uitgevoerd moeten worden, met focus op laagdrempelig onderhoud & portabiliteit. Hiermee voorkomen we permanente afhankelijkheid van de origineel uitvoerende partij. 
  • Maak projecten zoveel mogelijk open source, zodat de overheid geen afhankelijkheid opbouwt van intellectueel eigendom van leveranciers.
  • Zorg ervoor dat ook kleine bedrijven met expertise mee kunnen doen bij aanbestedingen.

De bestuurders die over wetten beslissen, de medewerkers die de wetten uitwerken en de uitvoeringsorganisaties die ze moeten implementeren leven langs elkaar heen. De uitvoering mag niet meedenken met de prioriteiten noch de wetgeving, waardoor zij vaak geconfronteerd worden met onuitvoerbare wetgeving en tijdlijnen. Beleidsdepartementen gooien wetgeving ‘over de schutting’ en kennen de details van de uitvoering niet.

  • Werk het ontwerp voor de uitvoering gelijktijdig uit met de wetgeving. Alle departementen moeten technisch personeel in dienst hebben met kennis van de relevante IT-systemen. Zij werken een ‘uitvoeringsontwerp’ uit met de schrijvers van de wetgeving. Hierdoor worden obstakels voor de uitvoering tijdig gesignaleerd en kan er worden bijgestuurd.
  • Maak beleidsdepartementen mede-verantwoordelijk voor de uitvoering.  Beleidsdepartementen die wetgeving voorstellen zijn ook verantwoordelijk voor de uitvoering. Hun eigen personeel moet meebouwen met de uitvoerder aan de regelingen, zodat het beleidsdepartement zelf leert wat uitvoerbaar is en wat niet.
  • Geef experts in de uitvoering betere beloningen en status. Digitaal toptalent komt in het schalensysteem van ambtenaren vast te zitten, omdat alleen managers en procescoordinatoren opgaan voor hogere schalen. Er moet een pad komen waarmee toptalent door kan groeien naar het niveau van Directeur-Generaal.

Tijdens de Corona-crisis was er acute noodzaak voor een ‘Corona-melder’ app. De crisis-situatie leidde tot een radicaal nieuwe aanpak: een klein aantal IT-experts (uit de private sector) kreeg de opdracht om deze te bouwen. Het resultaat? De app was op tijd klaar voor minder dan het budget. Hoe kan dit? Deze ad-hoc organisatie had niet de bagage van decennia aan verouderde IT, processen en interne politiek. Laten we deze werkwijze herhalen. Geef een kans aan een nieuwe generatie uitvoerders om regelingen te implementeren waar bestaande uitvoerders geen tijd of ruimte voor hebben. Bijvoorbeeld om regelingen te bouwen voor nieuwe projecten, of om oude modules te renoveren.

Geef een kans aan nieuwe, missie-gebonden uitvoerders

  • Toen Cornelis Lely de Afsluitdijk wilde bouwen, was Rijkswaterstaat duidelijk in haar oordeel: onuitvoerbaar en onwenselijk. Toch zijn de Afsluitdijk en de provincie Flevoland er gekomen. Hoe? Lely drong aan op de oprichting van de ‘Dienst der Zuiderzeewerken’ die het project hebben uitgevoerd.
  • In de statuten van de Dienst der Zuiderzeewerken was vastgelegd dat zij zich zou opheffen wanneer haar taak voltooid was.
  • Het nieuwe kabinet en Kamer kunnen bij belangrijke regelingen die vastlopen in de uitvoering vragen om te onderzoeken of de regeling uitgezet kan worden bij een nieuwe, missie-gebonden uitvoerder, zoals bijvoorbeeld ‘Dienst Modernisering Omzetbelasting’ of ‘Uitvoeringsdienst Prijsplafond’.
  • Maak de landschapsanalyse van IT systemen openbaar. De Belastingdienst beschikt over gegevens over de exacte staat van het IT landschap. Laat uitvoerders dergelijke cijfers aan de Tweede Kamer sturen zodat deze over objectieve gegevens beschikt.
  • Vraag een meerjarige begroting voor modernisering waarmee de technische schuld afbouwt. De Belastingdienst werkt op het ‘kasstelsel’ waarbij geld ieder jaar wordt verdeeld en meerjarige projecten tussentijds hun financiering kunnen verliezen. Zonder financiële zekerheid kan men vaak niet beginnen met moderniseren. Binnen het ‘kasstelsel’ wordt vaak prioriteit gegeven aan korte termijn projecten. Laat uitvoerders zich daarom committeren aan een meerjarenbegroting met voldoende modernisering.
  • Maak berekeningen en modellen ‘open source’. Cruciale modellen, zoals van het CPB en fraude-selectie algoritmes van de Belastingdienst, zijn belangrijk voor de maatschappij, maar nergens beschreven of inzichtelijk. Modellen en berekeningen moeten ‘open source, tenzij’, waarbij alleen op grond van veiligheidsrisico's of privacywetgeving code en data niet openbaar mogen worden gemaakt.