Typografie

<p class="intro">

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.

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor sub text ut labore et sup text 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.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.


HEADINGS

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet, consectetur elit

H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit

H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis

H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6
<h1 class="style-h6">

Heading 1

<h2 class="style-h5">

Heading 2

<h3 class="style-h4">

Heading 3

<h4 class="style-h3">

Heading 4

<h5 class="style-h2">
Heading 5
<h6 class="style-h1">
Heading 6


<blockquote>

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.


<blockquote class="pull-right" style="font-size:26px; max-width:300px;">

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean

MISC ELEMENTS

<strong>strong
<del> deleted
<dfn> dfn
<em> emphasis

<hr>


<a> anchor
<a> a + href

<abbr> abbr - extended text when mouseover.
<acronym> acronym - extended text when mouseover.

<address>
Donald Duck
Box 555
Disneyland

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.

<pre>
pre  space1
pre  space1
pre    space2
pre    space2
pre tab
pre tab
<code> Not indented indent1 indent1 indent2 indent3 <tt> This tt text should be monospaced and wrap as if one line of text even though the code has newlines, spaces, and tabs. It should be the same size as <p> text.

Lijsten

<ul class="list-bullets">
  • Unordered list test
  • Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Yet another element in the list
  • Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<ol class="list-numbers">
  1. Ordered list
  2. Here's a nested unordered list
    • Nested Unordered list
    • Nested ordered list
      1. The first
      2. And the second
  3. Ordered List item
  4. Nested Ordered list
    1. Some point
    2. Nested Unordered list
      • The first
      • And the second
<dl / dt dd>
definition list dt
definition list dd
definition list dt
definition list dd
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

Tabellen

<table>
Optionele table 'caption'
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Knoppen

<a class="btn-primary">
btn-primary
<a class="btn-ghost">
btn-ghost
<a class="btn-arrow">
btn-arrow

Grid systeem

Er is een 12-kolommen grid op het blog geconfigureerd. Dit kan je gebruiker door een .row <div> toe te voegen, met hierin .spanX div's. Kijk hieronder voor een voorbeeld.

3 kolommen grid voorbeeld:
Voor een 3-col grid, heb je 3 x een span4 div nodig. (3 x 4 = 12)

<div class="row">
	<div class="span4">
		Col #1
	</div>
	<div class="span4">
		Col #2
	</div>
	<div class="span4">
		Col #3
	</div>
</div>

Wordt weergegeven als:

Col #1
Col #2
Col #3

Compleet grid voorbeeld

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