Typography

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

  • The body font size is depending on the display-size.
  • Objects use a font size based on the body — using »rem« (root em).
  • Inline elements and type 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 .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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Text Alignments

You can change the text alignment of an element by adding .txt-left, .txt-right, .txt-center or .txt-justify to an element.

This text is left-aligned. 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.

This text is right-aligned. 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.

This text is center-aligned. 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.

This text is justified. 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.

Text Transformation

You can change the text transform of an element by adding .txt-lowercase, .txt-uppercase or .txt-capitalize to an element.

Lowercased text.

Uppercased text.

Capitalized text.

Inline text elements

This is an example of inline text elements.

This line rendered as bold text.

This line rendered as italicized text.

H2O, this is sub and 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. Profit!
  1. Maecenas sed diam eget risus varius blandit sit amet non magna.
  2. Cum sociis natoque penatibus et magnis dis parturient montes
  3. Nisi erat porttitor ligula.