Buurtcampuskrant - Styleguide

Dit is de styleguide voor het project Buurtcampuskrant. Hierin zijn een aantal huisstijl onderdelen gedefinieerd.

Gebruik de volgende gedeelde stylesheet binnen je eigen project: <link rel="stylesheet" href="https://toasterbath0758.github.io/look-and-feel-styleguide-BCK/styleguide-buurtcampuskrant.css"

Kleuren

Bij het onderdeel kleuren staat het kleurgebruik.

rgb(180 189 208)
primary-color-main
rgb(8 91 100)
primary-color-zuidoost
rgb(51 52 103)
primary-color-oost
rgb(109 125 57)
primary-color-nieuw-west
rgb(234 91 12)
accent-color

Typografie

Bij het onderdeel typografie worden fonts en groottes gedemonstreerd.

Kop 1 - Titel: 2.8 rem
Wordt gebruikt voor verticale tekst in de Buurtcampuskrant font en logo

Kop 2 - Subkop: 1.8 rem
Wordt gebruikt voor titels van *artikelen* en blockquotes(italic).

Kop3 - navigatie:
gebruikt voor de links in de navbar

Kop 4 - Intro: Wordt gebruikt voor intros van artikelen.

Kop 5 - Plaintext: Wordt gebruikt voor inhoudelijke teksten.

Kop 6 - Figcaption: 0.8 rem
Wordt gebruikt voor beschrijvingen voor afbeeldingen.

Simpele alinea's

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Geordende lijsten met items
  2. Met nog meer items
  3. En nog een item
Tabelkop Tabelkop Tabelkop Tabelkop
Tabeldata Tabeldata Tabeldata Tabeldata
Tabeldata Tabeldata Tabeldata Tabeldata
Tabeldata Tabeldata Tabeldata Tabeldata
Tabeldata Tabeldata Tabeldata Tabeldata
Tabeldata Tabeldata Tabeldata Tabeldata

'Dit is een quote, met een specifieke styling. Standaard wordt deze ingesprongen door de browser.'

Formulier elementen

Bij het onderdeel formulier elementen worden input, radio, checkbox en buttons gedemonstreerd.

Radio options:
Checkbox