Add breakpoints for larger screens

[joostf]

.. or smarter responsive layouts

Preventing long sentences for better readability, for example

[KoopReynders]

Misschien hoeft er geen breakpoint als we dit doen:

Eerste blok:

max-width: 40em;

Tweede en derde blok:

max-width: 30em;

[KoopReynders]

Als de sprints dan ook een max-width krijgen en krijg je wel een aardig dynamisch beeld dat een beetje 'springt'

Sprints:

max-width:25em;

[joostf]

Mooi!

[ju5tu5]

Is dit iets wat we overnemen in de standaard styleguide? Daar hebben we ook nog een oplossing nodig voor grote(re) schermen..

[joostf]

Ik heb het nu voor deze site gefixt, maar mooier als het in de styleguide komt inderdaad

[KoopReynders]

Op de detail pagina, waar de sprint staat met Gedragscriteria en Leertaken mogen deze blokken max-width: 30em krijgen. Nu zijn ze samen even breed als het eerste blok, maar we willen ze een beetje laten sprinten ...

[KoopReynders]

Dan krijg je zoiets:

[KoopReynders]

Wat mij betreft nemen we de layout niet op in de styleguide, maar staan daar kleuren, typo, componenten. Dan kun je per projectje een layout bedenken. Als j nu om de standaar heen wil css-en omdat je een andere layout wil is dat best lastig ...

[ju5tu5]

Ik denk dat we beide kunnen doen en de styleguide splitsen in meerdere bestanden. Je kunt dan een minimale versie linken (bijv. style.minimal.latest.css) met alleen een paar utility classes of de volledige versie zoals nu..

[KoopReynders]

Ik heb een poging gedaan de site geschikt te maken voor verschillende schermen. O.A. door de semesters en het programma horizontaal te laten scrollen. Cool voor nu?

O.a. de grid-layout overruled die op de body en main staat.

(Het is nu wel lastig om te debuggen met de FDND global style)