UIkit 3 Beta released

It's all reworked, shiny and new

Jan
09
UIkit 3 released

Since our introduction of UIkit in 2013, it has become one of the most used front-end frameworks that power the modern web. With all the lessons we have learned during that release, we have continuously improved UIkit. After pretty much exactly one year of work and more than 1600 commits, we are taking the next big step today. We are releasing UIkit 3, the newest generation of our framework, which has been completely rethought and rebuilt.

While still being labeled as beta, UIkit 3 is really mature. The complete YOOtheme Pro product, including its theme and all of our websites from the past three months have been built with the new version of the framework. We have also taken the time to write an extensive documentation for every single component. The docs come with many examples that can be copy-pasted right into your own project.

UIkit 3 features all the things its predecessor is loved for: Modular components, conflict-free class names, customizable LESS sources, interactive JavaScript components, an easy to use theming system and responsiveness from the ground up.

What's new

There is so much more to discover in UIkit, but here are some of the highlights from the new and changed components:

  • The new Grid system, like the previous one, utilizes the powerful flexbox principle to create dynamic and flexible layouts. The Grid works in conjunction with the new Width component, which includes powerful width options. You can split content into evenly distributed columns, automatically apply the content's dimensions or expand the column width to fill up the remaining space. These modes can also be combined. When using the uk-grid attribute, the necessary class is injected automatically and the grid system takes care of margin, wrapping etc. via JavaScript.
  • The Icon component now comes with its own SVG icon system. It dynamically injects SVG icons, which can easily be styled with CSS. All icons were custom-built and include many beautiful elements for pretty much every usecase. More and more icons will be added over time.

    Icons

  • The Inverse component inverts most other UIkit components for any kind of background — dark or bright. No more need to write custom styles when displaying elements on different backgrounds. Just add the .uk-light class for dark backgrounds in a light style or .uk-dark for light backgrounds in a dark style.

    Inverse

  • The Card component is a new central way of presenting different kinds of content with optional header and footer sections. It replaces the old panel component.
  • The Drop & Dropdown components with their enhanced flexibility now allow you to drop, well, anything. More options are available to define the drop behavior, for example boundary alignment to align a dropdown relative to any chosen element on the page.
  • The Navbar component has been extended with new toggle modes (click and hover) and a transparent look, which can also be used with the Inverse component. This style looks splendid on any background. The new dropbar mode displays dropdowns inside a full-width background container.
  • The Offcanvas component has been reworked completely and the new animation modes push, reveal and slide, all of which can be flipped, were added.
  • The Form component has been rebuilt completely and unifies the old Form, Form advanced, Form select, Form file and Form password components.
  • The Overlay, Position & Transition components originate in the old Overlay component and have been extracted to be easily combined with many other components.
  • Margin & Padding are now their own components and contain the new size modifiers as well as additional classes to remove margin. For consistency, some class names have been changed or swapped, look out when migrating old code.
  • The Toggle component now features more functionality, for example toggle classes depending on viewport size, even on itself.
  • The new Background component includes beautiful background options and comes with multiple display and blend modes.
  • The new Divider and Heading components include a simple dividing line or one that is decorated with an icon as well as different styles for headings.
  • The new Spinner component features a beautiful loading spinner animation.

These are just some of the fantastic new additions of UIkit 3. Many components have gotten new modifiers, like Button, Column, Animation, Table and so on.

Things to keep in mind

UIkit 3 has some general changes, that we want to emphasize and that you should also be aware of when starting to work with the new version:

  • Consistency – While some class names appear to be the same as before, they might have a new or swapped order of words. This is the result of our effort to find consistent names for all components. One specific example are many sizing classes which have been unified to follow the same pattern as, for example, the .uk-margin-large-top class from the Margin component.
  • JS attributes – Data attributes data-uk-* have been renamed to simple uk-* attributes. Many components now use the attribute. It injects the necessary classes, so that you don't have to set them manually. This includes frequently used components like Grid and Width.
  • Viewport classes – Viewport specific class names now have size postfixes – @s, @m, @l, @xl – instead of the old keywords -small, -medium etc.
  • Default style – Many default styles have been moved into a dedicated modifier class. For example .uk-button and .uk-nav have no default styling anymore. Instead, you can add the .uk-button-default or .uk-nav-default modifier. This is the result of our effort to limit the situations where you would need to reset the default styling when using components.
  • Modularity – Many of the new components are just extracted from old components, such as the large utility collection. This makes UIkit even more modular and tidy — both code and documentation. This includes components such as Heading, Table, Margin, Padding, Link and more.

