Layout (grid)
grid__full
grid__extended (1 col marge)
grid__container
grid__md
grid__sm
grid__xs
grid__xxs
Kleuren
absolute
dark-blue
#0c3f6c
sky-blue
#009fe3
baby-blue
#e5f0f5
green
#95c11f
magenta
#a61f5e
black
#1a1a1a
white
#fff
gray-light
#f5f5f5
gray-dark
#7d7d7d
error
#f00
contextual
$top_menu_item_color
$color-dark-blue
$top_menu_item_hover
$color-sky-blue
primary
$color-green
secondary
$color-magenta
border
$color-gray-dark
body
$color-dark-blue
bullets
$color-dark-blue
link
$color-dark-blue
link-hover
$color-dark-blue
Icons / Wordpress basis
- Maak een Icomoon set,
download en plaats de inhoud in
/assets/source/misc/icomoon. Zorg dat je bij het downloaden even de setting 'Generate Sass, Less or Stylus variables' eenmalig aanzet. Nieuwe iconen komen dan zonder verdere configuratie beschikbaar in je project. - In scss:
.selector::before { content: $icon-home; } - In html:
{{ '' }}
- icon-angle-down $icon-angle-down
- icon-angle-left $icon-angle-left
- icon-angle-right $icon-angle-right
- icon-check $icon-check
- icon-plus $icon-plus
- icon-minus $icon-minus
- icon-clock $icon-clock
- icon-medal $icon-medal
- icon-star $icon-star
- icon-monitor $icon-monitor
- icon-play $icon-play
Fonts
Primary - 400 Primary - 700 Secondary - 400 Secondary - 700Headings
H1 Large - Lorem ipsum dolor sit amet
H1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H3 Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H4 Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Body text H3,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem.
Introduction text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
Blockquote
‘Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit’
- Cras mattis consectetur purus.
Unordered and ordered lists
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
- Labore laudantium minima nisi nulla
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
- Labore laudantium minima nisi nulla
Links
Cards
Card
Guide
Form elements
Open sollicitatie
"*" geeft vereiste velden aan