Typography

ViUR Ignite CSS supports the Your Body Text Is Too Small standard.

  • The body font size is dependent on the display-size.
  • Objects use a font size based on the body — using »rem« (root em).
  • Inline elements and types should react to their direct surroundings — thus using »em«.

Headlines and sublines

These are the standard headlines.

The headline! Use only one on every page (h1)

Second level headline (h2)

Third level headline (h3)

Fourth level headline (h4)

Fifth level headline (h5)
Sixth level headline (h6)

The subline to your headline! (h1)

Second level subline (h2)

Third level subline (h3)

Fourth level subline (h4)

Fifth level subline (h5)
Sixth level subline (h6)

Please style your own headlines with the help of classes (e.g.: .headline, .subline) in your style.less file.

Don't use a h1 more than once whether it is a .headline or .subline.

Body text

This is an example of a body text. The first paragraph is emphasized with .lead

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Inline text elements

This is an example of inline text elements.

This line is rendered as bold text.

This line is rendered as italicized text.

H2O, this is a sub and a super text2.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as an addition to the document.

This line of text is meant to be treated as fine print.

This line has an inline code element.

Press ctrl + S to save your document.

Press ctrl + N to create a new document.

Block text elements

This is an example of block text elements.

This block is a pure codeblock
on multiple lines
to represent code.

Blockquote

This is an example of a blockquote.

Perl is worse than Python because people wanted it worse.

Larry Wall - creator of the Perl programming language

Unordered Lists

Here is an example of an unordered list.

  • Make a list
    • Check it twice
      • One!
      • Two!
    • Check it again
  • …
  • Profit!

Ordered List

Here is an example of an ordered list.

  1. Make a list
    1. Check it twice
      1. One!
      2. Two!
    2. Check it again
  2. …
  3. Profit!