Provides the default style for all HTML elements.

This component defines the base look of your page. It offers great typography by setting the default colors, margins, font-sizes and more for each HTML element. This page is a short guide on how to use basic HTML elements and how UIkit styles them.

Note Basically UIkit utilizes the famous Normalize.css, but distributed it among all components. Only the necessary parts are adopted into the Base component to keep the unprefixed CSS as small as possible. Most of the normalization related CSS is moved into the Form, Button and Table components. This makes UIkit and its components very robust against conflicts with other CSS frameworks so that you don’t have to worry about browser inconsistencies in your projects.

Headings

Use the <h1> to <h6> elements to define your headings.

Example

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

You can add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3.

Paragraphs

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

Text-level semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

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.

Horizontal rule

Create a horizontal rule by using the <hr> element.

Example

Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

Example

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

Markup

<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</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>

NOTE Optionally, you can add the .uk-scrollable-text class from the Utility component, which will set a max-height of 300px and provide a y-axis scrollbar.

Lists

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

Example

  • 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

Markup

<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.

Example

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.

Markup

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

Responsive images

All images in UIkit are responsive by default. If the layout is narrowed, images adjust their size and keep their proportions.

Example

Resize the browser window to see the responsive behavior of the image.

NOTE To avoid the responsive behavior and preserve the original image dimensions, add the .uk-img-preserve class to one of your single images. If you have more than one image, you can also add the class to the parent container. This is not required for Google Maps.

Published
Luglio 4, 2019

Leave a comment