Base

Written by Julian. Posted in UIKit

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

Item 1
Item 2
1. Item 1
2. Item 2
  1. Item 1
  2. Item 2
Item 3
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.

Print Email

Grid

Written by Julian. Posted in UIKit

Create a fully responsive, fluid and nestable grid layout.

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width. It is also possible to combine the grid with classes from the Flex component, although it works only in modern browsers.

Usage

To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the uk-width-* classes that can be applied to units.

Class	Description
`.uk-width-1-1`	Fills 100% of the available width.
`.uk-width-1-2`	Divides the grid into halves.
`.uk-width-1-3` to `.uk-width-2-3`	Divides the grid into thirds.
`.uk-width-1-4` to `.uk-width-3-4`	Divides the grid into fourths.
`.uk-width-1-5` to `.uk-width-4-5`	Divides the grid into fifths.
`.uk-width-1-6` to `.uk-width-5-6`	Divides the grid into sixths.
`.uk-width-1-10` to `.uk-width-9-10`	Divides the grid into tenths.

We built an intentional redundancy into each set of unit classes, so that for instance the .uk-width-5-10 class will work just as well as .uk-width-1-2.

Example

Take a closer look at the following grid example, which gives you a great overwiew of all basic .uk-width-* classes.

.uk-width-1-3

.uk-width-1-2

.uk-width-3-10

.uk-width-7-10

NOTE The grid has no style related CSS. In our example we used panels from the Panel component.

Markup

Here is a simple code example of how the default grid with 2 columns would look like:

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Responsive width

UIkit provides a number of very useful responsive widths classes. Basically they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.

Class	Description
`.uk-width-*`	Affects all device widths, grid columns stay side by side.
`.uk-width-small-*`	Affects device widths of 480px and higher. Grid columns will stack on smaller sizes.
`.uk-width-medium-*`	Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
`.uk-width-large-*`	Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.

IMPORTANT To create a margin between stacking grid columns, just add the data-uk-grid-margin attribute.

Example

.uk-width-medium-1-2 .uk-width-large-1-3

.uk-hidden-medium .uk-width-large-1-3

.uk-width-medium-1-2 .uk-width-large-1-3

.uk-width-1-2 .uk-width-medium-1-3

.uk-hidden-small .uk-width-medium-1-3

.uk-width-1-2 .uk-width-medium-1-3

.uk-width-1-1 .uk-visible-small

.uk-width-medium-1-1 .uk-visible-medium

<div class="uk-grid uk-grid-divider">...</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider">...</div>

NOTE The horizontal divider can not be applied to grids with any of the uk-push-* or uk-pull-* classes.

Source ordering

You can change the display order of the columns to keep a specific column order in the source code. Add one of the .uk-push-* classes to move the column to the right and add one of the .uk-pull-* classes to move a column to the left. This allows you for example to flip the columns' display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.

Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.

NOTE This feature only works in combination with one of the .uk-width-medium-* classes.

Example

.uk-width-medium-1-2 .uk-push-1-2

.uk-width-medium-1-2 .uk-pull-1-2

.uk-width-medium-2-5 .uk-push-3-5

.uk-width-medium-2-5 .uk-pull-2-5

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">...</div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">...</div>
</div>

Match column heights

The Grid component uses Flexbox, so the height of grid columns is matched automatically. To achieve the same effect in older browsers that don't support Flexbox, just add the data-uk-grid-match attribute to your grid. If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns accross all rows just use data-uk-grid-match="{row: false}".

Example

Lorem ipsum dolor sit amet.

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

Markup

<div class="uk-grid" data-uk-grid-match>...</div>

NOTE If grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.

Match height of panels

If you want to match the heights of panels in a grid, just add the .uk-grid-match class. When using the data attribute, you need to add the {target:'.uk-panel'} selector.

Example

Lorem ipsum dolor sit amet.

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

Markup

<div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
</div>

Wrap multiple rows

You can also create a grid with as many columns as you want, which automatically break into the next line. Just add the data-uk-grid-margin attribute to create a margin between the grid rows. Typically this layout is built using a <ul> element.

Example

NOTE You can also apply a custom width to your grid columns. Just add the .uk-width class and use an inline style to define the width. This example uses fixed pixel values for the widths as you would do with images.

Markup

<ul class="uk-grid" data-uk-grid-margin>

    <!-- These elements have a width in percent -->
    <li class="uk-width-medium-1-5">...</li>
    <li class="uk-width-medium-3-10">...</li>

    <!-- These elements have a width in pixel -->
    <li class="uk-width" style="width: 100px;">...</li>
    <li class="uk-width" style="width: 150px;">...</li>

</ul>

Even grid columns

To create a grid whose child elements' widths are evenly split, you don't have to apply the same class to each list item within the grid. Just add one of the .uk-grid-width-* classes to the grid itself.

