Delaware: The Art of Typography

Delaware includes several short codes to help you with typography on your site. THere are headings, dropcaps, highlights, underline, block quotes, and lists. With these options you can ensure that the typography on your site is stylized and looks sharp.


1. Headings

Example of H1 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

Example of H2 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

Example of H3 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

Example of H4 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

Example of H5 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

Example of H6 Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.


2. HTML Styles

Lorem ipsum dolor sit amet, Strike adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor lacus. Mauris sit amet augue in odio venenatis interdum. Cras auctor Italic Text velit, non feugiat dolor semper non. Bold Text Proin quis felis gravida justo vehicula congue. Etiam pellentesque faucibus justo, vitae ornare magna elementum nec. Vestibulum sed magna lorem. Etiam non felis magna. Cras tristique viverra lorem, Theme Color Text ac congue odio pharetra sollicitudin. Integer elementum mollis nisl, ac placerat ante consequat congue. Fusce scelerisque adipiscing euismod. Underline Text Donec pharetra pellentesque ligula, id elementum mi aliquet nec. Vivamus arcu mauris, condimentum sed rutrum vitae, tincidunt viverra risus. Duis augue magna, semper convallis lobortis vel, euismod non nibh.


3. Dropcaps

L orem ipsum dolor sit amet, Strike adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor lacus. Mauris sit amet augue in odio venenatis interdum. Cras auctor Italic Text velit, non feugiat dolor semper non. Bold Text Proin quis felis gravida justo vehicula congue. Etiam pellentesque faucibus justo, vitae ornare magna elementum nec. Vestibulum sed magna lorem. Etiam non felis magna. Cras tristique viverra lorem, ac congue odio pharetra sollicitudin. Integer elementum mollis nisl, ac placerat ante consequat congue. Fusce scelerisque adipiscing euismod. Underline Text Donec pharetra pellentesque ligula, id elementum mi aliquet nec. Vivamus arcu mauris, condimentum sed rutrum vitae, tincidunt viverra risus. Duis augue magna, semper convallis lobortis vel, euismod non nibh.

L orem ipsum dolor sit amet, Strike adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor lacus. Mauris sit amet augue in odio venenatis interdum. Cras auctor Italic Text velit, non feugiat dolor semper non. Bold Text Proin quis felis gravida justo vehicula congue. Etiam pellentesque faucibus justo, vitae ornare magna elementum nec. Vestibulum sed magna lorem. Etiam non felis magna. Cras tristique viverra lorem, ac congue odio pharetra sollicitudin. Integer elementum mollis nisl, ac placerat ante consequat congue. Fusce scelerisque adipiscing euismod. Underline Text Donec pharetra pellentesque ligula, id elementum mi aliquet nec. Vivamus arcu mauris, condimentum sed rutrum vitae, tincidunt viverra risus. Duis augue magna, semper convallis lobortis vel, euismod non nibh.


4. Highlights

Lorem ipsum dolor sit amet, Strike adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor lacus. Mauris sit amet augue in odio venenatis interdum. Cras auctor Italic Text velit, non feugiat dolor semper non. Bold Text Proin quis felis gravida justo vehicula congue. Etiam pellentesque faucibus justo, vitae ornare magna elementum nec. Vestibulum sed magna lorem. Etiam non felis magna. Cras tristique viverra lorem , ac congue odio pharetra sollicitudin. Integer elementum mollis nisl, ac placerat ante consequat congue. Fusce scelerisque adipiscing euismod. Underline Text Donec pharetra pellentesque ligula, id elementum mi aliquet nec. Vivamus arcu mauris , condimentum sed rutrum vitae, tincidunt viverra risus. Duis augue magna, semper convallis lobortis vel, euismod non nibh.


5. Blockquote

Lorem ipsum dolor sit amet, Strike adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor lacus. Mauris sit amet augue in odio venenatis interdum.

Cras auctor Italic Text velit, non feugiat dolor semper non. Bold Text Proin quis felis gravida justo vehicula congue. Etiam pellentesque faucibus justo, vitae ornare magna elementum nec.

Vestibulum sed magna lorem. Etiam non felis magna. Cras tristique viverra lorem, ac congue odio pharetra sollicitudin. Integer elementum mollis nisl, ac placerat ante consequat congue. Fusce scelerisque adipiscing euismod. Underline Text Donec pharetra pellentesque ligula, id elementum mi aliquet nec. Vivamus arcu mauris, condimentum sed rutrum vitae, tincidunt viverra risus. Duis augue magna, semper convallis lobortis vel, euismod non nibh.


6. Custom Lists Powered by Font Awesome

  • Bulleted lists (like this one)
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
  • …and many more with custom CSS

Easily replace individual bullets.

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

7. Ordered & Unordered Lists

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

8. Fluid grid system

One Half

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

One Half

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

One Third

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

One Third

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

One Third

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

One Third

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

Two Third

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

One Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

One Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

One Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

One Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

One Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Three Fourth

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.