KARMA CSS

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>

Custom Headings

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 can also be added.


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:[email protected]">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

Unordered Lists

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>

Ordered Lists

As well as ordered lists do


  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>

Inline Lists

Lists can also be put inline with adding some simple classes list-style-none and inline. You may also wish to add some margin-right to the li's but we are not setting a default.


  • List item one
  • List item two
  • List item three

<ul class="list-style-none">
    <li class="inline">List item one</li>
    <li class="inline">List item two</li>
    <li class="inline">List item three</li>
</ul>

Horizontal Rule

A horizontal rule has some basic styling.

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>