Typography

Fonts

You can set the fixed main font in the variable.less file. If you want to change font size from fixed to fluid simple add class .fluid-font to the any HTML object. If you add this class to the body tag you change main font size generally.

Example. This block of text has class .fluid-font between the <p> tag. Change your browser resolution in order to see the difference.

Headings

All HTML headings, <h1> through <h6>, are available. Font size is determined as a percentage value from normalize.css.

h1. Skeleton-FX heading

h2. Skeleton-FX heading

h3. Skeleton-FX heading

h4. Skeleton-FX heading

h5. Skeleton-FX heading

h6. Skeleton-FX heading

If you want fluid size headings then to the required tags add class .fluid-heading. The font size will be determined as viewport parameter vw. Change your browser resolution in order to see the difference.

h1. Skeleton-FX fluid heading

h2. Skeleton-FX fluid heading

h3. Skeleton-FX fluid heading

h4. Skeleton-FX fluid heading

h5. Skeleton-FX fluid heading

h6. Skeleton-FX fluid heading

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. Example: User Help.

Blockquotes

Wrap <blockquote> around any HTML as the quote. Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Code

Wrap all your code snippets between inline <code> element. Example: This is simple text. <DIV class="fluid-font"> is a part of code.

Blocks of Code

Use <pre> element for populating multiple lines of code. Inside <pre> you can use other elements with additional classes. Examples:

This text is placed between the <pre> element

Element <pre> with internal HTML elements with class .tag or .tag .title

This text is placed between the <pre> and <span> elements with class .tag

Element <pre> with internal HTML elements with class .attribute, .variable or .rules .property

This text is placed between the <pre>. This is variable: var counter;

Element <pre> with internal HTML elements with class .value, .phpdoc or .formula

This is variable with value: var counter=100;