Styles

Tyfy includes style customizations for block and inline HTML elements used in typographic design. In addition, custom classes are defined for additional typographic enhancement.

Examples

Sample Tag.Class Description
Bold text b
strong		 Bold text
Italic text em
i		 Italic text
Code code Text describing computer code
Code, no background code.code-nobg The code tag with no background color 
Preformatted
 pre Preformatted text
Small small Small text; makes text one scale step smaller
hr Horizontal rule; the thickness is $tywidth-border; the color is $tycolor-border
Light .light Lighter text; the color is $tycolor-text-light
Small Caps span.smallcaps Small caps text
Button .tybutton Text as a button
Outlined .tybutton-outline Text as an outlined button
Drop cap span.dropcap A decorative drop cap
Sans-serif font .tyfont-sans Display text using the $tyfont-sans font
Serif font .tyfont-serif Display text using the $tyfont-serif font
Monospace font .tyfont-mono Display text using the $tyfont-mono font

Special Case: Horizontal Rule

The horizontal rule (<hr>) has unique margin styles. While all other elements in the framework inherit by the adjacent sibling margin styles, the horizontal rule is given both top and bottom margin. This exception is justified by the purpose of the horizontal rule, which is to act as a separator between other elements.

The top and bottom margins are equal to tyspacing(lg). The margins are applied in two cases: