UIkit Cheatsheet

Table

Easily create nice looking tables, which come in different styles.

CSS Classname	Description
`uk-table`	To apply the table component, add the .uk-table class to a table element.
`uk-table-divider`	Add the .uk-table-divider class to display a divider between table rows.
`uk-table-striped`	Add zebra-striping to a table by adding the .uk-table-striped class.
`uk-table-hover`	Add the .uk-table-hover class to display a hover state on table rows.
`uk-table-small` `uk-table-large`	Add the .uk-table-small or .uk-table-large class to a table to make it smaller or larger.
`uk-table-justify`	To remove the outer padding of the first and last column so that they are flush with the table, add the .uk-table-justify class.
`uk-table-middle`	To vertically center table content, just add the .uk-table-middle class. You can also apply the class to tr or td elements for a more specific selection.
`uk-table-responsive`	If you want table columns to stack on small screens, add the .uk-table-responsive class.
`uk-table-shrink`	Add this class to a `<th>` or `<td>` element to reduce the column width to fit its content.
`uk-table-expand`	Add this class to a `<th>` or `<td>` element to expand the column width to fill the remaining space and apply a min-width.
`uk-width-*`	Add one of these classes from the Width component to a `<th>` or `<td>` element to modify the column width.

Containers

Add the .uk-container uk-padding-remove-horizontal class to a block element to give it a max-width and wrap the main content of your website. The element will be centered and have padding on the sides, that adapts automatically for large screens.

Class	Description
`uk-container uk-padding-remove-horizontal-xsmall`	Add this class for a xsmall container.
`uk-container uk-padding-remove-horizontal-small`	Add this class for a small container.
`uk-container uk-padding-remove-horizontal-large`	Add this class for a large container.
`uk-container uk-padding-remove-horizontal-xlarge`	Add this class for a xlarge container.
`uk-container uk-padding-remove-horizontal-expand`	Add this class, if you do not want to limit the container width but still want the dynamic horizontal padding.

Heading

Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements but they work also with any other element like a div element. Note that these classes extend the heading classes from the Base component upward, and the smallest modifier picks up the size after h1 element.

Class	Description
`uk-heading-small`	Add this class to apply a small-sized heading.
`uk-heading-medium`	Add this class to apply a medium-sized heading.
`uk-heading-large`	Add this class to apply a large-sized heading.
`uk-heading-xlarge`	Add this class to apply a xlarge-sized heading.
`uk-heading-2xlarge`	Add this class to apply a 2xlarge-sized heading.
`uk-heading-divider`	To apply a divider to a heading, add the `uk-heading-divider` class. You can combine it with any size modifier.
`uk-heading-bullet`	To apply a bullet to a heading, add the `uk-heading-bullet` class. You can combine it with any size modifier, and it works well with text alignment.

Text

Combine this component with the Heading component to style your content.

Class	Description
`uk-text-lead`	Add this class to highlight text, for example in article subtitles.
`uk-text-large`	Add this class to increase the font size.
`uk-text-small`	Add this class to decrease the font size.
`uk-text-meta`	Add this class to a paragraph which contains meta data about an article or similar.

Class	Description
`uk-text-light`	Add this class to apply a font weight of `300`.
`uk-text-normal`	Add this class to apply a font weight of `400`.
`uk-text-bold`	Add this class to apply a font weight of `700`.
`uk-text-lighter`	Add this class to apply a lighter font weight.
`uk-text-bolder`	Add this class to apply a bolder font weight.

Class	Description
`uk-text-capitalize`	Add this class to transform your text to capitalize.
`uk-text-uppercase`	Add this class to transform your text to uppercase.
`uk-text-lowercase`	Add this class to transform your text to lowercase.

Class	Description
`uk-text-muted`	Add this class to mute text.
`uk-text-emphasis`	Add this class to emphasize text.
`uk-text-primary`	Add this class to emphasize text with the primary color.
`uk-text-secondary`	Add this class to emphasize text with the secondary color.
`uk-text-success`	Add this class to indicate success.
`uk-text-warning`	Add this class to indicate a warning.
`uk-text-danger`	Add this class to indicate danger.

