Karma CSS

Typography

Font

The base type is Open Sans at 15px over 1.6 line height (24px), html is set to 62.5% so that all the REM measurements throughout Karma CSS are based on 10px sizing. So basically 1.5rem = 15px.

Headings

All heading h1 through to h6 are available.

h1. Karma heading

h2. Karma heading

h3. Karma heading

h4. Karma heading

h5. Karma heading
h6. Karma heading
<h1>h1. Karma heading</h1>
<h2>h2. Karma heading</h2>
<h3>h3. Karma heading</h3>
<h4>h4. Karma heading</h4>
<h5>h5. Karma heading</h5>
<h6>h6. Karma heading</h6>

Use the included utility classes to recreate the small secondary heading text

h1. Karma heading with some small faded text

<h1>h1. Karma heading <small class="muted">with some small faded text</small></h1>

Inline Text

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

You can also insert a link in the text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>You can also insert a <a>link</a> in the text.</p>

Blockquote

Blockquotes have also been styled.

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

<blockquote>
    <p class="margin-zero">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

You can also add additional content and apply additional styles.

Some header

This is some text that has been muted.

<blockquote>
    <h3>Some header</h3>
    <p class="margin-zero muted">This is some text that has been muted.</p>
</blockquote>

Address

Address have basic styles

Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
<address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

Lists

Unordered lists have basic styles

  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
<ul>
    <li>Unordered lists have basic styles</li>
    <li>They use the circle list style
        <ul>
            <li>Nested lists styled to feel right</li>
            <li>Can nest either type of list into the other</li>
        </ul>
    </li>
    <li>Just more list items mama san</li>
</ul>

As well as ordered lists

  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun
<ol>
    <li>Ordered lists also have basic styles</li>
    <li>They use the decimal list style
        <ul>
            <li>Ordered and unordered can be nested</li>
            <li>Can nest either type of list into the other</li>
        </ul>
    </li>
    <li>Last list item just for the fun</li>
</ol>

Horizontal Rule

Some text before the rule


Some text after the rule

<p>Some text before the rule</p>
<hr>
<p>Some text after the rule</p>