Base

The foundation of all HTML elements for Clique.UI

The Base componenet of Clique.UI is the foundation for all HTML elements, componenets, and structural layout models. It sets the default font styles, box-model properties, and colors for all elements that could be found on a webpage.

Clique.UI is build on top of, and reset by, Normalize.css, but unlike most front-end frameworks which simply include the Normalize.css file, we've chopped it up and have included the reset properties in each of it's own components. This was done to maintain performance standards and keep the framework as slim as possible.


Headings

Use the <h1> to <h6> elements to define your headings, or add the .h1, .h2, .h3, .h4, .h5 or .h6 class to any element to apply the corresponding font properties.

Usage

  • h1 Element

    h1 Element

    h1 Element

    h1 Element

    h1 Element
    h1 Element

    p.h1 Element

    p.h2 Element

    p.h3 Element

    p.h4 Element

    p.h5 Element

    p.h6 Element

  • 
    <h1>h1 Heading 1</h1>
    <h2>h2 Heading 2</h2>
    <h3>h3 Heading 3</h3>
    <h4>h4 Heading 4</h4>
    <h5>h5 Heading 5</h5>
    <h6>h6 Heading 6</h6>
    
    
    <p class="h1">h1 Heading 1</p>
    <p class="h2">h2 Heading 2</p>
    <p class="h3">h3 Heading 3</p>
    <p class="h4">h4 Heading 4</p>
    <p class="h5">h5 Heading 5</p>
    <p class="h6">h6 Heading 6</p>
    

Paragraphs & Body Text

The global font-size, line-height and regular margins between elements are set with LESS variables, which can be customized. Paragraphs and other block elements stick to these values.

Property Default Value Common Computed Value
font-weight normal 400
font-size 14px 14px
line-height 1.42857143 20px
font-family "Helvetica Neue", Helvetica, Arial, sans-serif The value inherits the first available family listed in the stack.

Text-level semantics

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

Blockquotes

Usage

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    Someone famous
  • <blockquote>
        <p>...</p> <!-- Quotation -->
        <small>...</small> <!-- Source -->
    </blockquote>

Code blocks

For multiple lines of code, use the <pre> element which defines preformatted text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.

IMPORTANT Be sure to escape any angle brackets in the code for proper rendering.

Example

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

Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

Usage

    • Item 1
    • Item 2
      • Item 1
      • Item 2
        • Item 1
        • Item 2
    • Item 3
    • Item 4
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
        1. Item 1
        2. Item 2
    3. Item 3
    4. Item 4
  • <ul>
        <li>...</li>
        <li>...
            <ul>
                <li>...</li>
            </ul>
        </li>
    </ul>
    <ol>
        <li>...</li>
        <li>...
            <ol>
                <li>...</li>
            </ol>
        </li>
    </ol>

Description lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Usage

  • Description lists
    A description list defines terms and their corresponding descriptions.
    This is a term
    This is a description.
    This is a term
    This is a description.
  • <dl>
        <dt>...</dt>
        <dd>...</dd>
    </dl>