README
VCL typography
Styling for basic typographical elements.
Features
Usage
Headings
Essential structuring of content with heading elements.
Anchors
Links may be combined with icons using the icogram component like the example below which indicates an external link.
Essential
Feel free to use text tags like b
or i
with the following semantics:
b
is meant to highlight words or phrases without conveying additional
importance while i
is mostly for voice, terms you are referring to, etc.
Abbreviations
Stylized implementation of HTML's abbr
element for abbreviations and
acronyms to show the expanded version on hover.
Abbreviations with a title
attribute have a light dotted bottom border
and a help cursor on hover, providing additional context on hover.
Add the vclInitialism
class to an acronym for a slightly smaller
font size and a transformation to capitals.
Small Caps
Blockquote
A blockquote spanning over multiple lines.
Miscellaneous
Subscripts and Superscripts
Superscripted and subscripted text can for example be used for footnotes or chemical formulas. The same classes can be used for all other text classes as they inherit color and font sizing
Pre-formatted Text
Pre-formatted text using the pre
element is laid out as typed in the source
code i. e. white spaces inside this element are displayed as typed.
Preformatted Code
Classes
vclContentLink
: A link which can carry an vcl-icogram.
Modifiers
vclDisabled
: To disabled links.vclSecondaryTextColor
: The secondary text color.
Variables
Font Settings
--typography-font-family
--typography-font-family-serif
--typography-font-family-monospace
--typography-font-size
--typography-line-height
Modular Scale Variants
--typography-mod-scale-1
--typography-mod-scale-2
--typography-mod-scale-3
--typography-mod-scale-4
--typography-mod-scale-5
--typography-mod-scale-6
Colors and Decorations
--typography-text-color
--typography-link-color
--typography-link-hover-color
--typography-link-text-decoration
--typography-heading-color
--typography-disabled-color
--typography-mark-color
--typography-mark-bg-color
--typography-code-border-color
--typography-code-bg-color
--typography-selected-text-bg-color
--typography-selected-text-color
--typography-blockquote-border-color
Demo
example.html on GH-pages.