Styleguide Van der Valk

Website elementen

Het 40 pixel grid

Voor de websites van Van der Valk is een grid-systeem van 40 pixels gekozen. Door de vele content die op de Van der Valk websites staat is er veel ruimte en rust nodig om alle content voldoende aandacht te geven. De 40 pixels tussenruimte zorgt daar voor.

Adaptief

Het 40px grid is adaptief, dat wil zeggen dat het zich aanpast aan de hoeveelheid schermbreedte die de pagina tot zijn beschikking heeft. Mobiele weergave bijvoorbeeld, neemt zoveel blokken van 40px naast elkaar als dat er passen. Tablet-staand reserveren we een vast aantal blokken voor, die binnen de resolutie van staande tablets passen. En zo geldt dat ook voor desktop.

Typografie

Hieronder Zie je hoe de verschillende fonts voor Van der Valk worden toegepast op de Van der Valk websites.

Standaard stijlen

  • Melbourne, font-weight: bold, font-size: 36px, line-height: 48px, color: #000000;

    h1: The quick brown fox jumps over the lazy dog

  • Melbourne, font-weight: bold, font-size: 24px, line-height: 36px, color: #000000;

    h2: The quick brown fox jumps over the lazy dog

  • Melbourne, font-weight: bold, font-size: 18px, line-height: 30px, color: #000000;

    h3: The quick brown fox jumps over the lazy dog

  • PT Sans, font-weight: normal, font-size: 16px, line-height: 24px, color: #333333;

    p: The quick brown fox jumps over the lazy dog. Donec pretium elit eu ipsum malesuada quis imperdiet massa pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed scelerisque ligula id mi sollicitudin non fermentum leo lobortis. Integer placerat nisi vitae ante interdum faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nullam eleifend feugiat dui at malesuada. Ut neque nunc, ultrices at rhoncus vel, viverra nec tellus. Mauris nulla dui, porttitor nec volutpat quis, pharetra non urna.

    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nullam eleifend feugiat dui at malesuada. Ut neque nunc, ultrices at rhoncus vel, viverra nec tellus. Mauris nulla dui, porttitor nec volutpat quis, pharetra non urna.

  • PT Sans, font-weight: normal, font-style: italic, font-size: 16px, line-height: 24px, color: #B5B5B5;

    a: Lees meer

Standaard stijlen diapositief

  • Melbourne, font-weight: bold, font-size: 36px, line-height: 48px, color: #000000;

    h1: The quick brown fox jumps over the lazy dog

  • Melbourne, font-weight: bold, font-size: 24px, line-height: 36px, color: #000000;

    h2: The quick brown fox jumps over the lazy dog

  • Melbourne, font-weight: bold, font-size: 18px, line-height: 30px, color: #000000;

    h3: The quick brown fox jumps over the lazy dog

  • PT Sans, font-weight: normal, font-size: 16px, line-height: 24px, color: #333333;

    p: The quick brown fox jumps over the lazy dog. Donec pretium elit eu ipsum malesuada quis imperdiet massa pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed scelerisque ligula id mi sollicitudin non fermentum leo lobortis. Integer placerat nisi vitae ante interdum faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nullam eleifend feugiat dui at malesuada. Ut neque nunc, ultrices at rhoncus vel, viverra nec tellus. Mauris nulla dui, porttitor nec volutpat quis, pharetra non urna.

    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nullam eleifend feugiat dui at malesuada. Ut neque nunc, ultrices at rhoncus vel, viverra nec tellus. Mauris nulla dui, porttitor nec volutpat quis, pharetra non urna.

  • PT Sans, font-weight: normal, font-style: italic, font-size: 16px, line-height: 24px, color: #B5B5B5;

    a: Lees meer