Utility

A collection of useful utility classes to style your content.

Table of contents

• Overflow
  • Overflow Auto
• Resize
• Inline
• Responsive objects
• Border radius
• Box shadow
• Drop cap
• Transform center
• Transform origin
• Disabled

Overflow

These utilities provide different classes to modify an element’s overflow behavior.

Class	Description
.uk-overflow-hidden	Add this class to clip content that exceeds the dimensions of its container.
.uk-overflow-auto	Add this class to create a container that provides a horizontal or vertical scrollbar whenever the elements content it are wider or higher than the container itself.

Note The .uk-overflow-auto class is useful when having to handle tables on a responsive website, which at some point would just get too big. It also works great on <pre> elements.

Overflow Auto

Add the uk-overflow-auto attribute to expand an element’s height to make it fill the remaining height of a parent container. It provides a vertical scrollbar if its content is higher than the expanded height.

It’s often used within the Modal component.

You can change the target heights by adding the selContainer and selContent options to the attribute. Learn more

Option	Value	Default	Description
sel-container	String	.uk-modal	CSS selector for the container element which provides the height.
sel-content	String	.uk-modal-dialog	CSS selector for the element which wraps the inner content to provide its height.

Resize

These utilities provide different classes for resizing elements.

Class	Description
.uk-resize	Add this class to enable horizontal and vertical resizing.
.uk-resize-vertical	Add this class to enable only vertical resizing.

Grab and drag the bottom right corner of each box below to resize it.

Inline

These classes are often used to create a position context on containers with an image as a child. The container keeps the same size as the image as well as the responsive behavior. That way content that is placed on top of the image with the Position component will not flow out of the image dimensions.

Class	Description
.uk-inline	Add this class to apply inline-block behavior to an element, add a max-width of 100% and to create a position context.
.uk-inline-clip	Same as .uk-inline, it but also clips overflowing child elements.

Responsive objects

In UIkit <img>, <canvas>, <audio> and <video> elements adapt to the width of their parent container by default. To apply responsive behavior to iframes, add the uk-responsive attribute . For other elements or to apply a different behavior, just add one of the following classes.

Class	Description
.uk-responsive-width	Add this class to apply the same responsive behavior to any other element. It adjusts the object’s width according to its parent’s width, keeping the original aspect ratio.
.uk-responsive-height	Add this class to adjust the object’s height (instead of its width) according to its parent’s height, keeping the original aspect ratio.
.uk-preserve-width	Add this class to avoid the default responsive behavior and preserve the original image dimensions. You can also add the class to a parent element and it will be applied to all relevant elements content it. If you are embedding Google Maps into your site, you may need this to fix the map’s images.

Border radius

To modify the border radius of an element, like an image, add one of the following classes.

Class	Description
.uk-rounded-sm	Add this class to apply a small border radius.
.uk-rounded	Add this class to apply a border radius.

Box shadow

You can apply different box shadows to elements. Just add one of the following classes.

Class	Description
.uk-shadow-sm	Add this class to apply a small box shadow.
.uk-shadow	Add this class to apply a box shadow.

Drop cap

With the .uk-dropcap class you can achieve a drop cap within a text by adding it directly to the <p> element.

Transform center

To center an element to itself, add the uk-transform-center class. This is particularly useful for absolute positioning.

Transform origin

To modify the origin of an animation, like scaling, add one of the uk-transform-origin-* classes. This can be combined with the Animation component.

Class	Description
.uk-transform-origin-top-left	The transition originates from the top left.
.uk-transform-origin-top-center	The transition originates from the top.
.uk-transform-origin-top-right	The transition originates from the top right.
.uk-transform-origin-center-left	The transition originates from the left.
.uk-transform-origin-center-right	The transition originates from the right.
.uk-transform-origin-bottom-left	The transition originates from the bottom left.
.uk-transform-origin-bottom-center	The transition originates from the bottom.
.uk-transform-origin-bottom-right	The transition originates from the bottom right.

Disabled

To disable the click behavior of any element, like a <a>, <button> or <iframe> element, add the .uk-disabled class.