UPDATE: Get ready... UIkit 3 beta is coming on Monday 9th, January 🎉💥

We would love to get your feedback and ideas for UIkit 3. Just post them here.

The following lists are a short roundup of all feature requests below (hope I did not miss one) and what our thoughts are about them. I will update the list if new ideas are posted.

On our todo list

Following feature requests are planned or already in development.

• Custom dist builder (Only the components you need) - Coming with Website Relaunch
• Switch to SVG instead of Icon fonts - Not started yet
• New navbar style - Default Theme will be completely overhauled with UIkit 3.0
• Bigger default font-size - Default Theme will be completely overhauled with UIkit 3.0
• Standarize script event - Modal use uk.modal.show while Nestable use sortable-start
• Unit-less line-heights #461
• Better JS documentation
• More examples in documentation

In consideration

Following feature requests are taken into consideration.

• Tags component for forms (Like select2)
• Background classes like uk-background-primary
• Sticky footers
• A .psd file for quicker mockups

Not very likely

Following feature requests will most likely not be added to UIkit. But no final decision made. So it is open for discussion.

• IE9 animation keyframe fallback
• Inline calendar
• All js in one file
• Grid push classes for different screen sizes
• Different tooltips (like danger, success)
• Tree-view component
• Form Validation
• Navbar modifier for dark version
• Stack multiple modals
• Multi level drop down menu
• Remember active tabs after reloading the page
• Button custom active
• Nestable with copy function

Already available

Following feature requests are already available in UIkit.

• Sass Support - Docs
• New dist repository for Bower - Bower Repo
• Slideshow component - Docs, Test
• Animations for Switcher - Docs
• Responsive tables - Docs
• Full screen images - Docs, Test
• Flexbox component - Docs, Test
• Markdown Support - Docs, Test
• Nicer form checkbox/radio elements - Docs, Test
• Elegant sticky headers (Scroll out and return later) - Docs, Test
• Toggle with custom classes (like uk-hidden-small) - Docs, Test
• Parallax component - Docs, Test
• Accordion component - Docs, Test
• Grid without gutter - Docs
• Overlay with zoom effect - Docs
• Popover component - Docs, Test

Reported bugs

Please don't use this thread to report bugs. Instead open a new issue.

Hey uikit!

Are you guys interested in an SASS port for this project?

Originally I am a bootstrapper, but I like the style and structure of uikit.

I am not new to this, previously I was one of the contributor of the jlong/sass-bootstrap project. Did the translation for many bootstrap 2.x and 3.x versions.

I don't know, if a project-fork is the right decision, as the guys did for twbs/bootstrap-sass. Maybe a scss directory structure inside this repo would be fine. With some smart conversion scripts around. But that is to much detail for the moment.

What are your thoughts..?

Best, m5o

I updated the less and js files to the latest beta7 and the icons are not appearing, then i replaced the uikit.js with the beta6 one and they appear again. I get no errors in the console so i have no idea what's wrong

Also i would like to suggest a global variable for the directory of the icons, that way 99.99% of the people will just replace one variable instead of 32457398472398792, thanks

Sorry if I'm asking this here but where is the Date and Time Picker? There's no way to customize the current I can't find JS and CSS that refers to it also.

Nothing in the documentation as well. In test, there's only one javascript option for form.

Hi UiKit Team, u did awesome framework for developers and compared to bootstrap ur given full feature and functionality. and one more i request to you pls develop Dropdown with Multiple checkbox select option, for example find bellow one link http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html

i dont want to use external plugin for developement. i want to use only one that is your file . so pls develeop it

Where put <span uk-icon="icon: check"></span> icons.svg are not loaded, because there are loaded from path 'css/dist/images'. In project we have dir: css, js and images where are icons.svg.

This may already be possible, but there is nothing in the documentation for it, so am guessing it currently is not. But it would be great if the Sticky component could be used to make a sticky footer.

Thanks very much :)

Hi there,

I'm Peter from @cdnjs, as requested in #153, @aheinze made a pull request: https://github.com/cdnjs/cdnjs/pull/2189 to host uikit on cdnjs, to make sure the human works minimum, I further enabled auto-update in https://github.com/cdnjs/cdnjs/commit/5a6c3a0dc2c3331a1a114859186f93fa0eaca96a, which will pull new releases via git tags, using dist/ folder, however, this folder seems to be removed since v2.27.3, which makes auto-update broken on CDNJS, I wonder if is possible to add it back so that we can pull the latest release automatically? Thanks a lot!

Best, Peter

Using the uk-tab functionality, we have run into a major bug that occurs in older versions of Chrome + newest version on older OSX, plus newest versions of Edge and Internet Explorer.