Migrate your page from UIkit 2

With the new Migration tool you will have no trouble updating your site from UIkit2 to version 3. The tool helps you to find all the critical changes, which affect your website and allows you to locate where things need to be changed. That way you can modify your website component by component to make it fully UIkit3 compatible. All you need to do is to replace the UIkit source with the new one and add the migration scripts the way you prefer. For more information, take a look at the Migration Documentation.

New documentation

A lot of our work for this release has gone into creating extensive documentation for every UIkit component right from the start. We have also made sure to include many examples that are prepared to be copy pasted completely. You can also jump right into a Codepen to play around with the example in a live environment. Every component includes test pages, which we use internally to get an overview of all features of a component. You can jump to the test right from the documentation page of every component.

UIkit in numbers

In January 2016 we decided to start working on UIkit 3. Since then, our internal repository has seen more than 1600 commits from 10 contributors. This development now is moved into the regular UIkit repository, that has seen much attention since the original UIkit release in 2013.

  • More than 8.000 stars
  • Almost 3.500 commits
  • 65 contributors
  • 86 releases

A lot of effort during the development of UIkit 3 went into creating a clean and modular code base. As a positive result, the final CSS and JavaScript have become small, while containing all the functionality for any website, big or simple. When compiled to contain close to the same functionality as UIkit 2, the new release's CSS is 21% and the JavaScript 28% is smaller (gzipped). However, the complete release contains even more functionality.

What's missing

This is a beta release and as such it is to be considered a work in progress. A number of components still need to be reworked and will be added in the future. Our focus for this release has been to create a stable core and provide extensive documentation right from the start. Next on our list are the Slideshow, Slider, Slideset, Parallax, Nestable, Lightbox, Dynamic Grid, HTML editor, Date- and Timepicker components.

Hands on

We have designed UIkit 3 to be as modular as possible, so that you can include it in any kind of web based project, be it a typical website or a full web-app. We are happy to see what people have created with previous versions of UIkit and we are incredibly excited to see what you will create with the new UIkit 3. Go and give it a try. Download it at getuikit.com.

UIkit Website

By Sascha | | Posted in UIkit

