Utilities

Utilities are handy little classes to further style your UI elements.

Dynamic content Loader

Add inline modals and other hidden content that pops up (calendars etc.) inside this div so the elements won’t conflict with flexbox.

<div class="k-dynamic-content-holder">
    ...
</div>

Hide or show content

Hidden

Hide content in a non-accessible way. Content is hidden for everybody including screenreaders.

<div class="k-hidden">
    ...
</div>

Visually hidden

Hide the content in an accessible way. Content is hidden for viewers but not for screenreaders

<div class="k-visually-hidden">
    ...
</div>

Visually shown

Show content that have the .visually-hidden class.

  • Use as @extend for items that are already extending .k-visually-hidden.
  • Avoid using .k-visually-hidden and .k-visually-shown classes together.
<div class="k-visually-shown">
    ...
</div>

Touch events hidden

Hide elements for touch enabled devices

<div class="k-touchevents-hidden">
    ...
</div>

Resets

Margin

Remove all margins from an element.

<div class="k-no-margin">
    ...
</div>

Transition

Disable all transitions

<div class="k-no-transition">
    ...
</div>

Wrapping

No wrap

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.

<div class="k-no-wrap">
    ...
</div>

Ellipsis

Add an ellipsis to the end of a line when content doesn’t fit it’s parent

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
<div class="k-ellipsis">
    <div class="k-ellipsis__item">
        Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
    </div>
</div>

Ratio content

Create a block that keeps it’s aspect ratio

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

<div class="k-ratio-block k-ratio-block--16-to-9">
    <div class="k-loader"></div>
    <img class="k-ratio-block__body" src="/images/developer/ui/placeholder-16-9.png" alt="" />
</div>

<div class="k-ratio-block k-ratio-block--16-to-9">
    <div class="k-ratio-block__body">
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
</div>

Flexbox

Flex wrapper

A flex wrapper that can be used on layout elements that need flexbox:

  • Only use this class on containers that contain only one child
  • This is a shrink and grow container
<div class="k-flex-wrapper">
    ...
</div>

Do flex

Do flex item. Useful inside flexing containers on elements that have no pre-defined styling for flexbox

<div class="k-do-flex">
    ...
</div>

Don’t flex

Don’t flex item. Useful inside flexing containers on elements that have no pre-defined styling for flexbox

<div class="k-dont-flex">
    ...
</div>

Colors

Warning!
<div class="k-color-error">
    Warning!
</div>

Content block

Element with a bottom margin except when item itself is a last-child container

Lorem ipsum dolor
Lorem ipsum dolor
<div class="k-content-block">
    Lorem ipsum dolor
</div>

<div class="k-content-block--small">
    Lorem ipsum dolor
</div>

Top margin

Element with a top margin except when item itself is a first-child container.

Lorem ipsum dolor
Lorem ipsum dolor
<div class="k-content-block-top">
    Lorem ipsum dolor
</div>

<div class="k-content-block-top--small">
    Lorem ipsum dolor
</div>

Position

Relative positioned element

Could be useful to add to parents of absolute positioned items

<div class="k-position-relative">
    ...
</div>

Use a psuedo element inside the <a> to cover the entire parent.

  • This way we don’t have to make the parent element a link.
  • Downside: You can’t select the text anymore, but this could also be used to your advantage
<a class="k-link-coverall">...</a>

Use inside the same parent as the above “coverall” link to place this link on top of the psuedo element

<a class="k-link-ontop">...</a>

Example

Title

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

Read more
<div class="k-ratio-block k-ratio-block--16-to-9">
    <img class="k-ratio-block__body" src="/images/developer/ui/placeholder-16-9.png" alt="" />
    <div class="k-ratio-block__body">
        <div class="k-ratio-block__centered">
            <h2><a class="k-link-coverall">Title</a></h2>
            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p>
            <a class="k-button k-button--default" href="javascript:void(0)">Read more</a>
        </div>
    </div>
</div>

This or that

Line items up next to each other

This Or That
<a class="k-button k-button--success k-this-or-that" href="javascript:void(0)">This</a>
<span class="k-this-or-that">Or</span>
<a class="k-button k-button--default k-this-or-that" href="javascript:void(0)">That</a>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.