Cheat Sheet
Columns
Markup
<div class="uk-column-small-1-2 uk-column-medium-1-3 uk-column-large-1-4">...</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat justo turpis, sed tempor sapien iaculis venenatis. Nam lectus lacus, convallis vitae dignissim interdum, commodo viverra enim. Pellentesque in ligula quis diam auctor scelerisque a in neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempus ultricies nunc, sit amet tincidunt lorem molestie vitae. Pellentesque hendrerit lorem id est finibus sodales. Vivamus et ultrices sapien, sit amet volutpat nisl.
Aenean vel sagittis odio. Donec et libero eu lacus cursus tincidunt. In non eros odio. Pellentesque tincidunt risus non ultrices sollicitudin. Duis imperdiet mi eget erat fermentum tincidunt. Donec vestibulum odio at lorem tempor ullamcorper. Quisque sed erat sed lacus gravida facilisis. Nulla facilisi. Integer congue lobortis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse in tellus quis sapien pellentesque tempor vel sed diam. Proin bibendum lobortis sem, ut pellentesque erat eleifend vel.
Blocks
Separate content sections by bundling them in blocks with different styles.
Markup
<div class="uk-block">...</div>Modifiers
To apply different background colors and paddings, add one of the following classes.
| Class | Description |
|---|---|
.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 add the .uk-contrast class.
Examples
Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Secondary
This block is usually dark
Muted
This block is usually light gray
Buttons
Markup
<button class="uk-button uk-button-[color-modifier] uk-button-[size-modifier]">...</button>Utilities
Display
Add one of these classes to change the display properties of an element.
| Class | Description |
|---|---|
.uk-display-block |
Forces the element to behave like a block element. |
.uk-display-inline |
Forces the element to behave like an inline element. |
.uk-display-inline-block |
Forces the element to behave like an inline-block element. |
Inline List example,
Tables
Easily create nicely looking tables, which come in different styles.
Usage
To apply this component, add the .uk-table class to a <table> element.
Example
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Footer | Table Footer | Table Footer |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Markup
<table class="uk-table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<td>...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>Columns
To modify the column width or content, you can use other components. Here are some useful examples:
| Style | Description |
|---|---|
| Column width | Add one of the .uk-width-* classes from the Grid component. |
| Text alignment | Add the .uk-text-left, .uk-text-right or .uk-text-center class from the Text component. |
| Text style | Take a look at the Text component. For example add the .uk-text-bold class. |
Markup
<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>Vertical modifier
To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.
Modifiers
To display the table in a different style, just add a modifier to the the .uk-table class.
Table hover
Add the .uk-table-hover class to display a hover state on table rows.
Example
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-hover">...</table>Table striped
Add zebra-striping to a table by adding the .uk-table-striped class.
Example
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-striped">...</table>Table condensed
Add the .uk-table-condensed class to make table cells more compact.
Example
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-condensed">...</table>Combine modifiers
The modifiers of the Table component are combinable with each other.
Example
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>Responsive Table
If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.
Example
| Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading |
|---|---|---|---|---|---|---|---|
| Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Markup
<div class="uk-overflow-container">
<table>...</table>
</div>Headings
Use the <h1> to <h6> elements to define your headings.
Example
h1 Heading 1 - Default: 36px
h2 Heading 2 - Default: 24px
h3 Heading 3 - Default: 18px
h4 Heading 4 - Default: 16px
h5 Heading 5 - Default: 14px
h6 Heading 6 - Default: 12px
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.