Class	Description
`.uk-grid-width-1-2`	Divides the grid into halves.
`.uk-grid-width-1-3`	Divides the grid into thirds.
`.uk-grid-width-1-4`	Divides the grid into fourths.
`.uk-grid-width-1-5`	Divides the grid into fifths.
`.uk-grid-width-1-6`	Divides the grid into sixths.
`.uk-grid-width-1-10`	Divides the grid into tenths.

Example

Markup

<ul class="uk-grid uk-grid-width-1-5">
    <li>...</li>
    <li>...</li>
</ul>

Responsive width

UIkit also provides responsive grid width classes. You can apply these to maintain evenly sized grid columns, regardless of the device width.

Class	Description
`.uk-grid-width-*`	Affects all device widths.
`.uk-grid-width-small-*`	Affects device widths of 480px and higher.
`.uk-grid-width-medium-*`	Affects device widths of 768px and higher.
`.uk-grid-width-large-*`	Affects device widths of 960px and higher.
`.uk-grid-width-xlarge-*`	Affects device widths of 1220px and higher.

Example

Markup

<ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5">
    <li>...</li>
    <li>...</li>
</ul>

Print Email

Panel

Written by Julian. Posted in UIKit

Create layout boxes with different styles.

UIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.

Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content.

Class	Description
`.uk-panel`	Add this class to a `<div>` element to define the Panel component.
`.uk-panel-title`	Add this class to a heading to create the panel title.
`.uk-panel-badge`	Add this class to a `<div>` element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component.

Example

Hot

Title

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

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .uk-panel-box class.

Markup

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .uk-width-medium-1-2 class.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-primary-hover class. This comes in handy when working with anchors.

Panel box secondary

Add the .uk-panel-box-secondary class to modify the box panel and give it a light background.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-secondary-hover class. This comes in handy when working with anchors.

Panel hover

Add the .uk-panel-hover class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Example

Markup

<a class="uk-panel uk-panel-hover" href="">...</a>

Panel header

Add the .uk-panel-header class to separate the panel title and content with a horizontal line.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Markup

<div class="uk-panel uk-panel-space">...</div>

Panel divider

Add the .uk-panel-divider class to separate vertically stacked panels with lines.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
    </div>
</div>

NOTE Use the .uk-grid-divider class from the Grid component to separate grid columns.

Panel box with teaser

To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .uk-panel-teaser class to a <div> element inside the panel.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="uk-panel uk-panel-box">
    <div class="uk-panel-teaser">
        <img src="" alt="">
    </div>
</div>

Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .uk-icon-* classes to an <i> or <span> element inside the panel title.

Example

Panel

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

Panel

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

Panel

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

Markup

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>

Print Email

Block

Written by Julian. Posted in UIKit

Separate content sections by bundling them in blocks with different styles.

Usage

To apply this component, just add the .uk-block class to a container element.

Example

Block

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

Markup

<div class="uk-block">...</div>

Modifiers

To apply different background colors and paddings, add one of the following classes. If two consecutive blocks have the same background color, the padding will automatically be divided.

Class	Description
`.uk-block-default`	Add the default background color, usually white or similar.
`.uk-block-muted`	Adds a light background color.
`.uk-block-primary`	Adds a primary background color.
`.uk-block-secondary`	Adds a another background color, usually a dark one.

NOTE To properly display colors, borders and other elements on colored blocks, you might want to apply the .uk-contrast class from the Contrast component.

Example

Primary

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

Markup

<div class="uk-block uk-block-primary">...</div>

Padding

To add a larger padding to your block, just add the .uk-block-large class. You can also remove the block's padding using one of the .uk-padding-* classes from the Utility component.

Example

Large

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

Markup

<div class="uk-block uk-block-large">...</div>

Print Email

Tooltips

Written by Julian. Posted in UIKit

Easily create a nicely looking tooltip.

Usage

To apply this component, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Example

Hover me

Markup

<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Alignment

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

Attribute	Description	Example
`pos:'top'`	Aligns the tooltip to the top.
`pos:'top-left'`	Aligns the tooltip to the top left.
`pos:'top-right'`	Aligns the tooltip to the top right.
`pos:'bottom'`	Aligns the tooltip to the bottom.
`pos:'bottom-left'`	Aligns the tooltip to the bottom left.
`pos:'bottom-right'`	Aligns the tooltip to the bottom right.
`pos:'left'`	Aligns the tooltip to the left.
`pos:'right'`	Aligns the tooltip to the right.

Markup

<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

JavaScript options

This is an example of how to set options via attribute:

data-uk-tooltip="{pos:'bottom-left'}"

Option	Possible value	Default	Description
`offset`	integer	5	Offset to the source element
`pos`	string	'top'	Tooltip position
`animation`	boolean	false	Fade in tooltip
`delay`	integer	0	Delay tooltip show in ms
`cls`	string	''	Custom class to add on show
`activeClass`	string	'uk-active'	Toggled active class

Print Email