Example

Markup

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top to the lower element.

Markup

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the .uk-overflow-container class to a <div> element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Displays hidden content on hover using display: block. Add this class to the parent element.

.uk-visible-hover-inline

Displays hidden content on hover using display: inline-block. Add this class to the parent element.

Example

Hover me...

Bazinga!

Markup

<divclass="uk-visible-hover"><divclass="uk-hidden">...</div></div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.