Search
Ctrl + /

Utility

A collection of useful utility classes to style your content.

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Table of contents

Overflow

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

ClassDescription
.uk-overflow-hiddenAdd this class to clip content that exceeds the dimensions of its container.
.uk-overflow-autoAdd 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.

  • Some content before the overflow auto container.

    Some content after the overflow auto container.

It’s often used within the Modal component.

  • Open

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

OptionValueDefaultDescription
sel-containerString.uk-modalCSS selector for the container element which provides the height.
sel-contentString.uk-modal-dialogCSS selector for the element which wraps the inner content to provide its height.

Resize

These utilities provide different classes for resizing elements.

ClassDescription
.uk-resizeAdd this class to enable horizontal and vertical resizing.
.uk-resize-verticalAdd this class to enable only vertical resizing.

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

  •             
<!-- Resize vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
                
<!-- Resize horizontally and vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

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

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.

ClassDescription
.uk-inlineAdd this class to apply inline-block behavior to an element, add a max-width of 100% and to create a position context.
.uk-inline-clipSame as .uk-inline, it but also clips overflowing child elements.
  • Overlay

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.

ClassDescription
.uk-responsive-widthAdd 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-heightAdd 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-widthAdd 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.

ClassDescription
.uk-rounded-smAdd this class to apply a small border radius.
.uk-roundedAdd this class to apply a border radius.

  • Small

    Medium

Box shadow

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

ClassDescription
.uk-shadow-smAdd this class to apply a small box shadow.
.uk-shadowAdd this class to apply a box shadow.

  • Small

    Medium

Drop cap

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

  • Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

ClassDescription
.uk-transform-origin-top-leftThe transition originates from the top left.
.uk-transform-origin-top-centerThe transition originates from the top.
.uk-transform-origin-top-rightThe transition originates from the top right.
.uk-transform-origin-center-leftThe transition originates from the left.
.uk-transform-origin-center-rightThe transition originates from the right.
.uk-transform-origin-bottom-leftThe transition originates from the bottom left.
.uk-transform-origin-bottom-centerThe transition originates from the bottom.
.uk-transform-origin-bottom-rightThe transition originates from the bottom right.

  • Bottom Right

    Top Center

    Bottom Center

Disabled

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

Customize

Customize your Franken UI experience.