Comments (31)

  • ryan.jones

    ryan.jones

    | Profile |
    Looks great! Going to start looking at it now! Many thanks YOOteam!
  • orsat.munitic

    orsat.munitic

    | Profile |
    Dear Yootheme, could you please not use small, low contrast text for the UIkit 3 Documentation ?

    You may think the color scheme looks really cool, but is being cool worth the loss of readability ?
    • sascha

      sascha

      | Profile |
      Thanks! We tweaked the colors and font-weight a little bit. Is the readability better now? Should be the same like the old v2 site. PS: Don't forget to clear the browser cache to test it
      • orsat.munitic

        orsat.munitic

        | Profile |
        IMO its better than before. I'd even make the sidebar menu a little darker, but maybe that's just me :)
        thank you
  • swissa

    swissa

    | Profile |
    Well done - looks like comprehensive documentation.

    May I suggest (as people in general are stupid) that you put links to both uikit 3 and Pro documentation alongside 'Documentation' and 'New to YOOtheme' on the Support page. May help people to find it easier.
    • sven.grossenbacher

      sven.grossenbacher

      | Profile |
      ...and some peole do not respect the comment's guidelines - please read the first phrase in point 3 ;-)
      • swissa

        swissa

        | Profile |
        I did. I could have said %*?!ç"+ idiots! ;-)
  • david.dahl

    david.dahl

    | Profile |
    I really appreciate (inside the documentation) the tabbed display between the preview of an element and the markup of said element.

    It makes things much easier to understand without having to look at the page's source code.
  • e.manuel

    e.manuel

    | Profile |
    great to hear. looks like the documentation is very well created.
    can't wait to see the missing components like slideshow and slider.
  • chris.gilroy

    chris.gilroy

    | Profile |
    +1 Zoo
    +1 Parallax & Dynamic Grid
    +1 WidgetKit
  • bulat.gazizov

    bulat.gazizov

    | Profile |
    You are amazing! I have been hating Yootheme Pro without the docs! Now this is really really great! You guys rock with UiKit3 and YooTheme pro!
    Thanks so much! Now will patiently wait for warp7 features in YooTheme pro!
  • bigjens

    bigjens

    | Profile |
    What about those who want to stay with UIkit 2 ? What is the roadmap for UIkit 2 then?
    • sascha

      sascha

      | Profile |
      UIkit 2 will be long supported with bug fixes but there won't be any new features.
      • akcreation

        akcreation

        | Profile |
        thanks for the update on uikit 2 Sascha :) I cannot see myself migrating fully to uikit 3 for some time yet (3 is still in beta anyway so I certainly won't until its stable), so it's good to know that 2 will be supported for bug fixes.
        Many thanks
      • craigcallen

        craigcallen

        | Profile |
        Thanks for still supporting UIkit 2 with bug fixes. Is there a link to still access 2 for documentation and features?
  • craig.kennedy

    craig.kennedy

    | Profile |
    excuse my ignorance or possibly stupidity here. I have a Warp7 theme template, lets say I want to use this ULKit 3 beta in it, can that be done? I as only because I have yet to find any way to. The migrate tool, whatever that is, makes less than no sense at all, says drag the link to the bookmarks, what does that do exactly (on my chrome it does nothing)
  • craig.kennedy

    craig.kennedy

    | Profile |
    ah ok, you missed out the developers tools side of things, once I figured that out I am ok.
  • vladimir.eliseev

    vladimir.eliseev

    | Profile |
    please add icons for vk.com and ok.ru!
  • messagedj

    messagedj

    | Profile |
    Nice! Good news for all the oldskool WARP & UIKIT fans! This only leaves us with the Yootheme Pro templates where we still can not really work the oldskool way we like...
  • bozhkov

    bozhkov

    | Profile |
    In a dark style of the theme there is an error in the color scheme. In the drop-down list displays invisible items
    https://getuikit.com/assets/uikit/tests/close.html
    • sascha

      sascha

      | Profile |
      It is a test for the inverse component. Everything is alright.
  • david.dahl

    david.dahl

    | Profile |
    Will ZOO be updated soon with the revised UIKit 3 framework to choose from?
  • vale

    vale

    | Profile |
    Thanky for the improvment. Flexbox is awesome!
    I am missing some description on how to add the fontawesome icons in the new uikit3 documentation. I am curious what is coming up with fontawseome 5 in may this year.
    • orsat.munitic

      orsat.munitic

      | Profile |
      Maybe I'm wrong but it seems Yootheme is dropping support for fontawesome icons by pushing its own icon set
    • sascha

      sascha

      | Profile |
      Font Awesome works great with UIkit 3. Just use the official library to include it to your project http://fontawesome.io/get-started/
  • vale

    vale

    | Profile |
    Imho there is no need for builing own svg-icon-set in the future, depending on what we can expect from fontawesome5. I am sure YT will not drop support/integration for fontawesome given the big amount of icons coming with fa5.
    • orsat.munitic

      orsat.munitic

      | Profile |
      I wouldn't hold my breath about them keeping fontawesome icons, would be nice if someone from Yootheme could confirm this...
    • sascha

      sascha

      | Profile |
      Font Awesome works great with UIkit 3. It's just not in the core. Just included it like it's recommended by Font Aweseome itself http://fontawesome.io/get-started/
  • martijn.kerssing

    martijn.kerssing

    | Profile |
    May I ask why the main page points directly to Uikit3, while it's not complete yet?

    As you said a couple of things are still missing: Slideshow, Slider, Slideset, Parallax, Nestable, Lightbox, Dynamic Grid, HTML editor, Date- and Timepicker components.

    I must say it looks neat, but still some important things missing...
  • anna.robinson

    anna.robinson

    | Profile |
    Oh, I just discovered the docs now! This is fantastic! Already I see the great potential of UIkit 3 and YOOtheme Pro. Thank you YOOtheme!

Leave a comment

Please login to leave a comment.