While inside an active uk-tab, if I click and drag to the left or the right, the active tab changes. This is a major issue for us. Here is an example: http://codepen.io/eroc/pen/NRVJKB

Click next to the h1 inside the tab's content, and drag to the left or right and you will see the tabs change.

I have observed this behavior on the following operating systems and browsers: Mac OS X Mavericks v.10.9.5 - Chrome - latest version 54.0.2840.71 Mac OS X El Capitan v.10.11.6 - Chrome version 53.0.2785 (it is working in latest v 54.0.2840.71) Windows 10 - Microsoft Edge - latest version 38.14393 Windows 10 - Microsoft IE11 - latest versions 11.187.143

*please note the windows machines are NOT touch devices.

Hi,

Are there any examples of how to use this with NPM? All the documentation says is to do npm install uikit but not on how to actually use it/include additional components such as notification.

When I try the following code in my main index.js file:

import 'uikit';

I get the following error:

Module not found: Error: Can't resolve 'uikit'

Has anyone used uikit with webpack/webpack2?

UIkit version

3.0.0-beta.18

Reproduction Link

https://jsfiddle.net/egw6ha1g/6/ (every time in chrome & firefox, 2s timer) https://jsfiddle.net/egw6ha1g/4/ (every time in chrome, sometimes in firefox) (search for uk-icon in the HTML) (this is race condition, if vue.js loads first then the problem doesn't manifest itself)

http://i.imgur.com/4kIJslD.png

Steps to reproduce

Put an element with uk-icon tag inside of vue.js instance element.

What is Expected?

One icon appears.

What is actually happening?

Two icons appear.

I'm assuming this is because vue.js re-adds the elements after it parses them, causing uikit notice another uk-icon tag and it just adds the icon. Not sure if this is uikit or vue.js bug.

Updating 3.5.9 to 3.15.19 breaks navbar, sticky, parallax....

Margins also disappeared in navbar, the same problem even on Ukit's example pages. https://getuikit.com/docs/navbar

This code works fine on version 3.5.9, switch to version 3.15.19 and everything breaks.

`

<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200"
    style="background-image: url(https://getuikit.com/docs/images/dark.jpg);">
    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>

<div uk-sticky="end: #transparent-sticky-navbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
        <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </nav>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

UIkit Version 3.15.14

Actual Behavior

What happened? Screenshots please, if relevant! I am using one-site page (my-domain.com), where are anchors to another site , ie. cookies page (my-domain.com/cookies). But on my navigation I am using hashtag navigation (my-domain.com/#about-us etc.), When I am on Cookies page and want to use hashtag navigation, it stops working!

Expected Behavior

What should have happened? Redirecting from my-domain.com/cookies to my-domain.com/#about-us should have worked.

Steps to Reproduce the Problem

1. Create a blank site with sitewide navigation and few <section id="link">.
2. Create another page, that will be used as an "external" link.
3. Try to reach my-domain.com/#about-us from my-domain.com/cookies with uk-scroll

UIkit Version

3.15.18

Actual Behavior

The recommend markup to open a modal-dialog is with uk-toggle. BUT uk-toggle adds aria-expanded="false" to the HTML-element. This is wrong behaviour for modal-dialogs (see WCAG).

Expected Behavior

If I use uk-toggle AND the target is a uk-modal THEN there should not be an automatic aria-expanded on the uk-toggle.

Summary

I want to load HTML like an article from Joomla into a modalbox using uikit modal function. The dimensions of that modal should harmonize with the available screen width. This could be achieved easily by setting the dimensions in percent values. But the uk-modal does not allow, setting dimensions in percent.

Feature Request: It should be possible, to set dimensions of a modalbox with an iframe in it in percent values.

Priority

5 - because I need this function in my new websites.

We use ukit slider and article in combination as plugin for joomla 4.2.5 php8.1.

the slider shows all slides for the posts. But as soon as keywords are added and these are selected, the filtering goes haywire and shows too many slides instead of just the ones selected via tags.

You can test it here: https://codepen.io/WM-Loose/pen/dyKLPRx

All and Tag1 is ok but Tag2 not.

Hope you can help!

Greatings from germany Dirk

Summary

When I start a modal window with an audio in the modalbox and I start playing the audio and then closing the modal box, the audio will keep on playing. In the uikit description for playing videos in a modalbox, they give a strong advice, to add "uk-video" at the end of the src definition. Consequently I am missing the function of a "uk-audio" term.

Please add the missing event handler to uk-audio!

PS: I am using YOOtheme pagebuilder and do not want to use their lightbox instead of the modal because of many flaws.

Priority

_On a scale of 1-5, how important is this feature to you? It is of big importance = 5 for me, because actually I am redesigning my two websites and do want this function in both websites.