Typography module
Frontfire UI provides a rich set of elementary typography styles. These styles are consistent and encourage design best practices without you having to think about it too much.
This module is available in the Minimal and Complete bundles.
Headers
The default HTML header elements are <h1> through <h6>.
They should be used correctly by their semantics, not their appearance.
Most browsers’ default level-1 header has a too big font size which is why many people lazily start their document structure on the 4th level, completely leaving out the document root and the first three levels of structure.
Frontfire comes with smaller header sizes by default to make it easier to use headers correctly without additional styling effort.
The header font sizes can be customised with the --h1-font-size, --h2-font-size, --h3-font-size and --h4-font-size CSS variables.
The header font weight is set with the --header-weight CSS variable.
Header 1
Sample text
Header 2
Sample text
Header 3
Sample text
Header 4
Sample text
Header 5
Sample text
Header 6
Sample text
Without margins
Where a header occurs within a box, like a modal or tab, and its top margin is undesired, remove it with the no-top-margin class.
Similarly, the no-bottom-margin class can be added to an element like <p> that would normally have such a margin.
The combination of both is the no-vertical-margin class.
Header
Sample text
Sample text
Paragraphs
This is a default paragraph with text content, defined with the standard <p> element.
Paragraphs have a vertical margin between each other to make it clear to the user that a separate thought or topic has started.
Alignment
Paragraph content can be aligned to the left side (which is default without any special markup) with the left CSS class, to the right side with the right CSS class, it can be centered with the center CSS class, and it can be justified with the justify CSS class.
Justified alignment only becomes more visible with multiple lines of text in a paragraph. All content lines in the paragraph (except for the last line) will have the same length, regardless of the actual width of the words in a line. This is achieved by evenly distributing the width of all white-space between the words. In very narrow paragraphs and without hyphenation, this can easily lead to highly noticeable inconsistencies in word distance. So use it with care or avoid it entirely.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius orci eu mi tincidunt ullamcorper. Donec pulvinar massa eu purus vehicula, non pharetra odio facilisis. Donec viverra at neque sed ornare. Ut lobortis nisl eu tristique viverra.
Sed auctor lacinia urna, et sollicitudin eros bibendum nec. Sed posuere leo ac erat gravida pulvinar. Cras eget augue vestibulum, egestas sapien quis, scelerisque lacus. Suspendisse faucibus augue neque, quis vestibulum turpis aliquet a.
Donec sit amet elit eget lorem pharetra aliquam eget eget dui. Donec dictum massa nec blandit convallis. Sed felis eros, ornare id venenatis nec, lacinia eget tellus. Phasellus eget nisi vel orci euismod vehicula.
Mauris porttitor orci ac semper luctus. Sed tempor nunc urna, pellentesque eleifend erat euismod nec. Vivamus cursus erat vitae augue tempus, quis fringilla justo dignissim. Proin faucibus, nunc ut ultrices faucibus, nunc massa ultricies nisi, sit amet elementum purus mauris vel nisi. Maecenas ut dolor enim.
Paragraph-like margins
<div> and <table> elements can be given the same vertical margin as <p> by adding the p class to them.
The vertical margin of <p>, <div class="p">, <table class="p"> and <hr> elements can be doubled by adding the double-margin class to them.
Sample text
Sample text with more space around it
Sample text
Change font-size
Any text can be made a bit smaller or larger than the default with the smaller and larger classes, respectively.
Links
Hyperlinks are defined with the <a> element.
They use a blue text colour by default because this is the established UI convention since the beginnings of the web and users can immediately recognise the blue link as clickable and navigatable.
The colour and underlining effect can be configured.
The link colour and text decoration (underline) can be customised with the --link-color and --link-text-decoration CSS variables.
There are also the hover state variants --link-hover-color and --link-hover-text-decoration.
See their descriptions about how to use them.
Disabled links change their appearance as usual in app UIs.
To fully disable a link, add the disabled attribute and remove the href attribute on the <a> element.
You can move the previous href value to the element’s dataset to restore it when enabling the link again.
For convenience, the Frontfire.disabled stashes and restores the href attribute as well.
Separator
Separators with the <hr> element can be used to visually separate content with a horizontal line instead of whitespace.
The double-margin CSS class can be added for double vertical margin just like with paragraphs.
Sample text
Sample text
Lists
- There can be
- unordered lists with the
<ul>element that- only show a single
- bullet graphic
- only show a single
- before each list item.
- Ordered lists with the
<ol>element have numbered - items each with a number increased
- by one. This makes clear that order is relevant
- and allows references to other items by their number.
Code and keys
Blocks of source code can be displayed in a fixed-width font with a <div class="code"> element.
It also sets a background colour to distinguish it from other content, and disables hyphenation.
The white-space handling is not changed by default and should be suitable for external syntax highlighting libraries.
You can, however, set a style like white-space: pre; or use the Frontfire CSS class pre-wrap to preserve line breaks and whitespace unchanged (as do these documentation pages).
Text may also contain inline code with the <code> tag within flow content.
The background colour can be customised with the --code-background CSS variable, the padding of block and inline code with --code-padding and --code-inline-padding, respectively.
Besides code there can also be non-semantically monospace-styled text with the <tt> element (for teletype text).
This has no background colour by default.
The <pre> and <samp> elements look the same.
Monospace font can be applied to <textarea> input elements with the monospace CSS class.
Use the <kbd> element to style labels as keys on the computer’s keyboard.
{
printf("Hello world.\n");
}
This is a sample text that refers to a Class name or a doSomethingClever() function. And here is some text in a fixed-width font.
Press Ctrl+Any to activate some function.
Marking
The <mark> element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context. (Source)
Usually it has a browser-defined fixed appearance of black on yellow.
Frontfire dials down the background colour intensity a little and provides a consistent style for the dark theme.
The mark colour can be customised with the --mark-background and --mark-color CSS variables.
See their descriptions about how to use them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet varius velit, a iaculis erat. Donec quis felis tempus, dapibus tellus mollis, pulvinar eros. Ut id risus massa. Curabitur sed ante ornare urna maximus rutrum ut vitae urna. Nunc non ornare erat.
Aenean at est ipsum. Maecenas pulvinar elementum pharetra. Mauris ut eros pharetra, convallis dui a, lacinia felis. Maecenas sagittis egestas porta. In eget mollis nulla. Suspendisse et finibus urna. Curabitur at ipsum a metus auctor tristique. Aliquam odio tortor, auctor id purus a, mollis commodo nibh. Morbi ornare nibh ut urna consequat, sit amet lacinia diam malesuada. Curabitur vel sapien eget enim tincidunt volutpat fermentum eget nulla. Sed eu eros eu enim consequat suscipit ac eget mauris.
Floating elements
To keep an element out of the vertical area of a floating element, add the clearfix class to it.
This adds a float break before and after the element.
Note:
There are several CSS classes available for aligning images.
In this example, the alignment is shown with inline CSS for better understanding.
Sample text
Sample text besides the image
Sample text below the image
Sticky aside
A floating element can be kept visible in the scrolling viewport and to the side of the content flow.
Define the scope of the aside element by adding the sticky-aside-container CSS class to the parent element.
Then add the sticky-aside class to the side element.
By default there is no visual styling for the side element, but you can give it the appearance of a box or anything you like.
The layout is entirely provided by CSS, there are no JavaScript event handlers used for this.
The default alignment is at the right side.
To move the side column to the left, add the aside-left class to the parent element.
With one of the CSS classes require-minitab, require-tablet, require-desktop and require-wide, the side element is unfloated and the side column
is freed when the screen width drops below the specified required width.
The column width, gap and sticky vertical offset can be customised with the CSS variables that start with “--sticky-aside-”.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget justo eros. Quisque tristique efficitur turpis aliquam cursus. Pellentesque tempor tincidunt odio. Curabitur blandit, elit eget eleifend varius, ex velit convallis ligula, eget interdum elit libero a purus.
Maecenas pharetra iaculis neque ut tristique. Fusce et eros quam. Nulla pellentesque turpis lacus, non congue nisl finibus vel. Sed vitae dui urna. Quisque sollicitudin tincidunt orci a volutpat. Aenean sapien nisl, feugiat eget mattis nec, varius et enim. Suspendisse urna nunc, aliquet eu mauris ac, ultrices venenatis ipsum. Aliquam auctor lacus ex, dictum faucibus lacus pretium quis.
Nulla ultrices felis neque, quis congue urna lacinia eu. Nunc mattis odio velit, et fringilla erat venenatis sit amet. Vivamus pretium dignissim libero, a dictum metus mollis non.
Loading indicator
A loading indicator is a small icon that rotates and informs the user about an ongoing activity. It does not show the progress of the operation. The size and shape of the indicator can be customised with several additional CSS classes:
middle: Vertically centers the indicator with the text line. Normally it is aligned at the bottom which makes the position predictable when used alone without text.small,medium,large: Change the size of the indicator.thin,thick: Change the thickness of the circle line.slow,fast: Let the animation run slower or faster.reverse: Let the animation run in the reverse direction.
Small Medium (Default) Large
Thin Thick Fast Slow Reverse
The indicator colours can be changed with CSS variables.