Style Guide 1.0

Table

First Name Last Name Job Title Favorite Color Date of Birth
James Matman Chief Sandwich Eater Lettuce Green January 13, 1979
The Tick Crimefighter Sorta Blue July 19, 1968
Cindy Beyler Sales Representative Red July 5, 1956
Captain Cool Tree Crusher Blue December 13, 1982

Colors

Page layouts

wp-includeswp-cron.phpwp-blog-header.phpwp-signup.phpwp-config.phpwp-login.phpxmlrpc.phpwp-mail.phplicense.txtwp-trackback.phpwp-load.phpwp-links-opml.phpwp-activate.phpwp-settings.phpreadme.htmlwp-adminwp-contentwp-config-sample.phpnginx.conf.gitignorewp-comments-post.php

Branding

    Touchscreen icon's & favicons
  • Microsoft Touch icon
  • Apple Touch icon
  • Apple Touch icon
  • favicon-bureaublad
  • favicon

Typography

Heading h1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

Heading h2

Heading h3

Heading h4

Buttons

Call to action
<a href="" title="C2A">Call to action</a> <button>Normal</button> <button class="btn-good">Success</button> <button class="btn-bad">Alert</button> <button class="btn-outline">Outline</button> <button class="btn-disabled">Disabled</button> <button class="xsmall">xsmall</button> <button class="small">small</button> <button>medium</button> <button class="large">large</button> <button class="xlarge">xlarge</button>

Alerts

x Primary! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum eaque optio ea aperiam.
x Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum eaque optio ea aperiam.
x Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum eaque optio ea aperiam.
x Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum eaque optio ea aperiam.

Icons

  • f=f
  • < = <
  • x = X
  • [ = pijl
  • ] = pijl
  • > = >
  • = = =
<span class="icon">T</span> = Twitter <span class="icon">Y</span> = YouTube etc...

Form

Gridd

1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
3
7
4
6
5
5
6
4
7
3
8
2
9
1
10

List styles

    Orderered list
  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
    Unordered list
  • Number 1
  • Number 2
  • Number 3
  • Number 4
 
w

h