Class	Description
`uk-text-left`	Aligns text to the left.
`uk-text-right`	Aligns text to the right.
`uk-text-center`	Centers text horizontally.
`uk-text-justify`	Justifies text.

UIkit provides a number of responsive alignment classes. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Class	Description
`uk-text-left@s` `uk-text-center@s` `uk-text-right@s`	Affects device widths of 640px and larger.
`uk-text-left@m` `uk-text-center@m` `uk-text-right@m`	Affects device widths of 960px and larger.
`uk-text-left@l` `uk-text-center@l` `uk-text-right@l`	Affects device widths of 1200px and larger.
`uk-text-left@xl` `uk-text-center@xl` `uk-text-right@xl`	Affects device widths of 1600px and larger.

Add one of these classes to vertically align text to an object.

Class	Description
`uk-text-top`	Aligns text to the top.
`uk-text-middle`	Centers text vertically.
`uk-text-bottom`	Aligns text to the bottom.
`uk-text-baseline`	Aligns text to the baseline.

Width

UIkit's Width component is often used in combination with grids to split content into responsive columns. You can apply fractions, automatic width or expand units to fill the remaining space and combine these modes.

Class	Description
`uk-width-1-1`	Fills 100% of the available width.
`uk-width-1-2`	The element takes up halves of its parent container.
`uk-width-1-3` to `uk-width-2-3`	The element takes up thirds of its parent container.
`uk-width-1-4` to `uk-width-3-4`	The element takes up fourths of its parent container.
`uk-width-1-5` to `uk-width-4-5`	The element takes up fifths of its parent container.
`uk-width-1-6` to `uk-width-5-6`	The element takes up sixths of its parent container.

The Width component provides additional modifiers to give you more flexibility in the distribution of items.

Class	Description
`uk-width-auto`	The item expands only to the width of its own content.
`uk-width-expand`	The item expands to fill up the remaining space of the grid container.

In addition to the calculated width classes, you can also add one of the following classes, which apply fixed widths.

Class	Description
`uk-width-small`	Applies a fixed width of 150px.
`uk-width-medium`	Applies a fixed width of 300px.
`uk-width-large`	Applies a fixed width of 450px.
`uk-width-xlarge`	Applies a fixed width of 600px.
`uk-width-2xlarge`	Applies a fixed width of 750px.

Responsive width

UIkit provides a number of responsive widths classes. Basically they work just like the usual width classes, except that they have suffixes that represent the breakpoint from which they come to effect. These classes can be combined with the Visibility component. This is great to adjust your layout and content for different device sizes.

Class	Description
`uk-width-` `uk-child-width-`	Affects all device widths, grid columns stay side by side.
`uk-width-@s` `uk-child-width-@s`	Affects device widths of 640px and larger. Grid columns will stack on smaller sizes.
`uk-width-@m` `uk-child-width-@m`	Affects device widths of 960px and larger. Grid columns will stack on smaller sizes.
`uk-width-@l` `uk-child-width-@l`	Affects device widths of 1200px and larger. Grid columns will stack on smaller sizes.
`uk-width-@xl` `uk-child-width-@xl`	Affects device widths of 1600px and larger. Grid columns will stack on smaller sizes.

Height

UIkit's Height component offers three options to set heights: using simple fixed height utility classes, depending on the viewport or by matching the heights of different elements.

Class	Description
`uk-height-1-1`	This class applies a height of 100%. This only works if the parent element has a set height.
`uk-height-small` `uk-height-max-small`	These classes apply a height or max-height of 150px.
`uk-height-medium` `uk-height-max-medium`	These classes apply a height or max-height of 300px.
`uk-height-large` `uk-height-max-large`	These classes apply a height or max-height of 450px.