UIkit 2.23 released

Popovers, column component and inline SVG

Oct
12
UIkit 2.23 released

Say hello to the new release of UIkit. Version 2.23.0 includes a lot of bug fixes and many improvements. Plus, it comes with three notable additions: Reworked dropdowns, a new column component and inline SVG.

Dropdowns - The new Popovers

Traditionally, the Dropdown component has been used for dropdown menus on buttons with its own dropdown panel style. While this is still possible, the Dropdown component is now way more flexible. A new uk-dropdown-blank class removes the default dropdown styling. This allows for creating popovers of any kind, not just the default dropdown panel. A great use case are popovers on visual elements, like photos with interactive labels. In addition, you can now reveal in eight more directions via the pos parameter.

<div class="uk-position-relative uk-display-inline-block" data-uk-dropdown="{pos:'right-center'}">
    <a href="/" class="uk-button">Hover</a>
    <div class="uk-dropdown-blank uk-panel uk-panel-box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

Inline SVG

A new JavaScript utility allows automatic inlining of SVG graphics. Just include the SVG file using an image element and add the right data attribute. All attributes on the image element will be preserved, so you can add additional classes, inline styles or id attributes as well. This is great because now you can style the SVG with CSS.

<img id="" class="" src="/file.svg" data-uk-svg>

Text columns

Text columns is a small component that allows you to render text in columns, with full support for responsive behavior. The following example displays 2 columns on small devices and 3 columns on larger devices (tablet and above).

<p class="uk-column-small-1-2 uk-column-medium-1-3">...</p>

Feedback

We'd like to know what you think about the release. Please leave your feedback in the comments and join us in the UIkit Gitter chat.

By Florian | | Posted in UIkit

Comments (12)

  • mario.gonzalez

    mario.gonzalez

    | Profile |
    Great work!
  • janyour

    janyour

    | Profile |
    Thank you for this new release,
    should we update the themes ?
  • triangle

    triangle

    | Profile |
    Text columns will be great! A big time saver for me!
  • ray.lawlor

    ray.lawlor

    | Profile |
    Text columns = hours of saved time putting text in divs!! Excellent feature! Many, many thanks YooTheme... :)

    Ray
  • ray.lawlor

    ray.lawlor

    | Profile |
    I was so excited about Text Columns that I forgot to mention inline SVG... goodness... the possibilities!
  • mario.gonzalez

    mario.gonzalez

    | Profile |
    svg really useful feature
  • novagiant

    novagiant

    | Profile |
    Super cool!, keep up the good work. We are excited about the new text columns. Now we don't have to div ourselves to death. :-)
  • claes.norin

    claes.norin

    | Profile |
    You guys really need to test and focus on IOs 9 on ipad and Iphone. We have many clients having problems with their sites we built with UIkit with these devices now. And its hard to find workarounds to fix and its hard to even test.

    You should have a kill IOs 9 bug fest at YOOtheme office.
    • ericb

      ericb

      | Profile |
      I've had a number of issues pop up with iOS 9 in general, totally unrelated to UIKit. Even weirder, some of the issues were specific to Chrome on iOS 9 which doesn't make a bit of sense to me since Chrome is required by Apple to use their UIWebView control for rendering content. And no remote debugging in Chrome for iOS made it that much more frustrating to troubleshoot.

      Glad to see I'm not the only person having issues with iOS 9, but it makes me wonder what the cause is.
      • claes.norin

        claes.norin

        | Profile |
        Yes seems Apple failed miserably with the IOS 9 update with the browser stuff. I have never owned an Iphone so rely on testing Virtual via web services. But at those everything always works fine.
  • claes.norin

    claes.norin

    | Profile |
    OR maybe a KILL IOS 9 only fest ;-)
  • bozhkov

    bozhkov

    | Profile |
    In new version of template the dropdown does not working properly. Do not operate the new improvements and dropdown goes beyond the screen

Leave a comment

Please login to leave a comment.