Typography
ViUR Ignite CSS supports the 100% Easy to read standard.
- The body font size is 100% (roughly 16px).
- 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)
A minor headline. Use them as often as you like. (h2)
A subline to your headline. (h3)
All other headlines. (h4, 5, 6)
Please style your own headlines with the help of classes (e.g.: .headline
, .subline
) in the project.less file.
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.
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 is pure code.
Blockquote
This is an example of a blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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.
- Make a list
- Check it twice
- One!
- Two!
- Check it again
- …
- Profit!