Typography

Font sizing, padding, margins and line-heights are all set out using rem with a font-size: 62.5%; on the the HTML element. This gives a logical conversion rate on any element and provides consistent font sizing. Meaning 1.4rem = 14px

Headings
Body copy
Inline Elements
Blockquotes
Lists
Code
Address

Headings

All HTML headings, <h1> through <h6> are available natively or explicitly via .h1 to .h6 for when you want to match the font styling of a heading but still want your text to be displayed inline.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Body copy

The default Frontbx font size is 1.45rem (14.5px) with a line height of 1.8. This is applied to the body as well as paragraph tags. Additionally paragraph tags have a bottom margin of 1rem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>...</p>

In addition to standard paragraph tags, Frontbx has added .p1 through .p6 classes for text emphasis.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Paragraph 5

Paragraph 6

<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p3">Paragraph 3</p>
<p class="p4">Paragraph 4</p>
<p class="p5">Paragraph 5</p>
<p class="p6">Paragraph 6</p>

Inline elements

In-line text elements have some very minimal styling applied to ensure they display consistently.

Lorem ipsum dolor sit amet consectetur adipiscing elit
~~Lorem ipsum dolor sit amet consectetur adipiscing elit~~
~~Lorem ipsum dolor sit amet consectetur adipiscing elit~~
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit

<mark>...</mark>
<del>...</del>
<s>...</s>
<ins>...</ins>
<u>...</u>
<small>...</small>
<strong>...</strong>
<em>...</em>
<u>...</u>

Blockquotes

Blockquotes have some very basic styling applied, but stylized versions are available via contextual classes bq-*.

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

<blockquote><p>...</p></blockquote>
<blockquote class="bq-info"><p>...</p></blockquote>
<blockquote class="bq-success"><p>...</p></blockquote>
<blockquote class="bq-warning"><p>...</p></blockquote>
<blockquote class="bq-danger"><p>...</p></blockquote>

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

<blockquote>
    <p>...</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

Some rudimentary list styling allows you to display consistent, simple and attractive looking lists with ease

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua
Ut enim ad minim veniam
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
- Ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

<ul>
    <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua
Ut enim ad minim veniam
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
- Ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

<ol>
    <li>...</li>
</ol>

Inline

Use .list-inline to place all list items on a single line and some light padding.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt

<ul class="list-inline">
    <li>...</li>
</ul>

Unstyled

Strip list styles from a list, no padding or margins.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt

<ul class="list-unstyled">
    <li>...</li>
</ul>

Description

A list of terms with their associated descriptions.

Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.
Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.
Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions line up side-by-side.

Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.
Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.
Lorem ipsum dolor sit amet: Sed do eiusmod tempor incididunt consectetur adipiscing elit.

<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Code

Wrap inline snippets of code with <code>

So you can wrap this .class-name in a code tag.

<p>...<code>...</code>...</p>

Code blocks

Use a <pre> tag for snippets spanning multiple lines. You can also wrap a <code> tag inside a <pre> tag.

.foo
{
    color: red;
}

.foo
{
    color: red;
    background: url('Culpa reprehenderit commodo commodo cillum minim enim aliquip deserunt dolor amet aliquip anim eiusmod dolor.')
}

<pre>...</pre>

<pre><code>...</code></pre>

Address

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

<address>
    <strong>Twitter, Inc.</strong><br>
    1355 Market Street, Suite 900<br>
    San Francisco, CA 94103<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
</address>